Working with Forms

Working with Web Forms

Forms on the web are a way for web authors to collect data from their viewers. There are many different form elements available with which to gather this information, such as:

Type HTML Example
Text box <input type="text" ... /> First Name:
Password box <input type="password" ... /> Password:
Checkbox <input type="checkbox" ... /> Select movies you like:
Radio button <input type="radio" ... /> Do you like corn? Yes No
Selection box <select ...><option ...></option></select>
File select <input type="file" ... />
Text area <textarea ...></textarea>
Hidden <input type="hidden" ... />
Submit <input type="submit" ... />
Reset <input type="reset" ... />
Button <input type="button" ... />

The Form Tag

Form elements are defined within the Form Tag (<form></form>). Below is an example of a simple form:
HTML <form action="" method="post" enctype="multipart/form-data">
<td width="100">First Name: </td>
<td><input type="text" name="first_name" id="first_name" size="20" /></td>
<td>Last Name: </td>
<td><input type="text" name="last_name" id="last_name" size="20" /></td>
<td><input type="submit" name="submit" value="Submit" />&nbsp;&nbsp;&nbsp;<input type="reset" name="reset" value="Reset" /></td>
First Name:
Last Name:

The Form Tag needs at least three properties to function: the 'action' property tells the form where to send the data once the form is submitted, the 'method' tells it how to send it, and the 'enctype' determines the format that the data will be sent in.

Data Inputs

Form elements in which a user inputs data are the Text Area and Text, Password, Hidden and File types of Input tags (although Hidden fields are usually not manipulated directly by the user, but most often through scripts). All of these tags should have a unique value defined within the 'name' property, because it is through this value that the data associated with the particular input will be accessed by the processing script. It is useful, though not required, for the tags to have an accompanying 'id' property, through which value the element can be accessed through Javascript to alter the values and or appearance.

With regards to the types of Input tags, the 'value' property can be used to assign a default value that can be changed by the user (except with the Hidden Input type). Note that because of security purposes, the default value cannot be set on File Inputs, and due to the nature of HTML (in that you can see the source of the original requested document), it is generally not a good idea to use a default value for a Password Input.

Text Area tags can have their size modified by the 'cols' and 'rows' attributes within the starting tag. For this element, any default text you wish to be displayed goes between the start and end tags (e.g. <textarea>Please enter some text here.</textarea>).

Selectable Inputs

Checkboxes can have the same name, and when they do, any boxes that are checked will add their values to an array that will be associated with the common name shared among them. For example, if you have this section of a form:
Pick your toppings: Pepperoni
HTML <table>
<td width="100">Pick your toppings: </td>
<td><input type="checkbox" name="toppings" value="pepperoni" /> Pepperoni<br />
<input type="checkbox" name="toppings" value="cheese" /> Cheese<br />
<input type="checkbox" name="toppings" value="sausage" /> Sausage<br />
<input type="checkbox" name="toppings" value="onions" /> Onions<br />
<input type="checkbox" name="toppings" value="mushrooms" /> Mushrooms<br /></td>

Any options you select will be added to the 'toppings' value (if more than two are selected, 'toppings' becomes an array).

The same thing can be done with radio buttons:
Choose your eye color: Blue

By assigning all the radio inputs the same name, the form will only allow one option to be selected among them.

The 'id' property is useful if you wish to alter either the value, or the style of any of the form inputs through Javascript, but it is not required.

The 'value' property has a few slightly different applications depending on the element it is used in: with Select boxes, Radio buttons, Checkboxes and Hidden fields it will be the value passed to the processing script, with Text inputs it will be a default value that can be changed, and with Submit, Reset or regular Buttons, it will be any words that you wish to be on the button itself. (Note: For security purposes, you cannot define a default value for File inputs.)

For Checkboxes and Radio buttons, if you wish to have an element selected by default, you can add the 'checked' property to the tag and set the value to either "true" or "checked" (you can add this to multiple Checkbox elements of the same name, but only one Radio button element if it has the same name as other Radio buttons).

For Select boxes, if you wish to have a particular option selected by default, you can add the 'selected' property to the Option element and set the value to either "true" or "selected", otherwise the top-most Option element will be displayed by default.

Content by Vincent Santa Maria.