Forms are a means of getting data from the viewer using text boxes, drop-down boxes, check boxes and the like. Let's review each form element:
<form action="mailto:@jag.af.mil"
method="post" enctype="text/plain"
name="form1"> . . . </form> |
This is the Form tag itself. All form elements must be between the start and
end Form tags.
|
<input type="hidden" name="CourseID" value="HTML Course
Evaluations"> . . . <input type="text" name="ViewerName" value="default text" size="40" maxlength="100"> . . . <input type="password" name="Password" value="sample" size="40" maxlength="100"> . . . <input type="radio" name="LikedMost" value="Content" checked> Content <input type="radio" name="LikedMost" value="Instructors"> Instructors <input type="radio" name="LikedMost" value="Time Off"> Time Off . . . <input type="checkbox" name="GoodInstructors" value="X" checked> Instructor X . . . <input name="miscButton" value="Click Me"> . . . <input type="submit" value="SEND THESE RESULTS" style="what:ever"> . . . <input type="reset" value=" RESET THIS FORM " style="what:ever"> |
This is the heart of most forms. The Input tags identify the data as inputs from the
viewers and determine how it is displayed. All inputs have names and values. Each
name/value pair is transmitted from each input.
|
<textarea rows="5" cols="40"
name="FrankEval" wrap
style="what:ever"> Bar none, this is the best course I have ever attended! </textarea> |
The Textarea tag is a specialized kind of 'input=text' tag. Instead of one line
of text with a 'maxlength', you can have several rows displayed at once with a
vertical scroll as needed to show extra text the viewer has already input
(try it).
|
<select name="FavTag"> <optgroup label="deprecated"> <option value="B" selected="selected">B</option> <option value="I">I</option> <option value="U">U</option> </optgroup> <optgroup label="Mandatory"> <option value="HTML">HTML</option> <option value="Head">Head</option> <option value="Title">Title</option> <option value="Body">Body</option> </optgroup> </select> |
The Select tag produces what is commonly referred to as a "Drop-down box".
The viewer clicks on the down arrow, which produces a list of choices. Clicking on
one of the choices selects it
(try it).
|
Let's create a form with several fields. Do not be overwhelmed by the amount of HTML shown below, we are only combining all the elements shown above into one large form. It is a lot of information crammed into one example. Glance through the code, then copy it into sample2.htm for future reference:
<form action="mailto:you@youraddress.af.mil" method="post"
enctype="text/plain" name="form1">
<input type="hidden" name="CourseID" value="HTML Course
Evaluations">
<table border="0" cellpadding="5" cellspacing="0" width="100%">
<caption style="font-weight:bold; font-size:larger">Sample
Form Showing Various Input Fields</caption>
<tr>
<td align=right>Your <u>N</u>ame:</td>
<td><input type="text" name="ViewerName"
value="default text" size=40 maxlength=100 accesskey="n"></td>
</tr>
<tr>
<td align=right><u>P</u>assword:</td>
<td><input type="password" name="Password" value="sample"
size=40 maxlength=100 accesskey="p"></td>
</tr>
<tr>
<td align=right>Give us your frank evaluation of this course:</td>
<td><textarea rows="5" cols="40" name="FrankEval" wrap>
Bar none, this is the best course I have ever attended!
</textarea></td>
</tr>
<tr>
<td align=right>What you liked most about this course:</td>
<td><input type="radio" name="LikedMost" value="Content" id="Content"
checked accesskey="c"><label for="Content"> <u>C</u>ontent
</label><br>
<input type="radio" name="LikedMost" value="Instructors"
id="Instructors" accesskey="i">
<label for="Instructors"> <u>I</u>nstructors</label><br>
<input type="radio" name="LikedMost" value="TimeOff" id="TimeOff"
accesskey="t"><label for="TimeOff"> <u>T</u>ime Off</label><br>
</td>
</tr>
<tr>
<td align=right>The following instructor(s) did well:</td>
<td><input type="checkbox" name="GoodInstructors" value="X" id="X"
checked accesskey="x"><label for="X"> Instructor <u>X</u>
</label><br>
<input type="checkbox" name="GoodInstructors" value="Y" id="Y"
checked accesskey="y"><label for="Y"> Instructor <u>Y</u>
</label><br>
<input type="checkbox" name="GoodInstructors" value="Z" id="Z"
checked accesskey="z"><label for="Z"> Instructor <u>Z</u>
</label><br>
</td>
</tr>
<tr>
<td align=right>Recommendations for improving this course:</td>
<td><select name="RecImprov" size=4 multiple>
<option value="Blank" selected> </option><br>
<option value="Nothing">Don't change a thing!
</option><br>
<option value="MoreContent">Add more content</option><br>
<option value="MoreDetail">Cover the content in greater detail
hours</option><br>
</select>
</td>
</tr>
<tr>
<td align=right>Branch of service:</td>
<td><select name="ServBranch">
<option value="USAF" selected>Air Force</option><br>
<option value="USN">Navy</option><br>
<option value="USMC">Marine Corps</option><br>
<option value="Army">Army</option><br>
<option value="Other">Other</option><br>
</select>
</td>
</tr>
<tr>
<td align=right>What is your favorite HTML tag:</td>
<td><select name="FavTag">
<optgroup label="deprecated">
<option value="Font">Font tag</option><br>
<option value="B">B</option><br>
<option value="I">I</option><br>
<option value="U">U</option><br>
<option value="Strike">Strike</option>
</optgroup>
<optgroup label="Mandatory">
<option value="HTML">HTML</option><br>
<option value="Head">Head</option><br>
<option value="Title">Title</option><br>
<option value="Body">Body</option>
</optgroup>
<optgroup label="Objects">
<option value="A" selected>A</option><br>
<option value="Img">Img</option><br>
<option value="Script">Script</option><br>
<option value="Object">Object</option>
</optgroup>
</select>
</td>
</tr>
<tr>
<td align=right>Please submit only once per student:</td>
<td><input type="submit" value="SEND THESE RESULTS"
style="font-family:serif; color:lime;
background-color:green; font-size:larger"></td>
</tr>
<tr>
<td align=right>To reset all your inputs to the default:</td>
<td><input type="reset" value=" RESET THIS FORM "
style="font-family:serif; color:white;
background-color:red; font-size:larger"></td>
</tr>
</table>
</form>
enctype="text/plain" name="form1">
<input type="hidden" name="CourseID" value="HTML Course
Evaluations">
<table border="0" cellpadding="5" cellspacing="0" width="100%">
<caption style="font-weight:bold; font-size:larger">Sample
Form Showing Various Input Fields</caption>
<tr>
<td align=right>Your <u>N</u>ame:</td>
<td><input type="text" name="ViewerName"
value="default text" size=40 maxlength=100 accesskey="n"></td>
</tr>
<tr>
<td align=right><u>P</u>assword:</td>
<td><input type="password" name="Password" value="sample"
size=40 maxlength=100 accesskey="p"></td>
</tr>
<tr>
<td align=right>Give us your frank evaluation of this course:</td>
<td><textarea rows="5" cols="40" name="FrankEval" wrap>
Bar none, this is the best course I have ever attended!
</textarea></td>
</tr>
<tr>
<td align=right>What you liked most about this course:</td>
<td><input type="radio" name="LikedMost" value="Content" id="Content"
checked accesskey="c"><label for="Content"> <u>C</u>ontent
</label><br>
<input type="radio" name="LikedMost" value="Instructors"
id="Instructors" accesskey="i">
<label for="Instructors"> <u>I</u>nstructors</label><br>
<input type="radio" name="LikedMost" value="TimeOff" id="TimeOff"
accesskey="t"><label for="TimeOff"> <u>T</u>ime Off</label><br>
</td>
</tr>
<tr>
<td align=right>The following instructor(s) did well:</td>
<td><input type="checkbox" name="GoodInstructors" value="X" id="X"
checked accesskey="x"><label for="X"> Instructor <u>X</u>
</label><br>
<input type="checkbox" name="GoodInstructors" value="Y" id="Y"
checked accesskey="y"><label for="Y"> Instructor <u>Y</u>
</label><br>
<input type="checkbox" name="GoodInstructors" value="Z" id="Z"
checked accesskey="z"><label for="Z"> Instructor <u>Z</u>
</label><br>
</td>
</tr>
<tr>
<td align=right>Recommendations for improving this course:</td>
<td><select name="RecImprov" size=4 multiple>
<option value="Blank" selected> </option><br>
<option value="Nothing">Don't change a thing!
</option><br>
<option value="MoreContent">Add more content</option><br>
<option value="MoreDetail">Cover the content in greater detail
hours</option><br>
</select>
</td>
</tr>
<tr>
<td align=right>Branch of service:</td>
<td><select name="ServBranch">
<option value="USAF" selected>Air Force</option><br>
<option value="USN">Navy</option><br>
<option value="USMC">Marine Corps</option><br>
<option value="Army">Army</option><br>
<option value="Other">Other</option><br>
</select>
</td>
</tr>
<tr>
<td align=right>What is your favorite HTML tag:</td>
<td><select name="FavTag">
<optgroup label="deprecated">
<option value="Font">Font tag</option><br>
<option value="B">B</option><br>
<option value="I">I</option><br>
<option value="U">U</option><br>
<option value="Strike">Strike</option>
</optgroup>
<optgroup label="Mandatory">
<option value="HTML">HTML</option><br>
<option value="Head">Head</option><br>
<option value="Title">Title</option><br>
<option value="Body">Body</option>
</optgroup>
<optgroup label="Objects">
<option value="A" selected>A</option><br>
<option value="Img">Img</option><br>
<option value="Script">Script</option><br>
<option value="Object">Object</option>
</optgroup>
</select>
</td>
</tr>
<tr>
<td align=right>Please submit only once per student:</td>
<td><input type="submit" value="SEND THESE RESULTS"
style="font-family:serif; color:lime;
background-color:green; font-size:larger"></td>
</tr>
<tr>
<td align=right>To reset all your inputs to the default:</td>
<td><input type="reset" value=" RESET THIS FORM "
style="font-family:serif; color:white;
background-color:red; font-size:larger"></td>
</tr>
</table>
</form>
This form looks like this:
You have learned a lot in this lesson. Add your own form to sample.htm
- In this lesson, we learned about these tags:
- <form> and </form>
- <input>
- <textarea> and </textarea>
- <select> and </select>
- <option> and </option>
- <optgroup> and </optgroup>
- <label> and </label>
For more information on the topics of this Lesson, see this site.