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.

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




HTML Forms
	HTML Form Tutorial
	The Form Tag
	The Form Submit Button
	Form design software
	How to make a web form
	Make web forms quickly, without coding

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-2009 JavaScript-coder.com. All rights reserved.