Form Controls

An HTML form provides a way for users to interact with a Web page. A form is, basically, a data capture device. It presents the user with one or more data input or selection controls, or fields, through which the user submits information to a Web page. On the basis of this submitted information, the page can respond to the user. This response can vary depending on the purpose of the form. The submitted data may be used,

• to direct visitors to a different page, much like what happens when clicking a link;
• to present visitors with personalized pages containing information and links pertinent to their interests or preferences;
• to trigger a complex search process to locate information, products, or services about which the user is interested;
• to perform personalized displays of options or calculations of prices of those products or services;
• to trigger a credit card check during purchase of products or services;
• to interface with the organization's accounting and billing systems to finalize purchase;
• to generate automated email responses as purchase confirmations;

and the list can go on and on. The point is that forms are the triggers for a whole host of activities that transform Web sites from simple electronic "page turners" into full-featured information processing systems.

Form Controls - TOP

Forms gather information from users by displaying special form controls that permit the user to enter data or make selections. The variety of standard controls that can be coded on a Web form are shown below.

Control Type	Browser Display
Textbox:
Password:
Textarea:	Entered information
Radio Button:	Radio Button
Checkbox:	Checkbox
Drop-down List:
Submit Button:
Submit Graphic:
Reset Button:

Figure 10-1. Varieties of form controls.

Note that there are three basic categories of controls. The fields labeled "Textbox," "Password," and "Textarea" present input areas where the user can enter information as typed characters. The controls labeled "Radio Button," "Checkbox," and "Drop-down List" provide options for the user to select from displayed items. The controls labeled "Submit Button," "Submit Graphic," and "Reset Button" are clickable controls for submitting the form data for processing or refreshing the entire form by clearing entries and selections.

HTML 5 introduces several new interactive form controls. Many of the the form controls include built-in validation. Currently, not all browsers support these controls. If a control is not supported, it will display as a standard input control with no dynamic functionality. Below are some of the most common and widely supported HTML 5 form controls.

Control Type	Browser Display
Email Address Input:
URL Input:
Search Field Input:
Datalist
Calendar:	Note: type="date" is supported only in Chrome, Safari, and Opera.
Color Picker:
Range/Slider Input:	(Range 1-110)
Number:	(Enter number between 0 and 10)
Telephone:	Note: type="tel" is supported only in Safari 8.

Figure 10-2. Commonly supported HTML 5 form controls.

Form Processing - TOP

A form by itself cannot provide much in the way of processing power. Therefore, HTML forms are backed by processing routines run remotely at the Web server to handle data submitted from these forms. Form information arriving at the Web server is processed by programs, or scripts, written in server languages such as ASP.NET, PHP, or Java. These are full-featured programming languages that often interact with databases and files on the server, thus offering a full range of information processing capabilities.

Although a large part of form processing takes place on the Web server, certain kinds of processing can take place locally at the browser. These processing scripts are written in the JavaScript language, the default scripting language included with modern browsers. This language has many of the features of regular programming languages. Its processing capabilities, though, are limited to what can be achieved on the local desktop PC.

In this tutorial, focus is only on setting up forms on a Web page -- how to create the input, selection, and submission controls. Server and browser processing is beyond the scope of interest.

TOP | NEXT: Creating Forms

Creating Forms

An HTML form consists of at least 1 of the form controls listed in the previous section. The form can appear anywhere within the body of a Web page. In fact, the entire page can be a form.

The <form> Tag - TOP

The form controls must be surrounded by a <form> tag, the general format for which is shown below.

<form   id="formId (optional)"   name="formName (optional)"   action="url (required)"   method="get (default)|post"   autocomplete="on (default)|off" >   ...form controls </form>

Figure 10-3. General format for <form> tag.

All controls that are part of a form must be enclosed inside a <form> tag. The tag can appear anywhere on the page as long as it encloses all its controls. If the entire page consists only of form controls, you can code the opening tag immediately following the <body> tag and the closing tag immediately preceding the </body> tag to encompass the entire page as a form. Then, form controls can appear anywhere on the page and be part of the form.

The id Attribute - TOP

The id attribute assigns unique identification to the form. This id is used by Javascript or other client-side scripts to reference the form. The id can also be used to apply styles to the form. You can use any identification of your choosing for a form; the id value must be unique and should not include embedded blank spaces or special characters.

The action Attribute - TOP

User information entered into a form is made available to a server page containing a script to processes that information. The script may appear on the same page as the form or the information may be sent to a different page.

The action attribute identifies the server page to which form information is submitted. If the processing page is the same page as the form page, or if the processing page is in the same directory as the form page, then the URL is simply the name of the page. If the page is at a remote location, a complete URL is coded. The action attribute must appear in all <form> tags.

The method Attribute - TOP

The method attribute specifies the manner in which form information is transmitted to the page identified in the action attribute. The two possible values are get and post, the former being the default. When the get method is used, information from the form is appended to the action URL. The get method is best suited for sending small amounts of data; when the post method is used, the information is transmitted to the action page as a separate data stream. Thepost method offers better security since the submitted data is not visible in the browser's address bar.

The autocomplete Attribute - TOP

The autocomplete attribute is used to dynamically fill form fields. Autocomplete can be disabled by setting value to off. This attribute is new to HTML 5.

All that is required at present is to code the basic <form> tag to enclose its controls. The minimal setup for a page containing a form is shown below, delaying for the moment considerations about form submission for processing.

<!DOCTYPE html>

<html lang="en">

<head>
  <title>Form Page</title>
  <meta charset="utf-8">
</head>
<body>

<form action="url>

  ...form controls

</form>

</body>
</html>
    

Listing 11-1. General page layout for a form.

TOP | NEXT: Textbox Controls

Textbox Input Controls

Text input controls require the user to enter information by typing into an input area. Text boxes can be chosen for single-line or multiple-line scrolling input.

The <input> Tag - TOP

The most commonly encountered type of form control is the textbox. This control presents a standard text entry box into which information is typed. A text input field is created using an <input> tag in the following format.

<input type="text | password | email (HTML 5)|url (HTML 5) "   id="id"   name="name"   size="n"   maxlength="n"   value="text"   disabled="disabled"   readonly="readonly"   accesskey="keyboard character"   tabindex="numeric value"   required="required (HTML 5)"   placeholder="text (HTML 5)"   autocomplete="on|off (HTML 5)"   autofocus="autofocus (HTML 5)" >

