HTML Forms

HTML Forms

In this lesson of the HTML tutorial, you will learn… 

  1. How HTML forms work.
  2. The difference between the post and get methods.
  3. How to create form elements.
  4. To 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 with 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 determines 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 be 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.

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 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>Email: <input type="text" name="email" id="email" value="" size="20" maxlength="40"></label>

 Method 2:
<label for="email">Email:</label>
<input type="text" name="email" id="email" value="" size="20" maxlength="40">
<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

Exercise: Creating a Registration Form

Duration: 15 to 25 minutes.

In this exercise, you will begin to create a registration form. The form will submit to a page on http://www.webucator.com, which will simply “dump” the values entered into the form back to you.

The form should appear as follows:

  1. Open Forms/Exercises/RegistrationForm.html for editing.
  2. Add a form to the page.
  3. Add the following input elements:
    • text: name and id should be “username”
    • password: name and id should be “pw”
    • hidden: name and id should be “emailMe”; value should be your email.
    • submit button: value should be “Register”
    • reset button
  4. When you are done, open the page in a browser, and fill out and submit the form. If successful, the processing page will display the values you entered andsend you an email.

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

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 indicate that radio button is pre-checked

Exercise: Adding Checkboxes and Radio Buttons

Duration: 10 to 15 minutes.

In this exercise, you will add a checkbox and radio buttons to the registration form. At completion, the form should look like this:

  1. Open Forms/Exercises/RegistrationForm.html for editing if you don’t have it open already.
  2. Add the following input elements:
    • radio buttons: name gender and values should be “male” and “female”
    • checkbox: name and id should be “terms”
  3. When you are done, open the page in a browser, and fill out and submit the form.

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 indicate 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

Exercise: Adding a Select Menu and a Textarea

Duration: 15 to 25 minutes.

In this exercise, you will add a select menu and textarea to the registration form. At completion, the form should look like this:

  1. Open Forms/Exercises/RegistrationForm.html for editing if you don’t have it open already.
  2. Add the following input elements:
    • select: name and id should be “referral”. Options should be:
      • “–Please choose–” with value of “0”
      • “Word of Mouth” with value of “wom”
      • “Other” with value of “other”
      • Option group with label of “Search Engine” and the following options:
        • “Google” with value of “Google”
        • “Yahoo!” with value of “Yahoo”
        • “MSN” with value of “MSN”
    • textarea: name and id should be “comments”. Be sure to include cols and rows attributes.
  3. When you are done, open the page in a browser, and fill out and submit the form.

HTML Forms Conclusion

In this lesson of the HTML tutorial, you have learned to create HTML forms. To process form data, you need to know a server-side language, such as ColdFusion, PHP, or Active Server Pages. Sample scripts called IceCreamProcess.cfm, IceCreamProcess.php, and IceCreamProcess.asp can be found in the Demos folder. These scripts simply iterate back to the user what he or she has ordered. Note that you will need to change the action of the form to see how the scripts work.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s