Sign up for a free trial of our self-paced courses.

HTML Tutorial

HTML Forms

In this lesson, you will learn how to create HTML forms for sending data to the server for processing. You will not learn how to process the form data as you need to know a server-side language, like PHP, ASP.NET or ColdFusion for that. You will also not learn to validate forms, as that is done with JavaScript. HTML is strictly for creating the form itself.

Lesson Goals

  • Learn how HTML forms work.
  • Learn the difference between the post and get methods.
  • Learn how to create form elements.
  • Use labels to make form elements more accessible.

How HTML Forms Work

HTML forms are used for submitting data back to a script on the server for data processing. When a form is submitted, the data in the form fields is passed to the server in the form of name-value pairs. Server-side scripts, which can be written in several different languages, are used to process the incoming data and return a new HTML page to the browser. The page returned to the browser could be anything from a "Thank you for registering" message or a list of search results generated from a database query.

The process is as follows:

  1. The user submits a form. The data is sent to the web server.
  2. A script on the web server processes the form, possibly interacting with the file system, one or more databases, a mail server, or any number of other applications.
  3. The script generates an HTML page, which the server returns to the client for display.

The <form> Tag

HTML forms are created using the <form> tag, which takes two main attributes: action and method.

The action specifies the URL of the page that processes the form. It is required. The method attribute has two possible values: post and get. A basic form tag is shown below:

<form method="post" action="Register.cfm">
	<!--form fields go here-->
</form>

Get vs. Post

The value of the method attribute is used to determine how the form data will be passed to the server.

get

If get is used the data will be appended to the URL as part of a querystring. For example, if the form is filled out as follows:

When the user submitted the form, the URL for the new page would read (without the line breaks):

Register.cfm?email=ndunn@webucator.com&pw=foobar&flavor=hardChoc&
		sprinkles=on&whip=on&container=wafflecone&
		requests=I+want+a+really+big+cone%21&discount=20%2

You'll notice the file name is followed by a question mark, which is followed by several name-value pairs (e.g, container=wafflecone) separated by ampersands (&).

The get method is commonly used by search engines, because it allows the resulting page to be bookmarked.

post

When post is used, the name-value pairs are not sent as part of the querystring. Instead they are sent behind the scenes. This has the advantage of keeping the values hidden from anyone looking over the user's shoulder. Two other advantages of the post method are:

  1. It allows for much more data to be submitted (i.e, larger forms).
  2. It allows for files to be uploaded to the server.

As a general rule, you should use post unless you want the user to be able to bookmark or share (e.g, via email) the resulting web page.

Files can be uploaded to the server via the file input type. The tag syntax is: <input type="file" name="filename">

Form Elements

This section describes the different form elements that can be used to input data into a form. As you will see, many of these elements, but not all, are created with the input tag.

Note that in XHTML strict and HTML 4 strict, input, other form controls, and label elements may not be direct children of the form element. They must be nested in other block-level elements.

id and Name Attributes

Form fields (also called controls) take both the name attribute and the id attribute. They are used for different purposes.

  • The name attribute is used to hold the value of the field. It is passed to the server as a variable.
  • The id attribute is used by CSS and JavaScript to identify a specific element.

Labels

Form element labels should be put in <label> tags. Labels can be associated with form elements using two methods:

  1. Using the for attribute of the <label> to point to the id element of the form element.
  2. Wrapping the form element in the <label> tag.

We'll show both methods in the first example, but only use the first method in the rest of the examples.

Text Fields

Text fields are created with the input tag with the type attribute set to text. They are used for single lines of text.

Method 1:
<label for="email">Email:</label>
<input type="text" name="email" id="email" value="" size="20" maxlength="40">

Method 2:
<label>Email: <input type="text" name="email" id="email" value="" size="20" maxlength="40"></label>
<input type="text"> Attributes
Attribute Description
type must be set to "text"
name variable name
value initial value in the text field
size width of the text field
maxlength maximum number of characters that can be entered

Password Fields

Password fields are similar to text fields. The only difference is that the value entered is disguised so that onlookers cannot see it.

<label for="pw">Password:</label>
<input type="password" name="pw" id="pw" size="10" maxlength="12">
<input type="password"> Attributes
Attribute Description
type must be set to "password"
name variable name
size width of the password field
maxlength maximum number of characters that can be entered

Submit and Reset Buttons

Submit and reset buttons are both created with the <input> tag.

Submit Button

A form must have a submit button to be "submittable".

Firefox and Internet Explorer both use "Submit Query" as the default text, but this can be changed with the value attribute.

<input type="submit" name="submitbutton" id="submitbutton" value="Register">

When a form has a submit button, it can be submitted either by clicking on the button or pressing the Enter key when an input element has focus.

When a submit button is clicked, the name and value of that button are sent to the server (as a name-value pair). This can be useful in the event that a form has multiple submit buttons as the processing page could behave differently depending on which button was clicked.

Reset Button

A reset button is used to set all the form fields back to their original values.

Firefox and Internet Explorer both use "Reset" as the default text, but this can be changed with the value attribute.

<input type="reset" name="resetbutton" id="resetbutton" value="Clear">

Hidden Fields

<input type="hidden" name="discount" id="discount" value="20%">

Hidden fields are created with the input tag with the type attribute set to hidden. They are used to pass name-value pairs to the server without displaying them to the user. They are sometimes used in multi-page forms to keep track of variables from a form on a previous page.

