XHTML Tutorial: Standards-Based Web Design

• Interactivity |
• No next page

Forms

HTML forms are used to get information from the user. Users either type in the information or they select from a list of pre-set options.

All forms begin with <form> and end with </form>. Within those elements, a variety of form elements are possible.

<input type="text" />

<textarea>
</textarea>

<input type="checkbox" />

<input type="radio" />

<select>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
</select>

<select multiple="multiple" size="4">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
  <option value="5">5</option>
  <option value="6">6</option>
  <option value="7">7</option>
</select>

Here is a simple example (Note: This form is non-functional. You can type in it, but you can't submit it anywhere):

Here is the code for this particular form:

<form id="sample_form" method="post" action="">
  <p>

    <label for="who">Who are you?</label>
    <input type="text" name="who" id="who" />

  </p>
  <p>
    <label for="where">Where are you from?</label>
    <input type="text" name="where" id="where" />

  </p>
  <fieldset>
    <legend>Do you prefer green or yellow?</legend>
    <p>
      <input name="color" type="radio" value="green" id="green" />

      <label for="green">green</label>
    </p>
    <p>
      <input name="color" type="radio" value="yellow" id="yellow" />

      <label for="yellow">yellow</label>
    </p>
  </fieldset>
  <p> 
    <label for="textarea">Why is the sky blue?</label><br />

    <textarea name="textarea" cols="30" rows="5" id="textarea"></textarea>
  </p>

</form>

How Does a Form Work?

Setting up a form is relatively easy, but how do you make a form work? How do you get a form to do something?

The answer to these questiones depends on what you want a form to do. Forms are most commonly used to do the following two types of actions:

1. save information to a database
2. send an email to someone

There are other things that you could do with forms, but there are by far the most common. Unfortunately, to do either of those things, somebody has to write a script to perform these functions, and it would go way beyond the scope of this class to teach you how to do that. Scripts can be written in such languages as PHP, JSP, Perl, Python, ASP, Cold Fusion, or others. The script tells the server what to do with the information once it is submitted. Should the information be sent in an email? If so, to whom? Should the information be sent to a database? If so, to which database? How should the data be handled? What happens if someone submits a bad email address? Should the user see an error message? What about when users forget to fill in important elements of a form? These are usually not small issues. It takes time to set this up and to do it right.

The illustration below shows how most forms are set up to work:

The user fills out the information in the form. This information is sent to a script. The script determines whether or not there are errors. If there are no errors, the script processes the data by either sending an email to someone or by inserting it in a database somewhere. Then the script presents the user with a confirmation message. If there are errors, the script presents an error message, and usually sends the user back to the form to try again.