Forms are an essential part of how the Web is made interactive and useful. Forms are interactive because a form demands that you, the user, interact with it to perform some task. That task might be any number of important ones:
*
Entering information into your online banking system so you can manage funds online
*
Submitting your name and information to become a member of an online dating service
*
Making a purchase for an airline ticket and travel services
*
Purchasing other goods and services online
Without forms, we'd have had none of these features availableand, in fact, the Web itself would never have moved along to become as efficient as it is in terms of providing interactive services. Today other technologies are being used with regularity to accomplish the same things HTML forms do.
All forms begin with the form element:
<form>
</form>
The form element has two required attributes you'll need to add to it for the form to function at all:
*
method This attribute defines which way the form is going to communicate with your web server. The value options are get and post.
*
action The action attribute provides the correct path to where the form script is processed
example::
Adding method and action attributes and values to a form element
<form method="get" action="
http://www.myserver.com/cgi-bin/mailscript/">;
</form>
Input textboxes are used for a number of form needs, including any time you want someone to type out his name, address, and so forth. To create a textbox, you use the input element along with the type attribute and a value of text
example::
<form method="get" action="
http://www.myserver.com/cgi-bin/mailscript/">;
First Name: <input type="text" /><br />
Last Name: <input type="text" /><br />
Phone: <input type="text" />
</form>
example::
Identifying text input with name and id
<form method="get" action="
http://www.myserver.com/cgi-bin/mailscript/">;
First Name: <input type="text" name="firstname" id="firstname" /><br />
Last Name: <input type="text" name="lastname" id="lastname" /><br />
Phone: <input type="text" name="phone" id="phone" />
</form>
The next step is to set the size of the textbox. Using the size attribute, you can provide a width for each field. You can also set the number of characters that the text input will accept, and this is accomplished using the maxlength attribute
Modifying text input with size and maxlength
<form method="get" action="
http://www.myserver.com/cgi-bin/mailscript/">;
First Name: <input type="text" name="firstname" id="firstname" size="25"
maxlength="40" /><br />
Last Name: <input type="text" name="lastname" id="lastname" size="25"
maxlength="40"/><br />
Phone: <input type="text" name="phone" id="phone" size="15" maxlength="0" />
</form>
Check boxes are an excellent way to get information from a site visitor from a preset selection of choices. The advantage of check boxes is that visitors can select from more than one option, and that's the best time to use themwhen the possibility of multiple answers exists. To create check boxes, you use the input element along with the type attribute and a value of checkbox
Adding check boxes to the form
<p>Please choose your favorite way(s) to relax:</p>
<input type="checkbox" name="reading" id="reading" />Reading<br />
<input type="checkbox" name="sports" id="sports" />Sports<br />
<input type="checkbox" name="games" id="games" />Computer Games<br />
<input type="checkbox" name="tv" id="tv" />Television<br />
<input type="checkbox" name="movies" id="movies" />Go to the Movies<br />
<input type="checkbox" name="beer" id="beer" />Enjoy a cold beer<br />
<input type="checkbox" name="dogs" id="dogs" />Play with the dogs<br />
<input type="checkbox" name="music" id="music" />Listen to music<br />
<input type="checkbox" name="friends" id="friends" />Meet with friends and
hang out
Adding radio buttons to the form
<form method="get" action="
http://www.myserver.com/cgi-bin/mailscript/">;
<h2>Gender:</h2>
<input type="radio" value="female" name="gender" id="female" />Female<br />
<input type="radio" value="male" name="gender" id="male" />Male<br />
<input type="radio" value="undisclosed" name="gender" id="undisclosed" />
Prefer not to say
</form>
Check boxes and radio buttons can be used in any combination you require to best address the needs of your form. The main issue is to remember that check boxes can be used for multiple submissions, whereas radio buttons are limited to one choice only.
In some instances you'll use radio buttons or check boxes and want to have items preselected. If your form is geared primarily toward female athletes for example, you can display your check boxes or radio buttons with preselected choices by using the checked attribute. This places a check or a dot in the preselected choice
Adding radio buttons to the form
<form method="get" action="
http://www.myserver.com/cgi-bin/mailscript/">;
<p>Please choose your favorite way(s) to relax:</p>
<input type="checkbox" name="reading" id="reading" />Reading<br />
<input type="checkbox" name="sports" id="sports" checked="checked" />Sports<br />
<input type="checkbox" name="games" id="games" />Computer Games
<p>What is your gender?</p>
<input type="radio" value="female" name="gender" id="female" checked="checked" />Female<br />
<input type="radio" value="male" name="gender" id="male" />Male<br />
<input type="radio" value="undisclosed" name="gender" id="undisclosed" />
Prefer not to say
</form>
Two types of form menus exist: drop-down and list. Both are extremely useful and can be modified in numerous ways to suite a range of needs.
One of the most popular means of providing options in forms is the all-familiar drop-down menu. Menus of this sort are especially helpful when you have numerous options, and they are typically seen in standard menus for states, countries, pricing and so on.
Drop-down menus are created by combining your selections with the select and option elements
A drop-down form menu
<form method="get" action="
http://www.myserver.com/cgi-bin/mailscript/">;
<p>State (U.S. Western Region):</p>
<select>
<option value="Arizona">Arizona</option>
<option value="California">California</option>
<option value="Colorado">Colorado</option>
<option value="Nevada">Nevada</option>
<option value="Texas">Texas</option>
<option value="Utah">Utah</option>
</select>
</form>
You can add other features to your drop-down menu, including preselected choices. As with the checked attribute for check boxes, preselection can assist with your form's usability by providing a more custom approach. To preselect a specific option within a form menu, simply use the selected attribute:
<option value="Nevada" selected="selected">Nevada</option>
Simply add the multiple attribute to the opening select tag:
<select size="6" multiple="multiple">
In some instances, you want to provide an area for feedback or input that is more flexible than just a text input control, which supports only one line of text. Text areas are the perfect solution.
Text areas are created using the textarea element along with the rows and cols attributes to determine a visible field. Unlike tables, the rows and columns in the instance of text areas define how the text area is managed. Rows determine how many rows of text the resulting box will allow, and columns define how wide the box is
Creating a text area
<form method="get" action="
http://www.myserver.com/cgi-bin/mailscript/">;
<p>Please let us know if you have any special requests:</p>
<textarea rows="10" cols="25">
</textarea>
</form>
You can customize text areas a little more within the HTML, too. First, you might want to add the name attribute, which provides information that can be used by your form submission script to clarify its function.
A text area with name and id attributes
<form method="get" action="
http://www.myserver.com/cgi-bin/mailscript/">;
<p>Please let us know if you have any special requests:</p>
<textarea rows="10" cols="25" name="requests" id="requestbox">
</textarea>
</form>
if you want to customize the text area a little more, you can type text into the text area markup:
<textarea rows="10" cols="25" name="requests" id="requestbox">
Type your comments here.
</textarea>
The controls for reset and submit functions are built right into HTML, so you don't have to do much to get these working and even customized to a certain degree without ever touching images or style.
The reset button clears the form when it is clicked. The submit button submits the data in the form, which uses the information in the method and action attributes in the form element itself to send the data to the server for processing.
Creating reset and submit buttons
<form method="get" action="
http://www.myserver.com/cgi-bin/mailscript/">;
<input type="reset" value="reset" />
<input type="submit" value="submit" />
</form>
If you'd like your submit button to look more integrated with your visual design, you can create an image and use it for the submit process instead. The caveat here is that this technique does not equally apply for the reset button unless you add JavaScript. But in terms of HTML itself, you can use a custom button for submit if you so desire.
Using a graphical submit button
form method="get" action="
http://www.myserver.com/cgi-bin/mailscript/">;
<input type="image" src="submit-button.gif" width="75" height="25" alt="submit!"
value="submit" />
</form>
where submit-button is the image used to display on the btton.
By their very interactive nature, forms are a bit more demanding in the accessibility department than other HTML elements. This is largely because all the items we've been discussing in this tutorial have to do with form controls, which are components built into browsers and invoked by the corresponding HTML.
For a visual person, all this makes sense. But for individuals who are having the form read to them instead of seeing it, context can be quickly lost.
The label element allows information to be attached to a given control. Using this along with the for attribute enables you to describe the form control being used in more deta
Adding context using the label element
<form method="get" action="
http://www.myserver.com/cgi-bin/mailscript/">;
<label for="firstname">First Name:</label><input type="text" name="firstname"
id="firstname" /><br />
<label for="reading"><input type="checkbox" name="reading" id="reading" />Reading<br />
<label for="requestbox">Any special requests?</label> <br> <textarea name="comments"
id="requestbox" cols="25" rows="5">
</textarea>
</form?
Still another means of bringing added clarity to your forms is grouping items within a menu. This is done using the optgroup element. Along with optgroup, you also use the label attribute in both the optgroup opening tag and each individual item within that group
Using optgroup to group options in a form menu
<select name="regions" size="14">
<optgroup label="Western Region">
<option value="Arizona" label="Arizona">Arizona</option>
<option value="California" label="California">California</option>
<option value="Colorado" label="Colorado">Colorado</option>
<option value="Nevada" label="Nevada">Nevada</option>
<option value="Texas" label="Texas">Texas</option>
<option value="Utah" label="Utah">Utah</option>
</optgroup>
<optgroup label="Eastern Region">
<option value="Connecticut" label="Connecticut">Connecticut</option>
<option value="Maine" label="Maine">Maine</option>
<option value="New_Hampshire" label="New Hampshire">New Hampshire</option>
<option value="New_Jersey" label="New Jersey">New Jersey</option>
<option value="New_York" label="New York">New York</option>
<option value="Vermont" label="Vermont">Vermont</option>
</optgroup>
</select>
