All form field elements share the name attribute. The name attribute identifies the information you receive from a user and associates it with a value you specify and corresponds with the defined variables in the script. The id attribute binds the data to other elements, such as related labels. When the user submits the information, the server receives it as raw data that is delimited in a special way. The script can then parse and format the raw data into a human readable format. Notice in this example, the recipient field is hidden to the user and used only by the script, which uses the value (email address) to parse the data and send it to the recipient. Also note the two input types "submit" and "reset." These are built-in buttons that allow the user to submit the data or reset the form.

Create a new HTML document and type the following code.

<form name="form" action="http://courses.wccnet.org/~kmarrs/cgi-bin/FormMail.cgi" method="post">

<table> <tr><td colspan="2">

<h5>Submit the assignment: </h5>
<input type="hidden" name="recipient" id="recipient" value="kmarrs@beyondmarrs.com"></td></tr>
<tr>

<td><label for="subject">Assignment:</label></td>
<td><select name="subject" id="subject" size="1">


<option>Assignment 1</option>
<option>Assignment 2</option>
<option>Assignment 3</option>

</select></td></tr>

<tr><td><label for="realname">Name:</label></td>
<td> <input type="text" name="realname" id="realname" size="25"></td></tr>

<tr><td> <input type="submit"></td>
<td> <input type="reset"></td></tr></table>

</form>

Save the file as form.html.

Submit the Assignment
Assignment:	Assignment 1 Assignment 2 Assignment 3
Name:

Text Box

The <input> tag is used to create a text box on the page, with the type attribute set to "text". The code for this would be: <input type="text">. Note that the <input> tag is not closed.

Additional attributes to include are:

• name - This is the variable name assigned to the data; the script needs this information
• id - This value binds the field to other elements for use in the script
• value - If you want some information to appear in the text box when the page loads, set that as the value for this attribute
• size - The width of the box, in characters
• maxlength - The maximum number of characters accepted by the box

<label for="fname">First Name: </label><input type="text" name="fname" id="fname" size="15" maxlength="20" value="Enter Name">

• The above example would create a text box 15 characters wide, that accepts up to 20 characters
• The code would render as:

First Name:

When dealing with text fields, be aware of cross-browser differences in their size. Netscape 4.x makes these fields very wide, so test in that browser to make sure the size is acceptable and does not break your page layout.

Text Area Box

The <textarea> tag is used to create a textarea box on the page. Unlike the <input> tag, this tag needs to be closed.

Attributes for the <textarea> tag are:

• name - This is the variable name assigned to the data; the script needs this information
• rows - The height of the box in rows
• cols - The width of the box in characters
• wrap - Like noshade and nowrap, the wrap attribute has no value assigned to it - if included, lines are automatically wrapped within the margins

<label for="comments">Comments: </label><textarea name="comments" id="comments" rows="8" cols="30" wrap></textarea>

• The above example would create a textarea box 30 characters wide and 8 rows tall
• The code would render as:

Comments:

Radio Buttons

The <input> tag is also used for radio buttons and check boxes. For radio buttons, the type attribute is set to "radio". Since you use the <input> tag, it does not need to be closed. Radio buttons should only be used for data in which one item is selected.

Attributes for the <input> tag are:

• name - This is the variable name assigned to the data; the script needs this information. Be sure to use the same name for all the radio buttons in the same group
• value - The data that will be sent to the server if that radio button is selected
• checked - Like wrap, this attribute has no value assigned to it - if included, the radio button is selected by default. Apply this attribute to only one of the radio buttons

Color: Blue: <input type="radio" name="color" value="blue">
Red: <input type="radio" name="color" value="red" checked>
Yellow: <input type="radio" name="color" value="yellow">

• The above example would create three radio buttons, with the middle radio box 'checked' (selected by default)
• The code would render as:

Color: Blue: Red: Yellow:

Check Boxes

To create check boxes, the type attribute is set to "checkbox". Use checkboxes for data in which multiple items can be selected.

Attributes for the <input> tag are:

• name - This is the variable name assigned to the data; the script needs this information. Be sure to use the same name for all the checkboxes in the same group
• value - The data that will be sent to the server if that checkbox is selected
• checked - Like wrap, this attribute has no value assigned to it - if included, the checkbox is selected by default. This attribute can be assigned to as many checkboxes as you want

Sizes: Small: <input type="checkbox" name="size" value="small">
Medium: <input type="checkbox" name="size" value="medium" checked>
Large: <input type="checkbox" name="size" value="large" checked>

• The above example would create three checkboxes, with the second and third checkboxes 'checked' (selected by default)
• The code would render as:

Sizes: Small: Medium: Large:

Menus

The <select> </select> tags are used with <option></option> tags to create the menu list items. Menus are good to use if you are dealing with more than a few items because they can help conserve screen space.

Attributes the <select> tag are:

• name - This is the variable name assigned to the data; the script needs this information
• size - The value assigned to this attribute is the height of the menu in lines
• multiple - Like checked, this attribute has no value assigned to it - if included, multiple selections are possible in the menu

• Within the <select> tags are <option> </option> tags, one for each item in the menu

Attributes the the <option> tags are:

• value - The data that will be sent to the server if the menu item is selected
• selected - Like checked, this attribute has no value assigned to it - if included, that item is selected by default. Only one item can be selected

Color:
<select name="color" size="3" multiple>
<option value="blue">Blue</option>
<option value="red" selected>Red</option>
<option value="yellow">Yellow</option>
</select>

• The above example would create a menu with three choices visible. The middle choice would be selected by default. Multiple selections would be possible.

• The code would render as:

Color:
Blue Red Yellow

Changing the code to remove the size and multiple attributes renders as:

Color:
Blue Red Yellow

Create an Order Form

Click here to view a sample form.

1. Create a new html file and save it as form2.html.
2. Recreate the form shown in the link above. You will need to use tables (the table is 600 pixels wide).
3. Be sure to assign name attributes to all the fields and buttons/boxes.
4. When you are finished, view the file in the browser.