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...
Step 2
The edit input elements page appears. Click on the Load From Form Template button
Select the "Signup Form - Medium.ft" form template and click Open
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.
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.
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.
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.
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.
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!
You can see the resulting page here:
Create HTML Form Quickly: Sample File
|
