Form Elements

Contact Us or call 1-877-932-8228
Form Elements

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.Text Field

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.Password Field

<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".Submit Query Button

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.Reset Button

<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.Checkboxes

Toppings:
<input type="checkbox" name="sprinkles" id="sprinkles" checked> <label for="sprinkles">Sprinkles</label>
<input type="checkbox" name="nuts" id="nuts"> <label for="nuts">Nuts</label>
<input type="checkbox" name="whip" id="whip" checked> <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. Radio Buttons

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" checked> 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.Drop-down Choices

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:Combo Box

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>

Grouped Options

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.Text Area

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

In the video presentation that follows note that references to the remotecourse link should instead reference http://www.webucator.com/self-paced-courses/process-form.cfm This change has been made elsewhere in the course and this video will be updated soon as well.

Next