Personal tools
  •  

HTML Forms

Document Actions
  • Content View
  • Bookmarks
  • CourseFeed

Tutorial 1 of 4

Objectives:

  • Explain concept of forms
  • Tags discussed: <FORM> <INPUT>

Template File(s):

  • survey.html
  • shortfor.html

(Note: If you have not already downloaded the html Template Files please do so by clicking here .)

Example:

  • Look at the example form provided in the document survey.html
  • Note the different form elements: text boxes, password box, radio button, checkbox button, select box, text area boxes, and "submit" button.

<FORM> tag

The <FORM> tag is used to embed form elements. The typical syntax is
<form method="post" action="url"></form>
The method attribute can either be POST or GET, and will depend on the kind of server software you are using. The ACTION attribute contains a full URL. We will discuss this more later.

<INPUT> tag

Inside the form tag, you can embed your interactive form elements. The INPUT tag can be used to embed radio and checkbox buttons, text boxes, password boxes, and submit and reset buttons.

Example



Open the file shortfor.html in your browser. To do this, use the "Open File" command under the "File" menu option. Look at the file.
  • Note that the gender item is implemented using radio buttons -- only one selection is allowed
  • Note that the browse item is implemented using checkbox buttons -- multiple selections are allowed.
  • Note that the occupation item is implemented using a select box  -- one or multiple selections are allowed.
  • Note that the comments item is implemented using a text area box.
  • Finally, the form ends with "Submit" and "Clear" buttons.


Now open the same file in your text editor , and note how the tags are implemented. The FORM tag is coded as such:
<form method="get" action="http://ia.usu.edu/php-bin/
testform.php">

The gender item used the INPUT tag as follows:
<input name="gender" value="male" type="radio">Male
<input name="gender" value="female" type="radio">Female


Note how NAME and VALUE attributes are of the form ATTRIBUTE= "value". Note also how the value of the NAME attribute is the same for both items, while the value of the VALUE attribute differs for the two items. These  attributes are crucial: each element selected by the user is sent to the server as name="value" pairs. It is best of the text you choose as values for the NAME and VALUE attributes is lower-case and does not contain spaces. Thus, if I selected "Female" in the above example, the form would send "gender=female" to the server when the form is submitted. Finally, note how the TYPE attribute specifies the type of input element (see your book's cheat sheet or the end of this tutorial for a complete list of options).

The browse element used the INPUT tag as follows:
<input name="browse" value="fun" type="checkbox">Fun
<input name="browse" value="work" type="checkbox">Work
<input name="browse" value="research" type="checkbox"> Research
<input name="browse" value="education" type="checkbox">Education


There are 4 input tags for each of the 4 checkbox buttons. Again, the NAME values are the same while the VALUE values differ for each element. Let's now modify this form to create a form that allows a user to sign up for a Web-based course. In this example, the "gender" element will become "method of payment." and the "browse" item will become the "course name" element.

Modifications will be as follows:
<B> Payment method</B>
<input name="payment" value="visa" type="radio"> Visa
<input name="payment" value="check" type="radio">check

etc...

<B>Course name</B>
<input name="course" value="chem101" type="checkbox">Chemistry 101
<input name="course" value="Phy101" type="checkbox"> Physics 101


etc...
Save your file then test it in a browser. Did it work as expected?





Tutorial 2 of 4

Objectives:

  • Learn about creating SELECT and text area elements
  • Tags discussed: <SELECT> <OPTION> <TEXTAREA>

Template File(s):

  • shortfor.html

(Note: If you have not already downloaded the html Template Files please do so by clicking here .)

Example:



Open the file shortfor.html in your browser. Note the text entry box and the pop-up select menu. Now open the file in your text editor .

The TEXTAREA tag creates a large, type-in box. The value of the NAME attribute is again important, as it is sent to the server. The ROWS and COLS attribute specifies the width and length of the box that is drawn on the user's screen. Try modifying the size of the text area, by changing the values of the ROWS and COLS attributes.

The <SELECT> tag used in combination with the <OPTION> tag allows you to create pop-up select menus. In this example, the user can only select one option Note how this method uses less screen real estate (so it is useful if you have a long list).

Let's continue to modify this form to create a form that allows a user to sign up for a Web-based course. In this example, the "occupation" will become the "Prefered delivery style" element.

Modifications will be as follows:
<B> Please select your delivery style</B>
<BR><SELECT NAME="delivery">
<OPTION>Lecture
<OPTION>Video Tape
<OPTION> Web


etc...

</SELECT>
Save your file then test it in a browser. Did it work as expected?





Tutorial 3 of 4

Objectives:

  • Learn more about the SELECT tag
  • Tags discussed: <SELECT> <OPTION>

Template File(s):

  • select.html

(Note: If you have not already downloaded the html Template Files please do so by clicking here .)

Example:



Open the file select.html in your browser. This document displays the variety of options that are available: 1) pop-up menus, 2) boxes from which multiple items can be selected, 3) specifying the size of the text box, 4) default selections, and 5) combinations of the previous.