Figure 10-4. General format for <input type="text|password"> tag.

The type Attribute - TOP

The <input> tag includes a type attribute to define this as a text entry field. Many different types of text input controls are available.

type="text" - TOP

If type="text", or if no type attribute is specfied, the field type is a standard textbox for entering information.

type="password" - TOP

If type="password", a similar control is created but with typed characters echoed as bullet characters to disguise the entered information.

type="email" (HTML 5) - TOP

The input type="email" specifies a text box that accepts information that must be in e-mail format, such as "admin@itwebtutorials.net". Only browsers that support the HTML 5 email attribute will verify the format of the information. Older browsers will treat this as a standard text box control.

type="url" (HTML 5) - TOP

The type="url" is intended to accept any valid URL value, such as "http://itwebtutorials.net". Only browsers that support the HTML 5 url attribute will verify the format of the information. Older browsers will treat this as a standard text box control.

The control types are shown below along with the coding to produce them. The controls appear in a borderless table in order to align them and their prompt labels. Enter any text into the fields to view their appearance.

Please enter the following information:

Name:
Password:

Figure 10-5. Varieties of <input type="text|password"/> tag. tag.

<form action="ThisPage.htm">
<p>Please enter the following information:</p>

<table>
<tr>
  <td>Name: </td>
  <td><input id="TheName" type="text"></td>
</tr>
<tr>
  <td>Password: </td>
  <td><input id="ThePassword" type="password"></td>
</tr>
</table>

</form>
    

Listing 10-3. Code to display varieties of <input type="text|password"> tag.

The id Attribute - TOP

You will nearly always need to identify your text fields, as you will any other form control. Providing an id is important because it provides identification for the data value entered into the field by the user. Both browser or client-side scripts written to process this information does so through the control id. Controls that are assigned an id value can also be styled using a CSS id selector.

The name Attribute - TOP

The name attribute provides another way to identify a form control. While client-side scripts process control information using the id, server-side scripts typically use the name attribute value to interact with the control. In most cases, the id and name value assigned to a form control can be the same.

The size Attribute - TOP

Unless you specify a size for a textbox, it is displayed at its default size, which is large enough for approximately 20 typed characters. In most cases you will want to specify a size that is suggestive of the number of characters expected to be entered. For example, the three textboxes below are sized at 15 (City), 2 (State), and 10 (Zip code) characters, respectively. Instead of using the size attribute you can specify a field size using the style sheet width property.

City:
State:
Zip:

Figure 10-6. Setting display sizes for textbox controls.

<form action="ThisPage.htm">
<table>
<tr>
  <td>City: </td>
  <td><input type="text" id="City"></td>size="15"></td>
</tr>
<tr>
  <td>State: </td>
  <td><input type="text" id="State" size="2"></td>
</tr>
<tr>
  <td>Zip: </td>
  <td><input type="text" id="Zip" size="10"></td>
</tr>
</table>
</form>
    

Listing 10-4. Code to set display sizes for textbox controls.

The maxlength Attribute - TOP

A textbox can hold up to 256 characters, irrespective of its display size. When typing reaches the right boundary of the field, the text scrolls to permit additional characters to be typed. As a general rule, you should not permit the user to enter more than the maximum number of expected characters. When capturing data for server processing, this maximum is often given by the field sizes in the database that stores the values.

You can set a maximum number of allowable characters by coding the maxlength attribute. When this value is coded, the user is not be able to type more than the specified number of characters into the field.

<form action="ThisPage.htm">
<table>
<tr>
  <td>City: </td>
  <td><input type="text" id="City" size="15" <maxlength="15"></td>
</tr>
<tr>
  <td>State: </td>
  <td><input type="text" id="State" size="2" maxlength="2"></td>
</tr>
<tr>
  <td>Zip: </td>
  <td><input type="text" id="Zip" size="10" maxlength="10"></td>
</tr>
</table>
</form>
    

Listing 10-5. Code to set maximum characters entered into textbox controls.

The value Attribute - TOP

A textbox can include the value attribute to pre-enter text in the field. You can provide a default value for the field, or give suggestions about the content expected.

Name:

Figure 10-7. Pre-filling a textbox control.

Name: <input type="text" id="FullName" size="30" value="Enter your full name here"/>
    

Listing 10-6. Code to pre-fill a textbox control.

The disabled Attribute - TOP

The disabled attribute is used to disable and grays out the control so that the user can not interact with it. The disabled attribute is often associated with controls that are assigned default values using the value attribute. With the disabled attribute, users are not able to change or copy the default value.

The readonly Attribute - TOP

The readonly attribute is similar to the disabled attribute and is used to prevent the user from changing the value of the control. The readonly attribute is often associated with controls that are assigned default values using the value attribute. Unlike controls assigned the disabled attribute, the contents of a control with the readonly attribute can be copied.

The accesskey Attribute - TOP

The accesskey attribute is used to configure a shortcut key for the form control. This allows the user to press a key to place focus on the form control.

Name:

Name: <input type="text" id="FullName" size="30" acesskey="n">
    

The method for accessing the shortcut key various by browser, with most using the [ALT]+ shortcut key. Firefox uses [ALT][SHIFT] + shortcut key.

The tabindex Attribute - TOP

The tabindex attribute is used to specify the tab order of the textbox if the tab key is used to navigate the form controls. If numeric value assigned to the attribute is 2, the textbox would have focus set when the user presses the tab key twice.

The required Attribute - TOP

The required attribute is new to HTML 5. It can be included with the text, url, email, and password text box controls. When the attribute is set to true, it specifies that the field must contain a value before submitting the form.

The placeholder Attribute - TOP

The placeholder attribute is new to HTML 5. It is used to specify a short hint that describes the expected value of an input field. The placeholder text is display in the text box until the user inputs a value.

The autocomplete Attribute - TOP

By default the autocomplete attribute is set to true. The attribute specifies whether or not the browser should predict and display options to fill in the textbox. Set autocomplete to false to disable the autocomplete functionality.

The autofocus Attribute

The autofocus attribute specifies if the text box should receive focus automatically when the page loads.

Using Quotes in Textboxes - TOP

When pre-filling a textbox through the value attribute, you cannot code quotation marks surrounding portions of text. This is because the value attribute itself is surrounded by quotes, and any quotation marks inside these container quotes disrupts their pairing. So, for example, the following code is invalid and does not produce a proper textbox display.

