William M. Pegram
Home | Courses | Web Design | Office | Client-Side Scripting | Server-Side Scripting | About Me
Revised: March 19, 2012

Forms

HTML is almost exclusively oriented toward the presentation of information.  The primary exception is forms -- the primary purpose of a form is to obtain information from the user.  A form typically consists of several form elements. The principal form elements which can be put on a web page are listed shown below.  In each instance, I have shown the name of the object, what it looks like, and then the HTML required to produce the object shown.  

Form Elements

Text field:

<input type="text" name="first_name" size="30" maxlength="35" value="first name" />
Attributes: Only type and name are required for this element

If nothing is entered into the text box, when the form is submitted, a name value pair is transmitted where the value is an empty string.

Password field:

A password field is specified by specifying type="password".  This means that text that is typed will appear as asterisks in the form.  All other attributes are the same as a text field.

Text area:

<textarea name="your_comments" cols="35" rows="5">Hi there! </textarea> 
If text appears between the <textarea></textarea> tags, that text is displayed in the textarea.  When the form is submitted, this text, or anything typed by the user, will be transmitted as part of a name-value pair.  If nothing appears in the box, a name value pair is transmitted where the value is an empty string, just like a textbox.

Check boxes:

Central Air Cable TV 
<input type="checkbox" name="central_air" value="desired" />Central Air 
 
<input type="checkbox" name="cable_TV" value="desired" checked="checked" />Cable TV [XHTML coding - the HTML
coding is shown below]


<input type="checkbox" name="cable_TV" value="desired" checked >Cable TV [HTML coding]
The value attribute indicates the value that is sent by the form if the checkbox is checked.  If no value attribute is specified, the form will send an "ON" value.  The checked attribute indicates that the box will be prechecked when the page is loaded.  If checkboxes are given the same name, you must specify a unique value in the value attribute for each checkbox so that the recipient of the information will know which box(es) were checked.  If multiple checkboxes are checked, multiple name-value pairs are transmitted.  If no box is checked, no name-value pair is transmitted.

Radio buttons:

Male Female 
<input type="radio" name="gender" value="m" />Male

<input type="radio" name="gender" value="f" checked="checked" />Female
Radio buttons differ from check boxes in that with radio boxes, only one item can be checked.  All of the radio buttons in the same group (i.e., only one of which can be checked) must be given the same name so that the browser knows they are part of the same group.  Because all buttons have the same name, specifying a unique value for each button in the group is necessary so that when the user input is submitted, one will know which button was checked.  If no box is checked, no name-value pair is transmitted.  As with checkboxes, the checked attribute indicates the box will be checked when the page is loaded.  

Pop-up/Pull-down menu:

<select name="state" size="2" multiple="multiple">
  <option value="DC">District of Columbia</option>
  <option value="MD">Maryland</option>
  <option value="VA" selected="selected">Virginia</option>
</select>
In the select tag, the size attribute determines the number of options initially displayed.  The default value is one.  If size=1 and multiple is not specified, a drop-down menu is displayed.  If the multiple attribute is displayed and size is not specified, four options will be visible in Internet Explorer, Firefox, and Chrome (earlier, browsers differered in the number displayed).  The multiple attribute specifies that one can make multiple selections by holding down the Control key.  If the multiple attribute does not appear, only one selection can be made.  

Within the option tag, the value attribute specifies what value the form will send if the option is selected.  If no value is specified, the value sent is that which is specified after the <option> tag, i.e. the text that appears in the browser.  If one wants to preselect an option (as with checkboxes or radio boxes), one adds the selected attribute to the desired option.  If the user submits the form without making a selection, and no option has the selected attribute, a name-value pair for the first option will be transmitted.

Buttons:

  <input type="submit" value="Send" />
  <input type="reset"  value="Clear" />
  <input type="button" value="Push" />
