Forms are a powerful way of gaining information from the user. Common form elements include:
Forms are a useful way of allowing a Web user to enter information into a Web browser for submission to a Web server. Just as in paper forms in the "real world", when properly formatted, Web forms are likewise easy to navigate and fill out. Without proper structure or instructions, forms are confusing and are often left incomplete.
In this module, we will examine techniques that you can use to improve the formatting and accessibility of your Web-based forms.
The basic structure of an HTML form is as follows:
<form action="DESTINATION PROCESSING PAGE" method="post">
ALL OF THE CONTROLS/ELEMENTS OF THE FORM APPEAR HERE
<input type="submit" value="Submit">
<input type="reset" value="Reset Form">
</form>
While not all forms are "post" method forms (some are "get"), and not all contain "submit" and "reset" buttons, the above sample HTML represents the basic structure of most forms. There are various types of HTML form controls that can be placed in a form. These include:
As all of these form controls can be inaccessible if not properly formatted, properly formatting your HTML form elements is vital.
In the following sample form, the user is asked to supply information about their graduation application. When displayed in a Web browser, the HTML at the bottom of the screen would appear similar to this:
The form above was rendered from the following HTML code. Notice how each of the above-mentioned controls appears within the form, included within the "form" tag.
<form action="process_application.htm" method="post">
<p>Full name: <input type="text" name="full_name"
size="40"></p>
<p>Mailing address: <input type="text" name="address"
size="60"></p>
<p>What is your gender? <input type="radio" name="gender"
value="Male">Male</input>
<input type="radio" name="gender" value="Female">Female</input></p>
<p>Please select all that apply: <br>
<input type="checkbox" name="considerations"> I
anticipate having a GPA of at least 3.6; please review my application for
high honors</input><br>
<input type="checkbox" name="considerations"> I
will attend the graduation ceremony</input><br>
<input type="checkbox" name="considerations"> I
will need special assistance during the graduation ceremony</input><br>
<input type="checkbox" name="considerations"> I
need copies of my transcript available at graduation</input> </p>
<p>What is your major and specialization?
<select name="major_specialization" size="5">
<option value="Accounting">Accounting</option>
<option value="Applied Biology">Applied Biology</option>
<option value="Computer Science">Computer Science</option>
<option value="Economics">Economics</option>
<option value="Education">Education</option>
<option value="English">English</option>
<option value="Finance">Finance</option>
<option value="Management">Management</option>
<option value="Mathematics">Mathematics</option>
<option value="Music">Music</option>
<option value="Philosophy">Philosophy</option>
<option value="Physics">Physics</option> </select>
</p>
<p>Please provide any additional special instructions:<br>
<textarea name="special_instructions" rows="10" cols="80"></textarea></p>
<input type="submit" value="Submit Your Application">
<input type="reset" value="Reset This Form">
</form>
The next page presents information on forms in HTML.
College of Architecture (COA)
Fax: 404-894-9320
Phone: 404-894-4960 (v/tty)
User Agreement
HTML
Forms
Previous Page
