Form Design

Introduction Scripting languages (JavaScript, VBScript, etc) don't have graphical user interface (GUI) objects of their own. They uses those that are part of the HTML language. On the other hand, HTML almost cannot take advantage of these objects. Therefore, you will use a combination of HTML and scripts to effectively use these objects. HTML is mainly be used to display GUI objects and control their properties. A script uses code to manipulate those GUI objects. The GUI objects can also be called web objects, controls (or Windows controls).  Forms A form is a group of controls that the user interacts with and sends the result to a specific file as designed by an application developer. To create an effective form, HTML provides various text-based and selection controls that can handle almost any scenario. Besides these, there are action controls that actually send a signal to a script. A form is the central control that manages the other controls. Although the controls can send their data to a script, a form can be used to collect the values typed or selected on the controls, gather them as if they constituted one control and make these values available to a validating file on a server. Creating a Form To create a form, you use the <form> tag. Because a form is a collection of controls and their values, the form must have an end that lets the browser know where the form closes. This is done with the </form> closing tag: <FORM> </FORM> Everything between the <FORM> and the </FORM> tags belong to the form and is called the body of the form. Almost anything can go in the body of the form. You can design it using any HTML tag and make it as attractive as you wish.  Forms Properties Although the <form> and the </form> tags are enough to create a form, such a form can hardly communicate with a script. One of the most important properties you should set for a form is its name. The name allows a script to refer to the form and it can be used by files on the server level. To set the name of a form, assign an appropriate string the Name attribute of the <form> tag. To refer to a form in a script, type the document keyword, followed by a period (the period is an operator), followed by the name of the form. Suppose you create a form called CreditApplication. If you want to call it from a script, you would use: document.CreditApplication

Form's Controls: A Button

A button is a rectangular window that the user clicks, as indicated by an application developer. What happens when the user clicks it depends on you.

Creating a Button

To create a button, use the <input> tag and specify the type of control by assigning the Button value to the Type attribute. Here is an example: <input type="button"> The most visual properties of a button are its location and the text it displays. There are various ways you can set the location of a button on the page. Although HTML provides paragraph tags that can position the button, one of the best options you have is to use a table when designing your form. This will also be valid for all controls we will learn on this site.

Button Properties

The text that a button displays lets the user know what the button is used for. The text on the button is sometimes called a caption. In HTML, this caption is set using the Value attribute of the <input type="button"> existing tag. To provide the button's caption, set the desired string to Value. Here is an example: <input type="button" value="Send Me Somewhere"> The text on the button should be clear and explicit enough to the user. Another important property of a button is its name. This allows the browser to identify it. The name is set by assigning an appropriate name to the Name attribute of the <input> tag.

Button Events

The most important and the most used event on a button results on clicking it. When the button is clicks, it fires the OnClick event. To process a script when the user clicks a button, you can assign the name of a function, as a string, to the onclick attribute of the button. Here is an example: <input type="button" value="Show Full Name" onClick="GetFullName()">

Form's Controls: The Submit Button

To send all of the information of a form to a script, HTML provides a special button called submit. Like the regular button, the submit is a rectangular object that the user clicks to send the result of a form.

Creating a Submit Button

To create a submit button, use the <input> tag but specify the type of control as Submit to the Type attribute. Here is an example: <input type="submit"> Unlike the regular button, the submit button has a built-in caption that automatically displays its role to the user.

Submit Button Properties

The default caption of the submit button is Submit. If this caption doesn't apply to your scenario, you can change it to a more meaningful caption. To change the submit button's caption, set the desired string to the Value attribute of the <input type="submit"> existing tag. Here is an example: <input type="submit" value="Validate Application"> One of the most important properties of a submit button is its name. Even if you are creating a form for fun, the browser needs to identify the button among other controls. The name is set by assigning an appropriate name to the Name attribute of the <input> tag.  The Submit button on a form is the main button the user would click the send the form's collected data to a script or another file. To make this happen, a form is equipped with an attribute called Action. This attribute is assigned an outside function, script, or server file that would receive the results of the form and take appropriate actions. To tell the form what to do when the user clicks the Submit button on a form, assign the desired (or an appropriate) string to the Action attribute of the <form> tag. In the following example, a form sends its result to an e-mail address:

<form action="mailto:functionsme@gmail.com"> </FORM>

HTML allows you to decide how you want the form to send its data away. The most two popular options you have are Post and Get.

Submit Button Events

The most important and the most used event on a button results on clicking it. When the button is clicks, it fires the OnClick event.

Form's Controls: The Reset Button

Most of the forms allow the user to fill out text controls and make selections from other controls. These actions change the values of those controls as set by the application developer. If in the middle of filling out a form the user decides to start over, HTML provides a special button that can reset all controls to their default states or values. This is programmatically done using a special button called Reset.

Creating a Reset Button

To create a reset button, use the <input> tag and specify the type of control as Reset to the Type attribute. Here is an example: <input type="reset"> Unlike the regular button, the reset button has a built-in caption that automatically displays its role to the user.

Reset Button Properties

The default caption of the reset button is Reset. If this caption is not explicit enough for your application, you can change it. To change the caption of a reset button, set the desired string to the Value attribute of the <input type="reset"> existing tag. Here is an example: <input type="reset" value="Start Over"> The reset button is mainly configured to handle its business on the form and doesn't need to send any signal such as a result to a script. Therefore, its name is not as important as it is to other controls. If for some reason you need to refer to the Reset button from a script, then you can give it a name. The name is given by assigning an appropriate string to the Name attribute of the <input type="reset"> existing tag.

Reset Button Events

The only interesting role of a reset button occurs when the user clicks it. The role of the Reset is already configured in the browser. If you still need to take some action when  the user clicks it, you can use the OnClick event that fires when the user clicks the button.