HTML Forms
|
HTML Forms |
|
Overview of Forms |
|
Introduction |
|
A form is a particular type of HTML file that allows a visitor to provide values before submitting them to a server. Although most forms on the web are created in HTML, this language doesn't have an inherent mechanism to treat a form. It relies on other languages, mainly called scripts, to process its values. Nevertheless, most forms are created using HTML objects. Therefore, you use a combination of HTML and a script to effectively use a form. 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-based controls that can handle almost any scenario. Besides these, there are action controls that actually send signals 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 (the file is usually located on a (web) server). |
|
Form Creation |
|
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 tag 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 |
|
Most of the controls (which excludes just a few of them) are created using a special tag called input. To use the <input> tag, you must let the browser know what type of input control or object you want to create. The <input> tag uses an attribute called Type that allows you to specify the kind of control you want. This is done by assigning the name of the control type to the Type flag. Some browsers, including Internet Explorer, can recognize all of the HTML GUI controls that we will be using here. Therefore, you can just assign the name of the control to the Type attribute. In some circumstances, and based on HTML standards, you should assign the control type as a string. Like the <br>, some <p>, and some <li> tags, the <input> tag doesn’t need to be closed. |
|
Labels |
|
In the world of graphical user interface (GUI) programming, a label is a static text that displays information to the reader. In GUI environments, there are two main types of labels. The first category is made of stand-alone text that the user reads and performs an action based on such text. Although heavily used in programming of all kinds, a label is not a window control. It is a static piece of text that the user cannot modify. When programming Windows controls, a label is small piece of text that is positioned on top of, or on the left side of, another control. The label is used to indicate to the user what the other control is used for; this is because most of the other controls do not obviously explain their presence. In HTML, there is no explicit way to add a label. It
is simply text you create with any tag of your choice or that you include
in a cell of a table: |
|
||||||||||||||||
|
Practical Learning: Creating Labels |
|
|
Form Controls |
|
A text box is a rectangular object that receives or displays text. By default, a text box is intended for the user to type text in response to a request. |
|
Text Boxes |
|
To create a text box, use the <input> tag. For a text box, specify the Type attribute as Text. The minimum syntax for creating a text box is: <input type=”text”> Because HTML is not case sensitive, you can create the control in all uppercase, all lowercase, or a mix of both. Therefore, the control can also be created with: <Input Type=”Text”> or <INPUT TYPE=”TEXT”>
|
|
Practical Learning: Creating Text Boxes |
|
|
Password Text Boxes |
|
HTML provides a specific text box designed for a form's password. This looks like a classic text box and is created the same way. The main difference is that the text that the user types doesn't display the characters that are being entered. As the user types in the password text box, text appears as a series of asterisks or periods. |
|
Like the regular text box and many other controls, to create a password text box, use the <input> tag and specify the control type as Password assigned to the Type attribute. Here is an example: <input type="password"> |
|
The size of the password text box is controlled by the Size attribute of the <input> tag. To increase the width of the control, assign the desired numeric value to the Size attribute. Here is an example that creates a text box control: <input type="password" size="25"> The text that is typed in the password text box is held by the Value attribute. You can use this attribute to find out what password the user typed. If you plan to retrieve the password value in a script or code of any kind, give the control a name. This is done by assigning a name string to the Name attribute. Here is an example: <input type="password" name="Guarded"> |
|
Combo Boxes |
|
A combo box allows the user to select an item from a group, namely a list. A combo box has the same shape as a text box, except that it is equipped with an arrow on the right side of the control. This arrow control allows the user to display a list of items that are hidden by the text side of the combo box. When the list displays, the user selects one item from the list. Once the item has been selected, the list retracts back to its original text-like size. |
|
To create a combo box, use a tag called select. This tag has to be closed. After typing the <select> tag, create each item that is part of the control using the <option> tag. Each item uses its own <option> tag. After listing the items, make sure you close the Select tag as </select>. Here is an example:
|
|
To select a default item from the combo box, use the selected
attribute of the <options> tag. Here is an example:
|
|
Practical Learning: Creating a Combo Box |
|
|
List Boxes |
|
Like a combo box, a list box displays a list of items that the user can select from. Unlike a combo box, a list box displays a taller list and can even display all of its items all the time. |
|
Like a combo box, a list box is created using the <select> tag. Like the combo box, each item of a list box is created using the <option> tag. While the combo box control is more restrictive with its attributes, to make the control a list box, the <select> tag is equipped with an attribute called Size. This attribute accomplishes two purposes: its make the control become a list box and it sets the vertical size of the list box. In other words, it decides how many items the list box can display at a time. Here is an example:
|
|
Practical Learning: Creating a List Box |
|
|
Check Boxes |
|
A check box is a small square box that allows the user to select an item or to deselect it. The user makes this decision by clicking in the small square box. By default, or depending on how the control is configured, the square box is white and empty. This indicates that it is false or off. When the user clicks it, a small check mark appears in the square box, indicating that is true or on. |
|
To create a check box, you can use the <input> tag and specify the control type as checkbox, CheckBox, or CHECKBOX. Here is an example: |
|
|
A check box doesn't indicate what it is used for. Therefore, you should (always) add a label close to it to help the user figure it out. |
|
Practical Learning: Creating a Check Box |
|
|
Radio Buttons |
|
A radio button is a small round and white circle that allows the user to select an item from a group; this is because a radio button is generally accompanied by others. From a group of items, represented each by a circle, when the user clicks one of the items, none of the others is selected. To change the selection, the user must click another choice in the group. |
|
To make your radio buttons effective, you should always provide at least two radio buttons in a group. |
|
Practical Learning: Creating Radio Buttons |
|
|
The Text Area |
|
A text area is a large control that is a substitute to handle a large paragraph where the text box cannot or should not be used. |
|
To create a text area, use the <TextArea> tag which must also be closed. Here is an example:
|
|
Practical Learning: Creating a Text Area Control |
|
|
Buttons |
|
A button is a rectangular object that the user clicks, as indicated by an application developer. What happens when the user clicks a button depends on you. |
|
To create a button, you can use the <input> tag and specify the type of control by assigning the Button value to the Type attribute. Here is an example:
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. |
|
Practical Learning: Creating a Button |
|
|
|
||
| Home | Copyright © 2004 FunctionX, Inc. | |
|
|
||
