25
2011
Lesson 13 – Forms
An article by 
HTML forms are used to gather information from the user and then pass that information to the server. A server page or program will then gather the information passed to it and processes the information.
A form contains one or more of the following: text boxes, text areas, password fields, check boxes, list boxes, drop down lists, radio buttons, submit buttons and hidden fields. The form can also contain fieldsets, legends and labels for each form item.
The <form> tag is used to define a form. There is one required attribute that must be added to the form.
<form> </form>
The action attribute is required because it tells the form what page or program will process the information it gathers. Otherwise, the form would be pretty useless.
<form action="processingpage.php"> </form>
There are mainly two ways forms can send their data. One of the ways is in the URL. Another way, and a more secure way, is the form can send the form data within the page header.
The optional method attribute defines which way the form sends its data. A value of get tells the form to send the information within the URL. A value a post tells the from to send the data within the page header. If you don’t provide the method, it is automatically set to get.
<form action="processingpage.php" method="post"> </form>
The <input> tag is the user input tag within the form you will use the post. Each <input> tag has two required fields. The type attribute specifies which kind of input you want to use.
The input tag does not have a closing tag and must be closed with />.
| <input type=”text” /> | is the standard textbox. A value attribute can also be assigned to give the textbox an initial value. |
| <input type=”password” /> | a textbox which all the characters are hidden by a special character, typically a *. |
| <input type=”checkbox” /> | a standard checkbox that can be checked or unchecked. |
| <input type=”radio” /> | a radio button that can be checked or unchecked. Each radio button in a group must have the same name attribute. Also each radio button must provide a value attribute. |
| <input type=”file” /> | enables users to select a file for uploading or processing. |
| <input type=”button” /> | a regular button that must have a script attached to it to have any useful functionality. |
| <input type=”reset” /> | this input field will reset every field inside the form back to it’s starting value. |
| <input type=”hidden” /> | a hidden field that is used to provide additional information to the server. |
| <input type=”submit” /> | submit the form to the server side processing page or program specified in the action attribute. |
The name attribute is used as the key when the server processes the form and retrieves the information.
<form id="form1" name="form1" method="post" action="processingpage.php">
Name: <input type="text" name="name" /><br />
Email Address: <input type="text" name="email" />
<input type="submit" name="Submit" value="Submit" />
</form>
The <textarea> tag is used to provide a multiline textbox. The rows and cols attributes are required to tell the textbox how many rows and columns to display.
<form id="form1" name="form1" method="post" action="processingpage.php">
Name: <input type="text" name="name" /><br />
Email Address: <input type="text" name="email" />
<p>
Comments:<br />
<textarea name="comments" cols="50" rows="5"></textarea>
</p>
<input type="submit" name="Submit" value="Submit" />
</form>
The <select> tag defines a drop down list. Each item in the list is contained within a <option> tag.
<form id="form1" name="form1" method="post" action="processingpage.php">
<p>Name:
<input type="text" name="name" />
<br />
Email Address:
<input type="text" name="email" />
</p>
<p>
Comments:<br />
<textarea name="comments" cols="50" rows="5"></textarea>
</p>
<p>Gender:
<select name="gender" id="gender">
<option value="-" selected="selected">-Choose Your Gender -</option>
<option value="male">Male</option>
<option value="female">Female</option>
<option>-Choose Your Gender -</option>
</select>
</p>
<input type="submit" name="Submit" value="Submit" />
</form>
A complete sample form page:
<html>
<head>
<title>Creating Forms</title>
</head>
<body>
<form id="form1" name="form1" method="post" action="processingpage.php">
<p>Name:
<input type="text" name="name" />
<br />
Email Address:
<input type="text" name="email" />
</p>
<p>
Comments:<br />
<textarea name="comments" cols="50" rows="5"></textarea>
</p>
<p>Gender:
<select name="gender" id="gender">
<option value="-" selected="selected">-Choose Your Gender -</option>
<option value="male">Male</option>
<option value="female">Female</option>
<option>-Choose Your Gender -</option>
</select>
</p>
<input type="submit" name="Submit" value="Submit" />
</form>
</body>
</html>
