HTML Web Forms

Overview

Forms on the Internet are becoming more and more common and are a great way for Web developers to capture information from their users as well as allow for user interaction and dynamic Web page creation. The are many types of forms on the Web; the most commonly used forms include: comment response forms, order entry forms, subscription forms, registration forms, and login forms. Creating forms is easy. Just add the <form> tags, the associated form field elements, the action attribute, the method attribute, and a submit button, and you've got yourself a form.

After a form is filled in and submitted it is usually sent to a Web server which parses the information in the form and acts upon it.Traditionally Common Gateway Interface (CGI) programs have been used to process form data on a Web server. These days the Web developer has many more options at his or her disposal: Active Server Pages (ASP), Java Server Pages (JSP), ColdFusion, and PHP Hypertext Preprocessor (PHP), are all popular application server extensions being added to existing Web server software. These Web server extensions provide the functionality necessary to process forms and act on the information contained within them.

In this lesson we will only be covering how to create and style the Web-based form. Students are encouraged to seek out other courses that explain how to create the server-side code that is used in processing a Web form.

NOTE:  In this lesson you will read about client "requests" and server "responses." You should become familiar with this nomenclature of the HyperText Transfer Protocol (HTTP) protocol. Remember, it is the HTTP protocol that is used by the Web browser and the Web server to communicate with each other. When a user types in a Web page address into their Web browser and clicks Go, the Web browser sends an "HTTP Get Request" to the Web server - that's the official technical jargon for how a client gets Web pages and other files from a Web server. The server will locate the requested document and send it to the client's Web browser using an "HTTP Get Response."

The form element

The form element is created by using the opening <form> and closing </form> tags. form elements are placed in the body section of the HTML/XHTML document as demonstrated in this example:

<html>

		   <head>

		      <title>form1</title>

		   </head>
  
   <body>

  	     <form action="/forms/processForm.asp" method="get" name="form1" id="form1">

             <h1>My First 
			Form</h1>

           <p><input type="text" name="fname" id="fname" size="50" max="50" value="Enter 
			Your First Name Here."/></p>

           <p><input type="text" 
			name="lname" id="lname" size="50" max="50" value="Enter 
			Your Last Name Here."/></p>

           <input type="submit" name="submit" id="submit" value="Send 
			Form"/>&nbsp;

             <input type="reset" name="reset" id="submit" value="Clear 
			Form"/>

      </form>
  
   </body>

		  </html>

Click here to see code run.

There are many attributes that can be used with the form element and they are discussed in the following sections.

The action attribute

The action attribute of the form element is used to identify the file/program that will process the form. The value for the action attribute is simply the URL of the page/program that will process the form. In our previous coding example you'll notice that the file named "processForm.asp" is the file that the Web server will load and use for parsing the form submitted by the user.

The method attribute

The method attribute of the form element works in concert with the action element. The method attribute informs the client browser as to which method it should use to submit the form data to the server. The choices are "get" or "post;" in the previous coding example you'll notice that get was the method identified by the method attribute of the form element as to how the data would be submitted to the Web server for processing.

The get value of the method attribute indicates to the client browser that it should append the form information in name/value pairs to the end of the URL when submitting the form data to the Web server. Once the user clicks on the submit button the client browser will "request" the file named in the action attribute (processForm.asp in our example) and then append to it a question mark "?" followed by the name of each of the fields in the form and the values that the user typed into the fields. Here's an example of what the URL would look like if the user had type "Bill" into the "fname" field on our form: http://www.cis.msjc.edu/forms/processForm.asp?fname=Bill

The post value, on the other hand, hides the form data in an HTTP header when submitting its form request to the Web server.

The name and ID attributes

The name and the ID attributes of the Form element are used to uniquely identify the form within the HTML document. Supposing you had two or more forms in a single HTML document; you would certainly want to be able to identify each one separately programmatically, right? Well, that's where the name and id attributes come in. By adding a name and id element to your forms you can use client-side or server-side scripting to refer to each form and its elements by name.

The browser Document Object Model (DOM) is a hierarchical structure and each browser element can be referred to programmatically. In the case of forms, your browser keeps track of all forms in an HTML document using what is called the "Forms Array"; this allows forms to be referred to by their "ordinal" number. For example: form[0] is the first form in an HTML document, form[1] would be a reference to the second form in the same document, form[2] refers to the third form, and so on and so forth. But, if you assign a name of ID to a form you can then reference that form by its name. In our example up above we could reference our form this way: form.form1, because "form1" is the name/id we assigned to the form when we created it in our HTML document.

The input element

