Create an HTML Form Quickly: Illustration

It takes only a few minutes to create an HTML form using JavaScript Coder. This illustration shows you the steps in creating a signup form (with complete input validations).

Step 1

Start JavaScript Coder, Select HTML Form Wizard, Select the Create New HTML Form button and press Next button...

Create HTML Form

Step 2

The edit input elements page appears. Click on the Load From Form Template button

Create HTML Form: Load From Template

Select the "Signup Form - Medium.ft" form template and click Open
Create HTML Form: Select Template

The input elements appear in the list box. You can edit the elements if required. For example, select the "DOB" field and press delete key to delete the element. You can add additional elements if required.
Click the Next button once you have finished editing the elements.
Create HTML Form : Edit Input Elements

Step 3

The Add Validations page appears. You can edit the validations for the input elements in this page. As we have loaded from a form template, the validations already exist in this page. You can edit the validations as required. For example, to make the 'Phone' field a mandatory field, click on the form item from the list and then select Is input mandatory ? 'Yes'.

Click on the Next button to proceed to the 'Edit Error Strings' page.

Add Validations

Step 4

The Edit Error Strings Page appears. You can edit the error strings for the validations in this page.

For example, to edit the error string for the Maximum Length validation for First Name, click on the Maximum length node in the tree and edit the error string in the edit box.
Click on the Finish button to proceed.

Edit Error Strings

Step 5

That's it! you are now ready to insert the code into an HTML file. Click on the Code Insertion Wizard button to invoke the wizard.

Code Insertion Wizard

The Code Insertion Wizard appears.
You can either create a new HTML file for the form or insert the code into an existing HTML file.
Select the Create New HTML File radio button to create a 'fresh' HTML file for the form. Click on the Next button to proceed.

Select HTML File

The JavaScript files for the validations need to be copied along with the HTML file containing the form. The next page of Code Insertion wizard helps you do that.
Click on the Change The Destination Path to copy the JavaScript file.
Click on Finish button.

Copy Script

A message "Code Successfully Inserted" will be shown.

Click on the Open In Browser button to open the newly created file in browser and to see your form with life!

Open In browser

You can see the resulting page here: Create HTML Form Quickly: Sample File

  • Digg
  • del.icio.us
  • Netscape
  • Reddit
  • StumbleUpon
  • Technorati
  • YahooMyWeb

HTML Forms
HTML Form Tutorial
The Form Tag
The Form Submit Button
Form design software

Javascript Form Handling
  Basics
Using getElementById to get the elements in a form
Set value of form element using JavaScript
Get value of form element using JavaScript
Handling multiple forms using JavaScript
JavaScript reset/clear a form
  Advanced
JavaScript Form Validation
Submitting a form using JavaScript
Can JavaScript Email a Form?
Switching the form action field dynamically
JavaScript Button

JavaScript Popup Windows
The window.open method
The window.close method
More ...

 
.   Copyright © 2003-2008 Simfatic Solutions. All rights reserved.