Lesson 24 - Forms

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.
  • The 'action' attribute describes where the form data is sent (usually to a CGI script, which will process the information). In our example, the data is mailed to you directly without processing (try it). (Note: if you omit the Action attribute, when the viewer clicks the Submit button, nothing is sent and the form resets iteslf.)
  • The 'method' attribute determines how the data is transmitted to the server.
    • If 'method=get', the data is preceeded by a '?', then appended to the URL stated in the Action attribute.
    • If 'method=post' and the proper 'enctype' is included, the data is transmitted as a message. For security reasons, 'method=post' is generally preferred.
  • The 'enctype' attribute sets a MIME (Multi-purpose Internet Mail Extensions) type for the data submitted. This attribute is optional. The browser knows what default values are best.
    • 'enctype="multipart/form-data"' is the default for 'method=post'.
    • 'enctype="text/plain"' is the default for 'action="mailto:somewhere"'.
  • The 'name' attribute identifies the name of the form for scripting purposes and in data processing so you know which form response you are reading.
<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 type="button" 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.
  • The 'name' attribute identifies which input you are reading in your results.
  • The 'value' attribute displays the default value given this input, but will transmit the value chosen/typed by the viewer.
  • The 'size' attribute sets the width of text/password boxes.
  • The 'maxlength' attribute sets the maximum number of characters the viewer may input. To prevent hackers from inputting unwanted code through your text inputs, it is a good idea to set a maxlength.
  • The 'checked' attribute will display a radio button or checkbox as filled. (Note, do not give the Checked attribute to more than one 'type=radio' with the same name.)
  • The 'disabled' attribute will display the input, but will not allow the viewer to modify it, and the information will not be transmitted. This is good for scripting and some advanced HTML applications. The 'readonly' attribute is similar, only it will transmit the data.
  • The 'tabindex=n ' attribute determines where the cursor will go next when the viewer presses the Tab Key. Without this attribute, the cursor will follow the order in the HTML file.
  • The 'type' attribute sets the display.
    • 'type=hidden' produces a hidden data set, which is transmitted along with all other data, but the viewer doesn't see it (good for writing notes to yourself or passing variables for scripts).
    'type=text' produces a text box ready for viewer typing (try it).
    'type=password' produces a text box, but all input will be displayed with asterisks (*) (try it).
    'type=radio' produces a radio button (for radio buttons of the same name, the viewer can select only one) (try it).
    'type=checkbox' produces a checkbox (more than one checkbox with the same name may be checked) (try it).
    'type=button' produces a button that can be clicked (try it).
    'type=submit' produces a button, which when clicked, will invoke the Action attribute of the Form tag (the Value attribute of 'type=submit' is the text displayed on the button) (try it).
    'type=reset' produces a button, which when clicked, will erase all user input and re-enter default values for all input fields. (the Value attribute of 'type=reset' is the text displayed on the button).
<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).
  • You set the number of rows and columns to be shown
  • The 'disabled' attribute will display the input, but will not allow the viewer to modify it, and the information will not be transmitted. This is good for scripting and some advanced HTML applications. The 'readonly' attribute does much the same thing, only it will transmit the data.
  • The 'name' attribute identifies which input you are reading in your results.
  • The encompassed text is the default 'value' attribute (which will be displayed in the textbox) but will transmit the 'value' typed by the viewer.
  • The 'tabindex=n ' attribute determines where the cursor will go next when the viewer presses the Tab Key. Without this attribute, the cursor will follow the order in the HTML file.
  • The 'wrap' attribute tells the browser to wrap displayed text in the box. Possible values are 'hard', 'soft' and 'off'.
<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).
  • The 'name' attribute identifies which input you are reading in your results.
  • The 'size' attribute determines how many Options are displayed at one time in the Select box. If size=1, or if there is no size attribute at all, there is only one Option displayed at a time, and the drop-down arrow appears to display the rest. If size=2 or more, that many Options are displayed, and instead of a drop-down arrow, a scroll-bar appears to display additional options.
  • The option tag gives an an individual choice from which to select.
    • If a value attribute is given, and this Option is selected, this Value is passed along with the Select name. If the value attribute is not given, whatever is typed between the start and end Option tags is the value passed.
    • The 'selected' attribute picks the default Option. If the viewer does nothing, this default Option value is passed.
  • The optgroup tag groups Options together in an outline-type format.
    • The label attribute displays the title given the group of options.

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>

This form looks like this:

Sample Form Showing Various Input Fields
Your Name:
Password:
Give us your frank evaluation of this course:
What you liked most about this course:


The following instructor(s) did well:


Recommendations for improving this course:
Branch of service:
What is your favorite HTML tag:
Please submit only once per student:
To reset all your inputs to the default:

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>
By now, your sample2.htm file should look like this.
For more information on the topics of this Lesson, see this site.

Lesson 23 Special Characters   < <  PREVIOUS   Table of Contents NEXT  > >   Lesson 25 Scripting
Developed with HTML-Kit
Sandersongs Web Tutorials
Contact the Webmasterwith comments.
©2024, by Bill Sanders, all rights reserved.
This domain had 3,585 different visits in the last 30 days.
http://www.sandersongs.com/HTMLcourse/Lesson24.php
This page was last modified on our server on 11 Jul 2021
and last refreshed on our server at 10:48 pm, UTC
This file took 0.0274 seconds to process.