The input element allows you to create up to 10 different form field element types. The values used to create the different form field types are: button, checkbox,file, hidden, image, password, reset, submit, and text.

Here is the code you would write to create a text input element:

       <input type="text" name="fname" id="fname" size="50" max="50" value="Enter name here"/>

. . . that looks like this:

Here is the code you would write to create a Submit button input element:

       <input type="submit" name="submit" id="submit" value="Send Form" />

. . . that looks like this:

    Notice that submit button's value is used to assign the text that is shown on the submit button when displayed in a Web browser. You cab also change the "type" to "reset" to create a button that will clear the form when the user clicks on it.

Here is the code you would write to create a Reset button input element:

       <input type="reset" name="resett" id="reset" value="Clear Form"/>

. . . that looks like this:

The textarea element

The textarea element allows developers to create multi-line text input fields. Here is the code you would write to create a textarea element:

<textarea name="comments" id="comments" rows="6"columns="50"value="Enter you comments here."/>

. . . that looks like this: 

The select and option elements

The select and the option elements are used in combination to create two types of multichoice selection boxes: drop-down selection boxes and multiple select selection boxes.

Drop-Down Selection List

The textarea element allows developers to create multi-line text input fields. Here is the code you would write to create a textarea element:

        	<select name="item" id="item"/>

        	<option name="option01" id="option01"/>Cisco 2621</option>

        	<option name="option01" id="option02"/>Cisco 2621</option>

        	<option name="option01" id="option03"/>Cisco 2621</option>

            </select>
. . . that looks like this: 

Option Groups

Here is the code you would write to create a drop-down selection list with group headers:

	
<select name="item" id="item"/>

  <optgroup label="Routers">

  <option name="option01" id="option01"/>Cisco 2621</option>

<option name="option03" id="option02"/>Cisco 2621</option>

<option name="option04" id="option03"/>Cisco 2621</option>

</optgroup>

<optgroup label="Switches">

<option name="option04" id="option04"/>Cisco 2621</option>

<option name="option05" id="option05"/>Cisco 2621</option>

<option name="option06" id="option06"/>Cisco 2621</option>

</optgroup>

</select>
. . . that looks like this: 

Multiple select selection lists

Here is the code you would write to create a multi-select selection list:

<select name="item" id="item"/>

<option name="option01" id="option01"/>Cisco 2621</option>

<option name="option01" id="option02"/>Cisco 2621</option>

<option name="option01" id="option01"/>Cisco 2621</option>

<option name="option01" id="option02"/>Cisco 2621</option>

<option name="option01" id="option03"/>Cisco 2621</option>

</select>
. . . that looks like this: 

The label element

The <label> element allows you to link text with a form control. For instance if you wanted the words "male" and "female" on a form to each be associated with a particular radio button on the form you could create a label element for each radio button using the "for" attribute, or you could encapsulate each radio button with an opening and closing <label> tag. For instance if you wanted to use the "for" attribute you would write your code like this:

<label for="male">Male</label><input type="radio" id="male" />&nbsp;<label for="female">Female</label><input type="radio" name="sex" id="female" value="female" />

In your Web browser it will look like this:

 

Notice how you can click on the words "Male" and "Female" to select the corresponding radio button.

The second way to accomplish the same task is to encapsulate the radio button in the <label> element. To encapsulate the radio button in the <label> element, write your code like this:

<label>Male<input type="radio" id="male" /></label>

Tab Index Order

Many Web surfers choose to use the <tab> key to navigate from one field to the next when working in an online form. It is a good idea to define a tabindex value for each input element in the form so that users aren't taken logically in the proper order from one form field to the next. To do so just add the "tabindex" attribute to your form field elements like this:

<input name="fname" id="fname" tabindex="1" />

 

Tips for Creating Effective Forms

  • Label all control elements clearly and concisely.
  • Use horizontal lines, tables, and line breaks to seperate topical groups from one another.
  • Use fieldsets to organize common groups of fields, especially option buttons.
  • Specify the tab order ro ensure that users will move correctly from one field to another.
  • Use option buttons, checkboxes, and selection lists whenever possible to limit a user's choice of entries, thus reducing the chance of an erroneous data value. Use input boxes only when the field has no predefined list of values.
  • Use selection lists for items with several possible options. Use option buttons for items with few options. Use chexk box for each item with only two possible values.
  • Let users know the correct format for the input box text by inserting default text in the appropriate format (for example, insert the text string, "mm/dd/yy" in a Date input box to indicator the format for inserting date values).
  • Use password fields for sensitive or confidential information (such as password).
  • Because form elements differ between Web browsers, view your form in different Web browsers and different Web browser versions to ensure that the form displays correctly in all situations.