Now open the file in your text editor . Ideally, you should scroll through the source and the Web document side-by-side, to see how each example is implemented.

Key attributes for the <SELECT> tag include MULTIPLE and SIZE.





Tutorial 4 of 4

Objectives:

  • Explain what happens when the SUBMIT button is clicked
  • Tags discussed: <FORM> <INPUT>

Template File(s):

  • survey.html
  • shortfor.html

(Note: If you have not already downloaded the html Template Files please do so by clicking here .)

Example

When the user has finished completing a form, typically the user is asked to click on the "Submit" button. This causes the user's input to be bundled up and shipped off to the server specified in the value of the ACTION attribute in the <FORM> tag. Typically, at this point, a program handles the data (for example, inserting it into a database) and displays a new Web document to the user. This process requires programming knowledge, and will not be discussed in more detail.

Open the file shortfor.html in a new browser. Look at the HTML source and note the destination URL contained in the value of the ACTION attribute. It points to a program that resides on a server at USU. The function of this simple program is to simply spit back the user's input.

Try it: fill out the form and click on the SUBMIT button! You'll see a bunch of technical specifications, and then, towards the bottom of the screen, the NAME=VALUE pairs of the items you selected in the form.



Example

Open the file survey.html in your browser. Then look at the HTML source and note the value of the ACTION attribute. It points to an email address. Modify this to include your email address (leaving in the "mailto:" part).

If your browser is configured correctly you should eventually receive in your email a cryptic summary of the input.

Summary: the tags and attributes

The following tags and attributes used in creating forms are summarized below:

Tag Attributes
<FORM>
  • METHOD=
    • POST
    • GET
  • ACTION="URL"
<INPUT>
  • NAME=
  • TYPE=
    • CHECKBOX
    • RADIO
    • HIDDEN
    • IMAGE
    • TEXT
    • PASSWORD
    • SUBMIT
    • RESET
  • VALUE=
  • CHECKED
  • MAXLENGTH=
  • SRC=
<TEXTAREA>
  • NAME=
  • ROWS=
  • COLS=
<SELECT>
  • NAME=
  • SIZE=
  • MULTIPLE
<OPTION>
for each option
  • SELECTED

[End of tutorial]

Copyright 2008, by the Contributing Authors. Cite/attribute Resource . admin. (2008, May 20). HTML Forms. Retrieved January 07, 2011, from Free Online Course Materials — USU OpenCourseWare Web site: http://ocw.usu.edu/instructional-technology-learning-sciences/producing-distance-education-resources/resource15.html. This work is licensed under a Creative Commons License Creative Commons License
Online Degree Program
Utah State University offers an online masters degree program (MS & MEd) in Instructional Technology and Learning Sciences. Click below to find out more.