When a button of type submit is clicked, the values on the form are submitted.  When a button of type reset is clicked, all values on the form are cleared.  A button of type button does not do anything in itself, but can be programmed using scripting languages such as JavaScript.  The optional value attribute is used to specify what text should appear on the buttons.  The default values are "Submit Query" and "Reset", respectively, for submit and reset buttons.

Image:


<input type="image" name="imageField" src="next.gif" align="left" />
This allows an image to be used as a substitute for the submit button.  The required src attribute provides the URL of the image. The optional align attribute aligns the image with respect to the surrounding text lines.

File Upload

<input type="file" name="upload" />
This displays a "Browse" button which permits the user to select a file to be uploaded to the server when the form is submitted.  Depending on the server, it may be necessary to specify enctype ="multipart/form-data" within the <form> tag.

Hidden Form Field

Not surprisingly, a hidden form field does not display in the browser to the user.  The syntax is

<input type="hidden" name="somename" value="somevalue" />

The hidden form field is generally used where the information on the form is being submitted to a general form-processing program.  For example, suppose the information entered on the form is submitted to a program which formats the information and sends it to the webmaster of the webpage.  This form-processing program obviously needs to know the email address of the webmaster so that it can send the webmaster the information.  If the webmaster has the ability to edit the program, he can "hard code" the address right into the program.  However, where there is no such ability or desire to edit the program, another approach is to pass this information to the program as a parameter.  Hidden form fields are the most common technique to do this, and there will be one hidden field for each parameter that is passed.  A related example would be a Paypal shopping cart button such as the following:

Member Advance Ticket - $20:

The code for this is as follows (PayPal may now be using somewhat different code):

Member Advance Ticket - $20:
<form target="paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_cart">
<input type="hidden" name="business" value="dc@stanfordalumni.org">
<input type="hidden" name="item_name"
value="Member Advance Ticket - WDCSA Holiday Party - Sunday December 12 6-9PM">
<input type="hidden" name="item_number" value="Holiday Party Member Advance Ticket">
<input type="hidden" name="amount" value="20.00">
<input type="hidden" name="no_note" value="1">
<input type="hidden" name="currency_code" value="USD">
<input type="image" src="https://www.paypal.com/en_US/i/btn/x-click-but22.gif" border="0" name="submit"
alt="Make payments with PayPal - it's fast, free and secure!" width="87" height="23">
<input type="hidden" name="add" value="1">
</form>

The hidden form fields tell the PayPal server the name of the item and its price so it can be displayed correctly in the shopping cart as well as the business who is to receive the money (identified by email address).

Submitting and Processing Form Information

One can put as many form elements within one set of <form</form> tags as desired.  Unfortunately there is no simple and universal way for the information entered on a form to be submitted and processed.  There are three alternatives:
  1. The information can be emailed to an email address using the mailto: attribute.  One must specify method=post. If the enctype attribute isn't included, the form information becomes an attachment to an email and there is encoding of special characters and spaces. Including enctype="text/plain" eliminates the encoding and puts the name=value pairs in the body of the email, each on a new line. However, just like the use of mailto: in connection with links, using mailto with forms will not work if the browser has not been configured to send email.  This occurs for the home user if they haven't set up their browser for this feature or in computer lab settings at universities and elsewhere. As a result, this option is rarely used.    
  2. The form information can be sent to the server hosting the web site or to another server.  There are a variety of ways the server can process the information, including CGI scripts, Active Server Pages, Cold Fusion, PHP, ASP.NET,and Java Server Pages.  These technologies can enter the information into a database and format the form information before emailing it to the recipient and they do not depend on the browser being configured to send email.  In addition, they can also automatically take the user to a designated page following submission of the information which is particularly useful where the user needs to enter form information on more than one page.  
  3. The information can be used by a client-side script, such as JavaScript or VBScript, running in the browser.  Examples would be the use of a drop down list for the user to select the page they want to jump to or writing a cookie to the user's machine.