<input id="QuoteText" type="text" size="45"
  value="Here is a "quotation" appearing in the textbox."/>
    

Figure 10-8. Invalid pre-filling of a textbox with quoted content.

You can, however, use the special " character to display quotation marks inside a textbox value attribute.

<input id="QuoteText" type="text" size="45"
  value="Here is a &quot;quotation&quot; appearing in the textbox."/>
    

Figure 10-9. Valid pre-filling of a textbox with quoted content.

No special precautions need to be taken, however, for user text entry. Quoted text can be entered into a textbox without presenting problems. The same goes for HTML tags. They can be coded inside a value attribute and also entered by the user without causing problems.

Styling Textboxes - TOP

If you wish to change the default appearance of a textbox, you can use style sheet properties to do so. As an example, the following textbox is decorated with different borders, background color, and foreground color, and displays a different font face and size from the normal Arial 10-point font.

Name:

Figure 10-10. Styling a textbox control.

<style>
  .textbox {width:200px; font-family:comic sans ms; font-size:10pt;
            background-color:#F0F0F0; color:#0000FF; border:ridge 5px}
</style>

Name: <input type="text" id="FullName" class="textbox"
maxlength="20" value="Enter your full name here">
    

Listing 10-7. Code to style a textbox control.

Other HTML 5 Text Controls - TOP

HTML 5 introduces an assortment of new form controls that can be used to collect text data. The display and support of these new controls varies by browser. Browsers that do not support the new text controls will simply ignore the new elements and display them as a standard text box. In addition to the HTML 5 text controls introduced above, other new text form controls include the telephone, search, datalist, range, number, calendar, and color controls.

TOP | NEXT: Textarea Control

Textarea Input Control

The <textarea> tag is used when you need a larger input area than is provided by a textbox. This tag creates a multiline input box that displays horizontal and vertical scroll bars and word-wraps the text. A typical textarea control resembles the following.

Enter your comments:
This is entered information that is word-wrapped inside the textarea control.

Figure 10-11. A <textarea> control.

The <textarea> control is a container tag with the general format shown in Figure 10-12.

<textarea   id="id"   cols="n"   rows="n"   maxlength="n"   rows="n"   readonly="readonly"   disabled="disabled"   placeholder="short hint text"   autofocus="autofocus"   wrap="soft|hard" >   ...pre-entered text </textarea>

Figure 10-12. General format for <textarea> control.

The name Attribute - TOP

As with all form controls, the <textarea> should be assigned a name to identify the control. This name should be representative of the information contained in the field. The namevalue is used by server-side scripts when processing form data.

The id Attribute - TOP

As with all form controls, the <textarea> should be assigned an id. This id should be representative of the information contained in the field. The id is primarily used by client-side scripts when processing form data.

The cols Attribute - TOP

The visual width of the textarea is given by the cols attribute. It specifies the width as the approximate number of characters appearing across a line of text. If this attribute is not present, a default width of approximately 20 characters is used. A style sheet width property can be used in place of the cols attribute to set the width of the textarea.

The rows Attribute - TOP

The height of the textarea is given by the rows attribute. This value specifies the number of text lines that are visible in the input area. The default is two rows of visible text. A style sheet height property can be used in place of the rows attribute to set the height of the textarea.

The maxlength Attribute - TOP

As a general rule, you should not permit the user to enter more than the maximum number of expected characters. When capturing data for server processing, this maximum is often given by the field sizes in the database that stores the values.

You can set a maximum number of allowable characters by coding the maxlength attribute. When this value is coded, the user is not be able to type more than the specified number of characters into the field.

The disabled Attribute - TOP

The disabled attribute is used to disable and grays out the control so that the user can not interact with it. The disabled attribute is often associated with controls that are assigned default values using the value attribute. With the disabled attribute, users are not able to change or copy the default value.

The readonly Attribute - TOP

The readonly attribute is similar to the disabled attribute and is used to prevent the user from changing the value of the control. The readonly attribute is often associated with controls that are assigned default values using the value attribute. Unlike controls assigned the disabled attribute, the contents of a control with the readonly attribute can be copied.

The required attribute is new to HTML 5. It can be included with the text, url, email, and password text box controls. When the attribute is set to true, it specifies that the field must contain a value before submitting the form.

The placeholder Attribute - TOP

The placeholder attribute is new to HTML 5. It is used to specify a short hint that describes the expected value of an input field. The placeholder text is display in the text box until the user inputs a value.

The autofocus Attribute - TOP

The autofocus attribute specifies if the text box should receive focus automatically when the page loads.

The wrap Attribute - TOP

The wrap attribute configures line breaks within the information entered. When the wrap attribute is set to soft, the text input is not wrapped. When the attribute is set to hard, text in the textarea is wrapped when submitted.

Pre-filled Content - TOP

A textarea can be pre-filled with text. The information to display in the textarea is coded between the opening and closing <textarea>...<textarea> tags.

It is important to remember that any spaces, line breaks, or blank lines appearing in the editor coding are reproduced in the textarea, in much the same way that the browser displays information coded inside a <pre> tag. In the following example, editor coding in Listing 10-8 arranges the tag and its content on separate lines and indented for readability within the editor. Its browser display in Figure 10-13, however, is not as normal word-wrapped paragraphs; rather, the editor coding is faithfully reproduced.

<textarea id="MyTextarea" cols="50" rows="6">
  These are two paragraphs appearing 
  inside a textarea.

  This content, with line breaks and blank lines coded in the 
  editor For readability, Is exactly reproduced within the textarea.
    

Listing 10-8. Coding a textarea with hard-coded spaces and line breaks.

These are two paragraphs appearing inside a textarea. This content, with line breaks and blank lines coded in the editor for readability, is exactly reproduced within the textarea.

Figure 10-13. A textarea displaying hard-coded spaces and line breaks.

To permit pre-fill text to be automatically spaced and word-wrapped inside a textarea, the text should be coded immediately following the opening tag and followed immediately by the closing tag. No hard spaces or line breaks should be coded. The following example shows pre-entered paragraphs coded as single lines in the code editor to permit proper word wrapping in the textarea.

<textarea id="MyTextarea" cols="50" rows="6">
These are two word-wrapped paragraphs appearing in a textarea.

This content, without extra line breaks or blank lines coded in the editor, is properly word-wrapped inside the textarea as intended.
</textarea>
    

Listing 10-9. Coding a textarea for word-wrapped content.

These are two word-wrapped paragraphs appearing in a textarea. This content, without extra line breaks or blank lines coded in the editor, is properly word-wrapped inside the textarea as intended.

Figure 10-14. A textarea displaying word-wrapped content.

HTML Tags and Quotes in a Textarea - TOP

HTML tags entered into a textarea do not have any formatting effects. They are treated as standard text characters. In the following illustration, HTML tags appear in a textarea, either as pre-filled text or as user data entry, but do not apply their formatting.

<textarea id="TagInput" cols="40" rows="6">
The <p> tag appears around a block of
text to offset it from surrounding
text by blank lines. A <div> tag, in
contrast, does not produce blank lines
surrounding its content.
</textarea>
    

Listing 10-10. Coding a textarea with HTML tags.

The <p> tag appears around a block of text to offset it from surrounding text by blank lines. A <div> tag, in contrast, does not produce blank lines surrounding its content.

Figure 10-15. A textarea with HTML tags.

Unlike the case with textbox values, quotation marks can appear within pre-filled text and can also be entered by the user without causing textarea display or data-entry problems.

Styling a Textarea - TOP

A textarea uses a default Courier New font face with 12-point type. You can change this setting as well as style the textarea using a style sheet as shown below.

<style type="text/css">
  textarea {style="border:inset 5px; background-color:#F0F0F0; color:#0000FF;
            font-family:comic sans ms; font-size:10pt; padding:7px}
</style>

<textarea id="Comments" cols="50" rows="4">
This control is styled with 10-point Comic Sans
MS type face with gray background and blue
foreground colors.

The border is inset style, five pixels in width.
Padding of 7 pixels appears around the text.
</textarea>
    

Listing 10-11. Coding to style a textarea.

This control is styled with 10-point Comic Sans MS type face with gray background and blue foreground colors. The border is inset style, five pixels in width. Padding of 7 pixels appears around the text.

Figure 10-16. A styled textarea.

TOP | NEXT: Radio Buttons

Radio Buttons

Radio buttons are collections of circular buttons that can be clicked "on" and "off." A filled-in, darkened center in the button indicates that the button is chosen; a open center indicates that the button is not chosen. Radio buttons normally provide users with mutually exclusive choices. That is, only one of a group of buttons can be chosen. When a different button is clicked, the previous button is turned off. A set of radio buttons is shown below.

Choice 1
Choice 2
Choice 3

Figure 10-17. A set of radio buttons.

The <input type="radio"> Tag - TOP

Radio buttons are defined with one or more <input type="radio"> tags. A separate tag is required for each button in a set. The general format for this tag is shown below.

<input type="radio"   id="id"   name="name"   value="text"   checked="checked"   disabled="disabled"   readonly="readonly"   required="required" >

Figure 10-18. General format for <input type="radio"> tag.

The <input type="radio"> tag only displays a button. In order to provide a label for the button, text can appear either before or after the button code to place it to the left or right of the button.

The id Attribute - TOP

An id can be assigned to a button if there is a need to identify it for individual script processing, normally by a browser script. Otherwise, an id is not needed.

The name Attribute - TOP

Radio buttons are usually grouped to present a set of related choices for the user. In this case, only one of the options can be chosen -- they are mutually exclusive choices. When a button is clicked for selection, and that button is highlighted, any previously chosen button becomes de-selected and un-highlighted. A group of radio buttons is made to act in this way by assigning the same name to all buttons in the group, as shown in the following code for the buttons displayed above.

<input type="radio" name="Choice">Choice 1<br>
<input type="radio" name="Choice">Choice 2<br>
<input type="radio" name="Choice">Choice 3<br>
    

Listing 10-12. Coding to group radio buttons.

There are three buttons in this group, each appearing on a separate line. A text label appears to the right of the buttons to identify each choice. All buttons have the same name to enforce only one choice from the group.

The value Attribute - TOP

In a manner similar to text boxes, password boxes, and textareas, radio buttons have data values associated with the choices. These values are provided explicitly through value attributes coded for the buttons. When a button is chosen, its particular value is associated with the name of the button, that is, with the name assigned to all of the buttons in the group. Consider the following example.

What is your favorite color?
Red
Green
Blue

Figure 10-19. A set of buttons for making a choice of a color.

What is your favorite color?<br>
<input type="radio" name="Color" value="Red">Red<br>
<input type="radio" name="Color" value="Green">Green<br>
<input type="radio" name="Color" value="Blue">Blue<br>
    

Listing 10-13. Code for a set of buttons to make a color choice.

All of the buttons share the name "Color" in order to set up a group of mutually exclusive choices. The particular color chosen from the group is given by the value associated with the choice. So, if the user clicks the first button, the color "Red" is chosen. More accurately, the value "Red" becomes associated with the name "Color" as indicative of the choice.

It is normally always necessary to code value attributes for radio buttons. This is the way in which buttons take on values and how a browser script or server program determines which button is clicked. Also, it is not necessary to assign a value that matches the button label. Often, abbreviated codes are used for values, while a more descriptive label is displayed.

What is your favorite color?<br>
<input type="radio" name="Color" value="R">Red<br>
<input type="radio" name="Color" value="G">Green<br>
<input type="radio" name="Color" value="B">Blue<br>
    

Listing 10-14. Code for a set of buttons to make a "coded" color choice.

A selection of one of the above buttons submits the name and value Color=R, Color=G, or Color=B to the processing program, which then determines what action to take on the value code submitted.

The checked Attribute - TOP

When a set of radio buttons is first displayed, all of the buttons appear unchecked; that is, none are selected and highlighted. You can, however, force one of the buttons in the group to appear pre-checked, or pre-selected. You do this by coding the checked="checked" attribute in the <input type="radio"> tag of the button you want to appear "on" when the page is loaded.

Red
Green
Blue

Figure 10-20. A set of buttons with the first choice pre-selected.

What is your favorite color?<br>
<input type="radio" name="Color" value="R" checked="checked">Red<br>
<input type="radio" name="Color" value="G">Green<br>
<input type="radio" name="Color" value="B">Blue<br>
    

Listing 10-15. Code to pre-select a button.

The disabled Attribute - TOP

The disabled attribute is used to disable and grays out the control so that the user can not interact with it. The disabled attribute is often associated with controls that are assigned default values using the value attribute. With the disabled attribute, users are not able to change or copy the default value.

The readonly Attribute - TOP

The readonly attribute is similar to the disabled attribute and is used to prevent the user from changing the value of the control. The readonly attribute is often associated with controls that are assigned default values using the valueattribute. Unlike controls assigned the disabled attribute, the contents of a control with the readonly attribute can be copied.

The required Attribute - TOP

The required attribute is new to HTML 5. It can be included with the text, url, email, and password text box controls. When the attribute is set to true, it specifies that the field must contain a value before submitting the form.

TOP | NEXT: Checkboxes

Checkboxes

A checkbox, like a radio button, provides the user with choices. In the case of a series of checkboxes, however, the choices are not mutually exclusive; rather, the user can select one or more of the choices. For those boxes that are checked, a checkmark appears in the box. Unchosen boxes remain empty. A set of checkboxes is illustrated below.

What are your favorite colors?
Red
Green
Blue
Yellow
Maroon
Purple
Aqua
Teal

Figure 10-21. A set of checkboxes.

The <input type="checkbox"> Tag - TOP

The general format for coding a checkbox is similar to that for a radio button. An <input type="checkbox"> tag is required for each checkbox.

<input type="checkbox"   id="id"   name="name"   value="text"   checked="checked"   disabled="disabled"   readonly="readonly"   required="required" >

Figure 10-22. General format for <input type="checkbox"> tag.

The <input type="checkbox"> tag only displays a checkbox. In order to provide a label for the checkbox, text can appear either before or after the tag to place it to the left or right of the checkbox.

The id Attribute - TOP

An id can be assigned to a checkbox if there is a need to identify it for script processing, normally by a browser script. Otherwise, an id is not needed.

The name Attribute - TOP

Checkboxes may need to be named with name attributes so that chosen values can be associated with the names for server script processing. As is the case with radio buttons, all checkboxes in a group can have the same name. Unlike radio buttons, however, a common name does not force the choices to be mutually exclusive. The name simply takes on more than one value if more than one choice is made. This presents some processing peculiarities, but it is valid to do this. A better solution is to assign different names to the checkboxes. Each name then becomes associated with a different value irrespective of the number of checks made by the user. If a set of checkboxes is involved only in browser processing, then id values, rather than names, can be coded for the checkboxes.

The value Attribute - TOP

Similar to a radio button, the value associated with a checkbox is given in the checkbox's value attribute. When a form is submitted for server processing, this value is associated with the name of the particular checkbox. For browser processing, the value is associated with the checkbox's id. Values do not have to match the labels. Normally, abbreviated codes are used for values, and more descriptive text is used for labels.

The checked Attribute - TOP

Checkboxes can be pre-checked by coding checked="checked" for as many different checkboxes as you want pre-checked.

The various settings for checkboxes are shown below for the set appearing above in Figure 10-21. In this example, all checkboxes are assigned different names to differentiate them for server processing. No checkboxes are pre-checked. No id values are assigned since these checkboxes are processed by a server script rather than a browser script.

What are your favorite colors?<br>
<input type="checkbox" name="Color1" value="R">Red<br>
<input type="checkbox" name="Color2" value="G">Green<br>
<input type="checkbox" name="Color3" value="B">Blue<br>
<input type="checkbox" name="Color4" value="Y">Yellow<br>
<input type="checkbox" name="Color5" value="M">Maroon<br>
<input type="checkbox" name="Color6" value="P">Purple<br>
<input type="checkbox" name="Color7" value="A">Aqua<br>
<input type="checkbox" name="Color8" value="T">Teal<br>
    

Listing 10-16. Code for a set of checkboxes.

The disabled Attribute - TOP

The disabled attribute is used to disable and grays out the control so that the user can not interact with it. The disabled attribute is often associated with controls that are assigned default values using the value attribute. With the disabled attribute, users are not able to change or copy the default value.

The readonly Attribute - TOP

The readonly attribute is similar to the disabled attribute and is used to prevent the user from changing the value of the control. The readonly attribute is often associated with controls that are assigned default values using the value attribute. Unlike controls assigned the disabled attribute, the contents of a control with the readonly attribute can be copied.

The required Attribute - TOP

The required attribute is new to HTML 5. It can be included with the text, url, email, and password text box controls. When the attribute is set to true, it specifies that the field must contain a value before submitting the form.

TOP | NEXT: Drop-Down Lists

Drop-Down Lists

A drop-down list, presents a list of items from which one or more are chosen. By clicking the down-arrow at the right of the list, the full list is exposed. An item is chosen by clicking an entry.

Choose your favorite color:

Figure 10-23. A drop-down list.

The <select> and <option> Tags - TOP

The menu of choices is created with the <select> tag. Inside this tag are <option> tags, one for each item in the list. The general formats for the <select> and <option> tags are shown below.

<select   id="id"   name="name"   size="n"   multiple="multiple"   disabled="disabled" >   <option     value="text"     selected="selected"    disabled="disabled" >      Label   </option>   ... </select>

Figure 10-24. General formats for <select> and <option> tags.

The id Attribute - TOP

An id can be assigned to a drop-down list if there is a need to identify it for browser script processing. Otherwise, an id is not needed.

The name Attribute - TOP

The drop-down list can be assigned a name with the name attribute coded in the <select> tag. The list name becomes associated with the value of the item selected for certain types of server processing.

The <option> Tag - TOP

Items are defined for appearance in a drop-down list with the <option> tag. There are as many tags as there are items in the list. The label for the option is entered between the opening and closing tags. This is the text string that is visible in the list and becomes the default value for the selection.

The value Attribute - TOP

By default, the value associated with a drop-down option is given by the text label included in the <option> tag. However, a value attribute can be coded to supply a different value from the label. You might choose to do this when the labels are extended text strings but you need only to collect abbreviated codes for the values.

The code below shows the basic tags and attributes needed to create a drop-down list. It produces the list shown above in Figure 10-23.

Choose your favorite color:<br>
<select id="Color">
  <option value="R">Red</option>
  <option value="G">Green</option>
  <option value="B">Blue</option>
  <option value="Y">Yellow</option>
  <option value="M">Maroon</option>
  <option value="P">Purple</option>
  <option value="A">Aqua</option>
  <option value="T">Teal</option>
</select>
    

Listing 10-17. Basic code for a drop-down list.

The size Attribute - TOP

The size attribute of the <select> tag indicates the number of items that are visible in the list. By default, the list displays only one item. If a size is specified, the list displays that number of items and, if necessary, a scroll bar to access them. A drop-down list that uses the size attribute or displays more than one option is often referred to as a selection list. The list shown below uses the attribute size="4" to display four items at a time.

Choose your favorite color:

Figure 10-26. A selection list permitting multiple selections.

The selected Attribute - TOP

Items in the list can be pre-selected by coding the selected="selected" attribute in the associated <option> tag. Multiple pre-selections can be made only when multiple="multiple" is coded for the <select> tag. The selection list in Figure 10-26 has three items (Red, Blue, Aqua) pre-selected.

The disabled Attribute - TOP

The disabled attribute is used to disable and grays out the control so that the user can not interact with it. The disabled attribute is often associated with controls that are assigned default values using the value attribute. With the disabled attribute, users are not able to change or copy the default value.

The <optgroup> Tag - TOP

The items in a drop-down list can be grouped using the <optgroup> element. The tag includes a label attribute that is used to specify the label for each group of options in the list. The code below shows how the tag is used.

Select a Tree:<br>
<select id="Trees">
<optgroup label="Pines">
        <option value="Longleaf">Long Leaf Pine</option>
        <option value="Loblolly">Loblolly Pine</option>
</optgroup>
<optgroup label="Oaks">
        <option value="Red">Southern Red Oak</option>
        <option value="Live">Live Oak</option>
        <option value="White">White Oak</option>
        <option value="Scarlet">Scarlet Oak</option>
</optgroup>
<optgroup label="Elms">
        <option value="American">American Elm</option>
        <option value="Slippery">Slippery Elm</option>
</optgroup>
</select>
    

Select a Tree:

TOP | NEXT: Submit & Reset Buttons

Submit and Reset Buttons

All forms that are submitted for server processing must include at least one "submit" button to transmit form information to the Web page identified in the action attribute of the <form> tag. Either a standard button or a graphic image can be used for form submission.

The <input type="submit"> Button - TOP

A form submission button can be created with an <input type="submit"> tag and can appear anywhere on the form. The default appearance of the button with its "Submit Query" label is shown below.

Figure 10-27. Default appearance of a form submission button.

The general format for the <input type="submit"> tag to define a form submission button is given in Figure 11-28.

<input type="submit"   id="id"   name="name"   value="text" >

Figure 10-28. General format for <input type="submit"> button.

The id Attribute - TOP

An id can be assigned to a submit button if there is a need to identify it for browser script processing. Otherwise, an id is not needed.

The name Attribute - TOP

The submit button can be assigned a name with the name attribute. A name is required for certain types of server processing.

The value Attribute - TOP

The value attribute provides two kinds of identification for the button. On the one hand, this value is associated with the button name and indicates to a server script which button was clicked; on the other, this value is used as the label for the button. If a value attribute is not coded, the button is labeled "Submit Query"; however, you can assign any text string to provide helpful identification of the button as a submit button.

Typical coding and display for a submit button is shown below.

<input type="submit" name="SubmitButton" value="Submit Form">
    

Figure 10-29. Typical code and display for <input type="submit"/> button.

The <input type="image"/> Tag - TOP

An alternative to the standard submit button is to use a graphic image to trigger form submission. For example, the following "Go" button functions identically to a standard submit button.

<input type="image" name="SubmitButton" src="GoButton.gif"
  alt="Click to Submit">
    

Figure 10-30. A graphic submit button.

An image button is created with an <input type="image"> tag whose general format is given in Figure 10-31.

<input type="image"   id="id"   name="name"   src="url"   alt="text" >

Figure 10-31. General format for <input type="image"> button.

The tag uses type="image" to identify this as a graphic form submission control. The particular image that is used is given by the URL in the src attribute. Other attributes of an <img> tag can be coded, including alt for an alternative text description of the image. As with standard submit buttons, you may need to assign a name or id to identify the button to server or browser scripts.

The <input type="reset"> Tag - TOP

One other button type is available for forms. A "reset" button can be created to permit users to clear all information from a form, either to permit entry of new information or to clear incorrect information. Its default appearance is shown below.

Figure 10-32. Default appearance of a form reset button.

This button is created by coding an <input type="reset"> tag. You can name or id the button and can replace the default "Reset" label by coding its value attribute. The action of the button is to automatically reset the form, clearing all text input areas and resetting radio buttons, checkboxes, and drop-down lists back to their default appearances.

The following example shows use of a reset button. Enter text into the textbox; then click the reset button. Information in the textbox is cleared.

Enter text:

Figure 10-33. Using a form reset button.

Styling Buttons - TOP

Submit and reset buttons can take advantage of style sheet settings to change their appearance. Example styling is shown by the following two buttons.

 

Figure 10-34. Styled submit and reset buttons.

<style>
  .submit {width:150px; background-color:#4682B4; color:#FFFFFF;
  font-family:times new roman; font-size:14pt}
  .reset  {width:150px; background-color:#4682B4; color:#FFFFFF;
  font-family:times new roman; font-size:14pt}
</style>

<input type="submit" name="SubmitButton" value="Submit Form" class="submit">
<input type="reset" name="ResetButton" value="Reset Form" class="reset">
    

Listing 10-18. Code to style form submit and reset buttons.

TOP | NEXT: Other Buttons

Other Buttons

The two primary types of buttons appearing on forms are submit and reset buttons. These two buttons are associated with form submission to programs that process form information. Other general-purpose buttons can be defined. These are normally associated with browser scripts for local processing, of forms and otherwise, by JavaScript routines embedded on the Web page.

The <input type="button"> Tag - TOP

An <input type="button"> tag is used to create general-purpose buttons to call browser scripts located on the same Web page. Its general format is shown below.

<input type="button"
  id="id"
  name="name"
  value="text"
>

Figure 10-35. General format for <input type="button"> tag.

An id or name may be necessary if the button is referenced in a script; otherwise these attributes need not be coded. A value attribute is required to supply a label for the button; otherwise, an unlabeled button appears.

This type of button usually has the purpose of responding to a mouse click and activating an embedded script or calling a JavaScript function to perform some processing.

The <button> Tag - TOP

The <button> tag provides versatility in producing buttons. It can be set up as a submit button, a reset button, or a general purpose button. As a container tag, it can enclose any text or HTML code to provide text and/or graphic displays on the face of the button. The general format for this tag is shown below

    <button
      type="submit|reset|button"
      id="id"
      name="name"
    >
      ...text and HTML tags
    </button>

Figure 10-37. General format for <button> tag.

When defined as type="submit" or type="reset", the button works like any other submit or reset button. When defined as type="button", it requires a browser script to take action on a button click.

The label for the button appears between the opening and closing tags. This can be a simple text label, or HTML tags can be coded to decorate the text or to include a graphic image on the button.

The following general-purpose button illustrates a layout using HTML tags to supply a graphic image and text for the face of the button.

Rabbit

<style>
  button     {float:left; height:100px; width:180px; border:outset 3px;
              margin-right:10px}
  span#Title {font-family:impact; font-size:14pt; color:#DAA520}
  span#Text  {font-family:verdana; font-size:10pt}
  img        {width:50px; height:39px}
  iframe     {width:225px; height:185px; border:outset 10; margin-right:65px}
</style>

<button type="button"
  onclick="
    if (document.getElementById('Text').innerHTML == 'View Picture') {
      document.getElementById('Picture').src='W-Colossus.gif'
      document.getElementById('Text').innerHTML='Hide Picture' }
    else if (document.getElementById('Text').innerHTML== 'Hide Picture') {
      document.getElementById('Picture').src=''
      document.getElementById('Text').innerHTML='View Picture' }" 
>
  <span id="Title">Rabbit</span><br/>
  <img src="bunny.gif" alt="Image of a rabbit."/><br/>
  <span id="Text">View Picture</span>
</button>

<iframe id="Picture" scrolling="no"></iframe>

Listing 10-20. Code to style and script a <button> tag.

Notice how the text and image appearing on the button are coded inside the opening and closing <button> tags in much the same way as they would be coded on a page. (Note: An <iframe> tag normally is coded with a name attribute that identifies it as the target for links. Since the frame is scripted, however, an id is assigned for script reference.)

TOP | NEXT: Grouping & Labels

Group Boxes, Tab Order, and Labels

You can visually group together a set of controls on your form by placing a group box around them. A group box displays a labeled border around the set of controls.

Choose one:

First Button
Second Button
Third Button

Figure 10-39. Using a group box around a form control.

The <fieldset> and <legend> Tags - TOP

A box is placed around a form control with the <fieldset> tag. The box is labeled with text coded in an enclosed <legend> tag. A fieldset is an in-line HTML element; therefore, it must be enclosed inside a block-level tag. The general formats for the two tags are shown below.

    <fieldset>
      <legend>text</legend>
      ...form control
    </fieldset>

Figure 10-40. General formats for <fieldset> and <legend> tags.

A example group of fieldsets is shown in Figure 10-41.

Radio Buttons:

First Button
Second Button
Third Button

Checkboxes:

First Checkbox
Second Checkbox
Third Checkbox
Fourth Checkbox
Fifth Checkbox

Selection List:

Figure 10-41. Example fieldsets.

Code for these fieldsets is shown below. Since a fieldset expands to fill the width of its container, it is usually necessary to assign it a fixed width to control its placement and appearance. Note that the example fieldsets are assigned a width of 180 pixels to keep them from each stretching across the width of their enclosing division, permitting them to display side by side; also, they are vertically aligned at the top of their container division. A style sheet is applied to both the <fieldset> and <legend> tags to effect their styling.

    <style>
      fieldset {width:180px; vertical-align:top}
      legend   {font-family:verdana; font-size:9pt; font-weight:bold; color:royalblue}
    </style>

    <div> <-- Block level container for fieldsets -->
        <fieldset>
            <legend>Radio Buttons:</legend>
            <input name="Radio" type="radio" />First Button<br />
            <input name="Radio" type="radio" />Second Button<br />
            <input name="Radio" type="radio" />Third Button<br />
        </fieldset>

        <fieldset>
            <legend>Checkboxes:</legend>
            <input name="Box1" type="checkbox"/> First Checkbox<br />
            <input name="Box2" type="checkbox"/>Second Checkbox<br />
            <input name="Box3" type="checkbox"/> Third Checkbox<br />
            <input name="Box4" type="checkbox"/>Fourth Checkbox<br />
            <input name="Box5" type="checkbox"/> Fifth Checkbox<br />
        </fieldset>

        <fieldset>
            <legend>Selection List:</legend>
            <select size="5">
                <option>First Option</option>
                <option>Second Option</option>
                <option>Third Option</option>
                <option>Fourth Option</option>
                <option>Fifth Option</option>
                <option>Sixth Option</option>
                <option>Seventh Option</option>
            </select>
        </fieldset>
    </div>

Listing 10-21. Code to group and label form controls.

The <label> Tag - TOP

Some form controls automatically have labels associated with them (buttons) while most do not (text boxes, checkboxes, radio buttons, text areas, and menus). The <label> tag is used to define a label for HTML form controls that do not have implicit labels. If you click the text within the label element, it toggles the control.

The "for" attribute associates a label with another control explicitly: the value of the for attribute must be the same as the value of the "id" attribute of the associated control element.

The code below demonstrates the use of the <label> tag:

    <form action="ThisPage.htm">
    <p>Please enter the following information:</p>

    <table>
    <tr>
      <td>Name: </td>
      <td><label for="TheName">Enter Name</label><input id="TheName" type="text"></td>
    </tr>
    <tr>
      <td>Password: </td>
      <td><label for="TheName">Enter Password</label><input id="ThePassword" type="password"></td>
    </tr>
    </table>

    </form>

Listing 10-23. Code to demonstrate use of the <label> tag.

The text between the opening and closing <label> tag becomes the label for the control. If the <label> tag is coded to the left of the control, the label appears on the left. On the other hand, if the <label> tag is coded to the right of the control, the label appears on the right.

The label tag is important for form page accessibility. It is helpful to visually challenged individuals who are using assistive technology software. The software is able to match up the label with the form control. all form controls are required to have an associated label.

Form Control Layout using CSS - TOP

In previous sections of this tutorial, tables were used to control the layout of form control elements. An alternative is to use CSS to format and display form controls. The advantage to using CSS is that it requires less code - elimnation of table tags and the line break tag. The code below demonstrates how to layout form controls using CSS.

<style>
  
    form#myForm {width:400px}
    label {width: 120px; float:left; text-align:right;
            margin-top: 10px; padding-right:10px}  
    input {margin-top: 10px;}  
    div#mySubmit {margin-top:10px;padding-bottom:10px}
  
</style>
 
----------------------------------------------- 
  
<div>

<form>

    <div>
        <label for="FName">First Name:</label>
        <input type="text" id="FName"/>
    </div>

    <div>
        <label for="LName">Last Name:</label>
        <input type="text" id="LName"/>
    </div>

    <div id="mySubmit">
    <input type="submit" value="Submit Form"/>
    </div>

</form>

</div>

Using the CSS method, <div> elements are used to organize form elements. Each <label> and <input> control pair are coded within there own division container. The entire form area is given a width of 400px using the "myForm" id selector. Label element selectors are key to aligning the text - this selector is configured to float on the left with the text aligned to the right. The float causes the input controls to wrap around the right side of the labels. The input controls are also configured with a top margin. The submit button is styled using the "mySubmit" id selector. Left margin and bottom padding are applied to the submit button.

TOP | NEXT: Submitting Forms

Form Submission

It is important to remember that the purpose of forms is to collect information from users. Of course, this information has some further purpose, usually involving processing the submitted information in some fashion. Although browser-based scripts written in JavaScript can perform certain preliminary manipulation of the data, the bulk of processing activity takes place on the server, using a server-based programming language.

The manner in which server-based processing takes place is important to understand when designing forms. Although you will not be learning form processing here, you need a general understanding of how the server identifies form information submitted to it.

When a submit button or submit image is clicked, information from the form is packaged for delivery to the page identified in the action attribute of the <form> tag. When forms are submitted to a Web server, this information is transmitted by the method indicated, which can be either get or post. Usually, form information is submitted to the server using the post method, meaning that it arrives at the server in a separate data stream from the URL request. When the information arrives, it is made available to the URL page and its processing script.

Name/Value Pairs - TOP

Form information is identified and processed at the server through names and values. Each field on a form is assigned a name when the form is created. This unique identifier is used to reference that particular form control and the value associated with it. When information is typed into a textbox, for example, that text becomes the value of the control and can be referenced through the name assigned to the textbox. Likewise, when the user clicks on a checkbox or selects from a drop-down list, the data value associated with the checkbox or selection choice is referenced through the name assigned to that particular control.

Thus, form information ends up as field names and associated data values submitted by the user. Information arrives at the processing page as a string of name/value pairs in the format:

    fieldname1=value1&fieldname2=value2&fieldname3=value3....

Control names and their associated values are paired with an equal sign (=) and are connected with other pairs of names and values by ampersands (&). One of the first tasks of a processing script is to parse this string of characters into separate names and values in order to extract the information entered into the form. Thereafter, the script manipulates the information according to whatever processing steps are necessary.

A Form Example - TOP

The following form does not include all the possible field types, but it does illustrate the approach to creating a simple form.

Figure 10-43. A data entry form.

The form elements have been coded inside a table structure to help align the labels and fields. You should recognize all of the form controls in the following code listing.

    <form name="MyForm" action="MembershipForm.htm" method="post">

    <h2>Membership Application Form</h2>

    <table>
    <tr>
      <td>First Name: </td>
      <td><input type="text" name="FirstName" size="15" maxlength="15"/></td>
    </tr>
    <tr>
      <td>Last Name: </td>
      <td><input type="text" name="LastName" size="15" maxlength="15"/></td>
    </tr>
    <tr>
      <td>Email: </td>
      <td><input type="text" name="Email" size="30" maxlength="50"/></td>
    </tr>
    <tr>
      <td>Gender: </td>
      <td><input type="radio" name="Gender" value="F"/>Female
          <input type="radio" name="Gender" value="M"/>Male</td>
    </tr>
    <tr>
      <td>Major: </td>
      <td><select name="Major">
            <option>Web Development</option>
            <option>Digital Media</option>
            <option>Database Administration</option>
            <option>Networking</option>
            <option>Software Development</option>
            <option>Systems Analysis</option>
          </select></td>
    </tr>
    <tr>
      <td>Reason for<br/>Joining: </td>
      <td><textarea name="Reason" cols="30" rows="5"></textarea></td>
    </tr>
    <tr>
      <td></td>
      <td><input type="submit" name="SubmitButton" value="Submit Form"/></td>
    </tr>
    </table>

    </form>

Listing 11-24. Code for a data entry form.

The action attribute of the <form> tag is the MembershipForm.htm page. That is, information submitted from the form is made available to this page when it is transmitted to the server. The method is post, meaning that form name/value pairs are sent as a separate data stream to the URL specified in the actionattribute. The entire set of name/value pairs for the filled-out form would resemble the following:

    FirstName=Alice&Lastname=Underwood&Email=a_underwood@hotmail.com&
    Gender=F&Major=Web+Development&Reason=To+meet+new+friends+and+make
    +Web+pages&SubmitButton=Submit+Form

Note that blank spaces in the string are replaced by the plus sign (+).

If the get method is used, the entire set of name/value pairs for the filled-out form would be appended as a query string and passed to the URL specified in the actionattribute as shown below:

    MembershipForm.html?FirstName=Alice&Lastname=Underwood&Email=a_underwood@hotmail.com&
    Gender=F&Major=Web+Development&Reason=To+meet+new+friends+and+make
    +Web+pages&SubmitButton=Submit+Form

When this input string is received at the server, it is broken down into its component parts so that individual names and values are associated:

    FirstName=Alice
    LastName=Underwood
    Email=a_underwood@hotmail.com
    Gender=F
    Major=Web Development
    Reason=To meet new friends and make Web pages

The manner in which this information is processed by the receiving page depends on the script contained on that page.

Form Submission - TOP

Form submission data is typically processed by a client-side script, server-side script, or a combination of both. Client-side scripts are most commonly written in JavaScript. Since JavaScript is built into the browser, processing takes place at the browser or client-side without having the data passed to a web server for processing. Client-side scripts are faster and generally used to validate form input data.

Server-side scripting is a technology by which a script is run on a web server to dynamically generate and process web pages and form input. Common server-side scripting technologies include PHP, Ruby on Rails, Microsoft's ASP.NET, Adobe Coldfusion, and Java. Since server-side scripts are run on the web-server, these scripts have the ability to interactive with databases and file handling.

In most web applications, form data is first processed by a client-side script for the purpose of data validation and page customization. Next, the data is passed on to a server-side script where another level of data validation occurs followed by the data being written to a database.

TOP | NEXT: Forms & CSS

TOP | NEXT: Chapter 11 - Designing Web Sites