<input type="hidden"> Attributes
Attribute Description
type must be set to "hidden"
name variable name
value initial value in the hidden field

Although the user can't change the value, it could be changed programatically with JavaScript. For example, the discount might be calculated based on other options the user selected in the form.

Checkboxes

Checkboxes are created with the input tag with the type attribute set to checkbox. The default value for a checkbox is "on". Although the value of a checkbox can be changed with the value attribute, there is usually no reason to do so, as the name-value pair only gets sent to the server if the checkbox is checked. In other words, the script on the server only needs to check for the existence of the variable name to see if the checkbox was checked or not.

Toppings:
<input type="checkbox" name="sprinkles" id="sprinkles"> <label for="sprinkles">Sprinkles</label>
<input type="checkbox" name="nuts" id="nuts"> <label for="nuts">Nuts</label>
<input type="checkbox" name="whip" id="whip"> <label for="whip">Whipped Cream</label>
<input type="checkbox"> Attributes
Attribute Description
type must be set to "checkbox"
name variable name
value value of the checkbox
checked indicates that checkbox is pre-checked

Radio Buttons

Radio buttons are created with the input tag with the type attribute set to radio. Radio buttons generally come in groups, in which each radio button has the same name. Only one radio button in the group can be checked at any given time. Each radio button in the group should have a unique value - the value to be sent to the server if that radio button is selected. There is often no need to provide ids for radio buttons as they are not usually styled with CSS and any script code would most likely try to access the whole group and treat it as an array, rather than try to access a single radio button.

Cup or Cone?
<label><input type="radio" name="container" value="cup"> Cup</label>
<label><input type="radio" name="container" value="plaincone"> Plain cone</label>
<label><input type="radio" name="container" value="sugarcone"> Sugar cone</label>
<label><input type="radio" name="container" value="wafflecone"> Waffle cone</label>

You will notice that we used label differently this time. Instead of using the for attribute, we wrapped the radio button in the label tag. This is because the radio buttons don't include id attributes.

<input type="radio"> Attributes
Attribute Description
type must be set to "radio"
name variable name
value value of the radio button
checked indicates that radio button is pre-checked

Id Attribute for Radio Buttons

You may have noticed that form elements such as text fields and checkboxes, the id is usually the same as the name. They aren't actually related at all, so they don't have to be the same. As stated above:
  • The name attribute is used to hold the value of the field. It is passed to the server as a variable.
  • The id attribute is used by CSS and JavaScript to identify a specific element.
Nonetheless, it's usually easier just to give them the same name, so you can refer to the elements using the same name in all other files (CSS, JavaScript, etc...).

For radio buttons, this isn't possible though, because radio buttons in the same set must all have the same name, but different ids.

When the form is submitted, the value of the selected button gets sent to the server. So, for example, if we had a radio button asking to select the gender ("m" or "f"), selecting "m" would mean the form will send "gender=m" to the server. However, if we wanted to use JavaScript to autoselect the "m" radio button, we would need to be able to distinguish it from the "f" radio button - this is where IDs would come in. Essentially, the radio buttons in the same set need to have different id values.

Select Menus

Select menus are created with the select tag. The size attribute determines how many options are shown at once.

By default, only one option can be selected; however, this can be changed by adding the multiple attribute to the select tag. The following tag would create a scrollable combo box that showed three options at a time and allowed multiple options to be selected:

<label for="flavor">Flavor:</label>
<select name="flavor" id="flavor" size="3" multiple="multiple">
	<option value="0" selected="selected"></option>
	<option value="choc">Chocolate</option>
	<option value="straw">Strawberry</option>
	<option value="van">Vanilla</option>
</select>

The result would look like this:

The select element must contain one or more option elements. The text between the open and close option tags appears in the select menu. The value of the value attribute is what gets passed to the server if that option is selected. The selected attribute is used to preselect an option.

<select> Attributes
Attribute Description
name variable name
size number of options to appear at once
multiple indicates that multiple options can be selected. value must be "multiple"
<option> Attributes
Attribute Description
value value to send to server if option is selected
selected indicates that option is pre-selected. value must be "selected"

Option Groups

Options can be arranged in groups using the <optgroup> tag. The label attribute is used to set the option group heading.

<label for="flavor">Flavor:</label>
<select name="flavor" id="flavor">
	<option value="0" selected="selected"></option>
	<optgroup label="Soft Flavors">
		<option value="softChoc">Chocolate</option>
		<option value="softStraw">Strawberry</option>
		<option value="softVan">Vanilla</option>
	</optgroup>
	<optgroup label="Hard Flavors">
		<option value="hardChoc">Chocolate</option>
		<option value="hardStraw">Strawberry</option>
		<option value="hardVan">Vanilla</option>
		<option value="hardMint">Mint Chocolate Chip</option>
		<option value="hardCC">Cookies &amp; Cream</option>
	</optgroup>
</select>

Textareas

Textareas are created with the textarea tag. The cols and rows attributes indicate the number of columns and rows (in characters) that the textarea should span.

An initial value can be entered into the textarea by adding text between the open and close textarea tags. For example,

<textarea name="requests" cols="40" rows="6">
	Initial value goes here.
</textarea>
<textarea> Attributes
Attribute Description
name variable name
cols number of columns to span in character width
rows number of rows to span in character height