For the first alternative, one specifies action="mailto:email address" where email address is the email address where the information should be sent.  For the second alternative, the ACTION attribute of the FORM tag is used to specify the address of the page to receive the information, which is sometimes the same as the page containing the form (termed a "postback" in ASP.NET).    For the last alternative, no ACTION attribute is needed. 

The METHOD attribute of the form tag controls how the form information is transmitted.  If method="get", the information is transmitted as part of the URL; if method="post", it is not.  The default method is "get".  Using the GET method is useful when developing the form since one can look at the URL and see what information is transmitted, however POST is more commonly used since it can transmit more information and the information submitted is not visible in the URL.

The ENCTYPE attribute of the form tag specifies how the form data is to be encoded.  The default is enctype="application/x-www-form-urlencoded", which converts spaces in the form values to a plus sign, and nonalphanumeric characters into a percent sign followed by the hexadecimal digits that are the code for the character.  If you are using the mailto attribute, you can specify enctype="text/plain" so that these conversions do not occur and each name=value pair is shown on a new line.  If you are uploading a file using <input type="file">, you must specify enctype="multi-part/form-data"  

Text and Formatting Considerations

A form generally consists of form elements and text that tells the user what information is sought in the particular form element.  In some cases, the form element itself displays what information is being sought, typically through the VALUE attribute.

It is often useful to put the text and form elements into a table for alignment purposes.  For example, the words accompanying the form element can be in one column and the form elements in another. Put the table element inside the form rather than the other way around.

Additional Form Elements

Several form elements are only supported in recent versions of browsers. These are discussed below:

Label

The purpose of this tag is to explicitly link a label to a form element as opposed to the implicit linking provided by placing the label next to the form element. To do this, one gives the form element a unique id and then references this id in the for attribute of the label tag. For example,

The code to do this is as follows:

<label for="first">First</label><input type="text" name="first" id="first" />

Although the primary purpose of this is to aid those who are accessing the page through non-visual means (e.g. a screenreader), the use of the label tag also permits the user to select the form element by clicking on the label for the form element, in addition to selecting the form element by clicking in or on the form element. This also provides an easy way for the form developer to determine that the labelling has been done correctly.

Fieldset

The purpose of this tag is to group related controls and labels with again the primary purpose to aid those accessing the page through non-visual browsers. For example,

Gender:

The coding is as follows:

<fieldset><input type="radio" name="gender" name="m" id="male" /><label for="male">Male</label> <input type="radio" name="gender" name="f" id="female" /><label for="female">Female</label></fieldset>

Both Internet Explorer, Firefox, and Chrome render the fieldset as a box around the contents. The properties of this box can be controlled through the use of cascading style sheets (CSS) as in the following example where the border is turned off through an inline style of style="border-width:0px;"

Gender:

To see an example of form processing, you can develop a form with two text boxes named first and last, specify the ACTION attribute as http://www.nvcc.edu/home/wpegram/form_action.asp.  Include a hidden form field with the name comment and the value attribute set to whatever you want.  Include a submit button.  Once you develop the form, open it in your browser when connected to the internet, fill out the form with your first and last name, and click the submit button.  An example of such a form would be:

<html><head><title>Sample Form</title></head>
<body>
<form name="form1" action="http://www.nvcc.edu/home/wpegram/form_action.asp">
<input name="comment" type="hidden" value="Forms are fun!">
First: <input name="first" type="text" id="first" /></p>
<p>Last: <input name="last" type="text" id="last" /></p>
<p><input type="submit" name="Submit" value="Submit" /></p>
</form></body></html>

and an example of a server-side form processing page (ASP with JavaScript) would be:

<%@LANGUAGE="JAVASCRIPT" %>
<html><head> <title>Form Processing Document</title></head>
<body>
<h2>Welcome <% =Request.QueryString("first") %>&nbsp;<% =Request.QueryString("last") %></h2>
Your comment <i><% =Request.QueryString("comment") %> </i> has been received. Thank you.
</body>
</html>

Comments to William Pegram, bill@billpegram.com