Updated 10/11/2017 at 11:30pm

Forms


References:
SAMS Teach Yourself HTML, CSS, and JavaScript All in One, Second Edition, Chapter 26
Web Development & Design Foundations with HTML5, Seventh Edition, Chapter 9

Introduction to Forms


Forms are the HTML way to get information from your users. When you fill in your name, address, etc., on a Web site, it is probably a form that you are typing your information into.


The information in your form can be processed by a program on the Web site's server, or it can be e-mailed. The examples in this handout will send the form's information to a simple PHP page on the jimlink.net server. This page will display the form information in "raw" form, without processing it in any way.


The <form> Tag

An HTML form is enclosed in <form>...</form> tags.

You can have more than one form on a page, but <form>...</form> tags may not be nested. This means that if you have multiple forms in a page, each form must be separate from the other(s).

The <form> tag has these attributes:


The method attribute almost always has a value of "post". You may occasionally see a method of "get", but you will usually use the "post" method.

Here is a sample of a form tag with a method value of "post":

  <form method="post" action="https://www.jimlink.net/PHPStuff/testFormData.php">

One situation where the "get" method is very handy, though, is while you are still working on the form and testing it. The "get" method tells the browser to put the form's information into the URL (address) field of the browser when the form is submitted. In order to make this work, though, while you are testing and don't want the information sent anywhere, you need to also change the "action" attribute to an empty string (double quotes without anything inside the quotes), like this:

  <form method="get" action="">
You also need to make sure that your form is not in a frameset while you are testing it. Otherwise, the information that is put into the URL is hidden from you.

Just make sure you change the method to "post" and that you change the action to something meaningful when you are done testing the page!


The action attribute usually specifies the URL of a Web page or server-side program that will process and/or handle the form's data when the user clicks the "submit" button, like this:

  <form method="post" action="https://www.jimlink.net/PHPStuff/testFormData.php">

Most of the remaining sections of this handout will tell you about the various types of input fields/controls that can be in a form.


[Optional] -- Historical Information

(I am keeping the following information in this section of the handout for historical purposes, and in case you ever need to figure out why a "mailto:" URL is in a form. But you can safely ignore the following "mailto:" information in the real world of most people's using Web-based e-mail services.)

The action attribute may also specify an e-mail address to send the form's information to. But this function of the action attribute is becoming less and less useful as more and more people use Web-based e-mail services.

An example of a <form> tag with a mailto: action attribute is given below:

  <form method="post" action="mailto:someone@company.com">

You can put multiple e-mail addresses in the mailto: list by separating them with semicolons, like this:

  <form 
    method="post" 
    action="mailto:someone@company.com;someone_else@yourcompany.com">

You can even add a subject to the mailto: value like this:

  <form 
    method="post" 
    action="mailto:someone@company.com?subject=grand opening sale">
You should note the question mark immediately following the e-mail address(es), the keyword subject, the equal sign, and the subject text.

And you can add a cc or a bcc to the mailto: value like this:

  <form 
    method="post" 
    action="mailto:someone@company.com?subject=grand opening sale&cc=someoneelse@company.net&bcc=yourfriend@yahoo.com">
You should note the ampersand that separates the multiple variables in the URL.


Please note that there are some restrictions on using mailto: --


By the way, if you do decide to use the mailto: action, you should be aware that you can control how the data is sent to the e-mail recipient. You use the enctype attribute in the <form> tag to exercise this control. The possible values and the resulting data formats are:

End of [Optional] -- Historical Information


The Submit Button

Now that we have talked about the <form>...</form> tag, you need to note carefully that it doesn't do anything by itself. It must contain input fields (also called input controls) that the user types information into or selects information in (using select lists, checkboxes, and radio buttons, which we will talk about shortly).

The submit button is what sends the form's info to the server for processing.

It is the information in the form's input fields that is sent to the server when the form is submitted.

The submit button is one of many <input> tags and it looks like this:

  <input type="submit" value="Send the Information">

Please note these points about the submit button:


Stylesheet for Examples

Here is the stylesheet which will be used for most of the example code below in this handout. This is file form_samples.css:

/* Form Sample Styling */

body
{
	font-family: Arial, sans-serif;
}

#mainDiv
{
	width: 800px;
	margin: 50px auto 0px auto;  /* TRBL syntax */
	text-align: left;
}

.explanation
{
	font-size: 0.7em;
	font-style: italic;
}

td
{
  vertical-align: top;
}

Input Text (Single-Line Input)

You can put a single-line text input box in your form with this version of the <input> tag:

  <input
    type="text"
    name="LabelForThisInput"
    size="30"
    maxlength="50"
    value="some text to go into the box">
Please note these points about the above code:

Below is some code that shows how the input text box works.

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Form Example: Text Input</title>
  <link rel="stylesheet" type="text/css" href="form_samples.css">
</head>

<body>
<div id="mainDiv">
  <form 
    method="post" 
    action="https://www.jimlink.net/PHPStuff/testFormData.php">
    Type some text here:
    <input
      type="text"
      name="textstuff"
      size="30"
      maxlength="50"
      value="some text to go into the box">
    <br>
    <br>
    <input type="submit" value="Send the info">
  </form>
</div>
</body>
</html>

and it looks like this in the browser.


Password Input

A variation on the single-line text input box is an input box that accepts a password. This type of input box also uses an <input> tag:

  <input
    type="password"
    name="userPassword"
    size="20"
    maxlength="20">
Please note these points about the above code:

Below is some code that shows how the password input box works. Please note that the page is form_sample_7.html and that the anchor tag which links to it (see below) has https:// at the beginning of the URL. This secure link means that the information from the form will be encrypted during its transmission to the Web server. The ColdFusion page which is given as the action attribute in the <form> tag will also receive the information from the Web server as encrypted text, since the action attribute in the form tag is a relative URL and the secure server will be used. The action page displays the password in plain (un-encrypted) text.

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Form Example: Password Input</title>
  <link rel="stylesheet" type="text/css" href="form_samples.css">
</head>

<body>
<div id="mainDiv">
  <form 
    method="post" 
    action="testFormData.php">
    Type your password here:
    <input
      type="password"
      name="userPassword">
    <br>
    <br>
    <input type="submit" value="Send the password">
  </form>
</div>
</body>
</html>

The page looks like this in the browser.


Textarea (Multiple-Line Input)

If you want to give the user a multi-line input box to type their information into, you can use the <textarea> tag in the form. This tag looks like this:

  <textarea name="Comments" cols="30" rows="4" maxlength="4000">Some text
    goes here.</textarea>

Please note these points about the above code:

Below is some code that shows how the <textarea> input box works:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Form Example: Textarea Input</title>
  <link rel="stylesheet" type="text/css" href="form_samples.css">
</head>

<body>
<div id="mainDiv">
  <form 
    method="post" 
    action="https://www.jimlink.net/PHPStuff/testFormData.php">
    Please give us your comments:<br>
    <textarea name="Comments" cols="30" rows="4" maxlength="4000">(Type your comments here)</textarea>
    <br/>
    <br/>
    <input type="submit" value="Send the info">
  </form>
</div>
</body>
</html>
and it looks like this in the browser.


File Input

The file input form of the <input> field allows the user to select a file from their computer's file system. The path to the selected file is put into the edit area of this field, and is sent to the server or the e-mail program when the submit button is clicked.

The file input field looks like this in code:

  <input type="file" name="filepath" size="60">

Please note these points about the above code:

Here is some sample code for the file input field:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Form Example: File Input</title>
  <link rel="stylesheet" type="text/css" href="form_samples.css">
</head>

<body>
<div id="mainDiv">
  <form 
    method="post" 
    action="https://www.jimlink.net/PHPStuff/testFormData.php">
    Select a file:
    <input
      type="file"
      name="filepath"
      size="30">
    <br>
    <br>
    <input type="submit" value="Send the File info">
  </form>
</div>
</body>
</html>
And it looks like this in the browser.


Radio Buttons

Radio buttons allow the user to select a single option from a number of choices. When the user selects one choice, the other choices are automatically de-selected. Some sample radio buttons are shown here:

  <input type="radio" 
         name="FavoriteColor" 
         value="blue" 
         checked>Blue
  <br>
  <input type="radio" 
         name="FavoriteColor" 
         value="red">Red
  <br>
  <input type="radio" 
         name="FavoriteColor" 
         value="green">Green

Please note these points about the above code:

Below is some code that shows how radio buttons works:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Form Example: Radio Buttons</title>
  <link rel="stylesheet" type="text/css" href="form_samples.css">
</head>

<body>
<div id="mainDiv">
  <form 
    method="post" 
    action="https://www.jimlink.net/PHPStuff/testFormData.php">
    Please tell us your favorite color:<br>
    <input type="radio" 
         name="FavoriteColor" 
         value="blue" 
         checked>Blue
    <br>
    <input type="radio" 
         name="FavoriteColor" 
         value="red">Red
    <br>
    <input type="radio" 
         name="FavoriteColor" 
         value="green">Green
    <br>
    <br>
    <input type="submit" value="Send the info">
  </form>
</div>
</body>
</html>
and it looks like this in the browser.


Checkboxes

Checkboxes allow the user to select multiple options from a number of choices. Some sample checkboxes buttons are shown here:

  <input type="checkbox" 
         name="Pets[]" 
         value="dog" 
         checked>Dog
  <br>
  <input type="checkbox" 
         name="Pets[]" 
         value="cat">Cat
  <br>
  <input type="checkbox" 
         name="Pets[]" 
         value="fish" 
         checked>Fish

Please note these points about the above code:

Below is some code that shows how checkboxes works:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Form Example: Checkboxes</title>
  <link rel="stylesheet" type="text/css" href="form_samples.css">
</head>

<body>
<div id="mainDiv">
  <form 
    method="post" 
    action="https://www.jimlink.net/PHPStuff/testFormData.php">
    Please tell us what pets you have:<br>
    <input type="checkbox" 
         name="Pets[]" 
         value="dog" 
         checked>Dog
    <br>
    <input type="checkbox" 
         name="Pets[]" 
         value="cat">Cat
    <br>
    <input type="checkbox" 
         name="Pets[]" 
         value="fish" 
         checked>Fish
    <br>
    <br>
    <input type="submit" value="Send the info">
  </form>
</div>
</body>
</html>
and it looks like this in the browser.


Select Lists

A select list allows the user to select either a single choice or multiple choices from a drop-down list or scrolling list. A sample select list is shown here:

    <select name="TV[]"
            multiple
            size="5">
      <option value="1">Gilligan's Island</option>
      <option value="2">Mission: Impossible</option>
      <option value="3">Star Trek</option>
      <option value="4" selected="selected">Monday Night Football</option>
      <option value="5" selected="selected">NCAA March Madness</option>
    </select>

Please note these points about the above code:

Below is some code that shows how select lists work:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Form Example: Select Lists</title>
  <link rel="stylesheet" type="text/css" href="form_samples.css">
</head>

<body>
<div id="mainDiv">
  <form 
    method="post" 
    action="https://www.jimlink.net/PHPStuff/testFormData.php">
    Tell us what TV programs you like to watch:<br>
    <select name="TV[]"
            multiple
            size="5">
      <option value="1">Gilligan's Island</option>
      <option value="2">Mission: Impossible</option>
      <option value="3" selected="selected">Star Trek</option>
      <option value="4" selected="selected">Monday Night Football</option>
      <option value="5">NCAA March Madness</option>
      <option value="6">Survivor</option>
      <option value="7">Mythbusters</option>
      <option value="8">Le Tour de France</option>
      <option value="9">Criminal Minds</option>
    </select>
    <br>
    <span class="explanation">
     (You may individually select multiple items by holding down the Ctrl key while you make
    your selections.
    <br>
    You may select a range of items by holding down the Shift key while
    you select the end of the range.)</span>
    <br>
    <br>
    Now, please select your state of residence:<br>
    <select name="state">
    	<option value="AK">Alaska</option>
    	<option value="AL">Alabama</option>
    	<option value="AR">Arkansas</option>
    	<option value="NC">North Carolina</option>
    	<option value="TX" selected="selected">Texas</option>
    	<option value="VA">Virginia</option>
    	<option value="WA">Washington</option>
    </select>
    <br><br>
    <input type="submit" value="Send the info">
  </form>
</div>
</body>
</html>
and it looks like this in the browser.


Hidden Input

There are times when you need to send information to the Web server or a CGI mail processing program. We won't actually get into that in this class, but just in case you ever get into this situation, you should be aware of the hidden input form field type.

Hidden input fields can go anywhere inside the opening and closing <form>...</form> tags, but most people put them at the top of the form. The values of these fields are sent to the server when the form is submitted, but the user doesn't see them.

Here is a sample of a hidden input field:

  <input type="hidden" name="Field1" value="Some information">
Please note these points about the above code:


Custom Submit Button

You can use an image to create a custom submit button. This form of the submit button's code looks like this:

  <input type="image" src="images/mybutton.gif" 
    name="submitIt" alt="Submit button" title="Submit button">
Please note these points about a custom submit button:


The Reset Button

The reset button is optional. When the user clicks a reset button, the form is cleared of any input that the user may have already typed into the form fields. The reset button code looks like this:

  <input type="reset" value="Clear the form">
Please note these points about the reset button:


Custom Reset Button

There actually is no such thing as a custom reset button, but you can use an image inside a standard anchor (link) tag and tell it to link to the same page that the form is on. This reloading of the form's page effectively resets the form's input. So, for example, if your form is on page myForm.html, this code would function as a custom reset button:

  <a href="myForm.html"><img src="images/myReset.jpg"></a>


Tidying Up Forms

You can lay out your form fields any way that you want to. One way to display the form fields in a neat way is to use a two-column table, like this:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Tidy Form 1</title>
  <link rel="stylesheet" type="text/css" href="form.css">
</head>

<body>
<div id="mainDiv">
  <form 
    method="post" action="https://www.jimlink.net/PHPStuff/testFormData.php">
    <input type="hidden" name="recipient" value="JLink@dcccd.edu">
    <input type="hidden" name="error_page" value="customPage.html">
  <table>
    <tr>
      <td class="Label" width="20%">First Name: </td>
      <td width="80%" class="controls"><input
        type="text"
        name="firstname"
        size="40"
        maxlength="40">
      </td>
    </tr>
    <tr>
      <td class="Label">Last Name: </td>
      <td class="controls"><input
        type="text"
        name="lastname"
        size="40"
        maxlength="40">
      </td>
    </tr>
    <tr>
      <td class="Label">Password: </td>
      <td class="controls"><input
        type="password"
        name="userpassword"
        size="20"
        maxlength="20">
      </td>
    </tr>
    <tr>
      <td class="Label">What is your favorite color? </td>
      <td class="controls">
        <input type="radio" name="colors" value="blue" checked> Blue
        <br>
        <input type="radio" name="colors" value="red"> Red
        <br>
        <input type="radio" name="colors" value="green"> Green
      </td>
    </tr>
    <tr>
      <td class="Label">What is your favorite pet? </td>
      <td class="controls">
        <input type="radio" name="pets" value="dog"> Dog
        <br>
        <input type="radio" name="pets" value="cat"> Cat
        <br>
        <input type="radio" name="pets" value="fish"> Fish
        <br>
        <input type="radio" name="pets" value="none" checked> None
      </td>
    </tr>
    <tr>
      <td class="Label">Please tell us what magazines you read: </td>
      <td class="controls" id="titles">
        <input type="checkbox" name="mags" value="people" checked> People
        <br>
        <input type="checkbox" name="mags" value="digest" checked> Reader's Digest
        <br>
        <input type="checkbox" name="mags" value="TV" checked> TV Guide
        <br>
        <input type="checkbox" name="mags" value="vogue" checked> Vogue
        <br>
      </td>
    </tr>
    <tr>
      <td class="Label">Tell us what TV programs you like to watch:<br>
      	  <span class="explanation">
         (You may individually select multiple items by holding down the Ctrl key while you make
          your selections.
           <br>
          You may select a range of items by holding down the Shift key while
          you select the end of the range.)</span>
      </td>
      <td class="controls">
        <select name="TV"
                multiple
                size="5">
          <option value="1">Gilligan's Island</option>
          <option value="2">Mission: Impossible</option>
          <option value="3">Star Trek</option>
          <option value="4" selected="selected">Monday Night Football</option>
          <option value="5" selected="selected">NCAA March Madness</option>
        </select>
      </td>
    </tr>
    <tr>
      <td class="Label">What state do you live in? </td>
      <td class="controls">
        <select name="state">
          <option value="AK">Alaska</option>
          <option value="AR">Arkansas</option>
          <option value="CO">Colorado</option>
          <option value="DE">Delaware</option>
          <option value="FL">Florida</option>
          <option value="GA">Georgia</option>
          <option value="HI">Hawaii</option>
          <option value="LA">Louisiana</option>
          <option value="MD">Maryland</option>
          <option value="TX" selected="selected">Texas</option>
          <option value="VT">Vermont</option>
        </select>
      </td>
    </tr>	
    <tr>
      <td class="Label">User comments: </td>
      <td class="controls">
        <textarea name="comments" cols="50" rows="4" maxlength="4000">(Type your comments here.)</textarea>
      </td>
    </tr>
    <tr>
       <td colspan="2" class="submitbutton">
         <input class="buttonface" type="submit" value="Send me!">
       </td>
    </tr>
    <tr>
       <td colspan="2" class="submitbutton">
         <input type="image" src="images/SubmitForm.gif" alt="submit">
       </td>
    </tr>
  </table>
  </form>
</div>
</body>
</html>

The stylesheet looks like this:

body
{
  font-family:Arial,sans-serif;
}

#mainDiv
{
	width: 800px;
	margin: 50px auto 0px auto;  /* TRBL syntax */
	text-align: left;
}

.explanation
{
	font-size: 0.7em;
	font-style: italic;
}

table
{
  border:none;
}

td
{
  border:none;
  padding-top: 20px;
}

.submitbutton
{
  text-align:center;
}

.resetbutton
{
  text-align:center;
}

.buttonface
{
  color:red;
  background-color:#FF9;
  border:3px outset blue;
  cursor:pointer;
}

.Label
{
  vertical-align:top;
  text-align:right;
  padding-right: 20px;
  width: 50%;
}

.controls
{
  vertical-align:top;
  text-align:left;
}

#titles
{
  font-style:italic;
}

and the form looks like this in the browser.

Please note these points about the above form code:


Another Tidy Form

Here is another form, which illustrates a few additional features of using tables to format a form. This form uses some CSS rules that illustrate contextual selectors (more on that in a moment...).

Here is the form page, anotherForm.html:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Another Form</title>
  <link rel="stylesheet" type="text/css" href="anotherForm.css">
</head>

<body>
  <div id="mainDiv">
    <form action="https://www.jimlink.net/PHPStuff/testFormData.php" method="post">
    <table id="formTable">
      <tr>
        <td class="Label">First name: </td>
        <td><input type="text" name="Firstname"></td>
      </tr>
      <tr>
        <td class="Label">Last name: </td>
        <td><input type="text" name="Lastname"></td>
      </tr>
      <tr>
        <td class="Label">Gender: </td>
        <td>Male: <input type="radio" name="gender" value="male">
                
            Female: <input type="radio" name="gender" value="female">
        </td>
      </tr>
      <tr>
        <td class="MultiLineLabel Label">Hobbies: </td>
        <td>
          <table id="checkboxes">
            <tr>
              <td>Photography</td>
              <td><input type="checkbox" name="Hobbies" value="Photography"></td>
            </tr>
            <tr>
              <td>Fishing</td>
              <td><input type="checkbox" name="Hobbies" value="Fishing"/></td>
            </tr>
            <tr>
              <td>Reading</td>
              <td><input type="checkbox" name="Hobbies" value="Reading"/></td>
            </tr>
            <tr>
              <td>Movies</td>
              <td><input type="checkbox" name="Hobbies" value="Movies"/></td>
            </tr>
            <tr>
              <td>TV</td>
              <td><input type="checkbox" name="Hobbies" value="TV"/></td>
            </tr>
          </table>
        </td>
      </tr>
      <tr>
        <td class="MultiLineLabel Label">How did you learn of our site? </td>
        <td>
          <select name="LearnedVia" size="4">
            <option value="Radio">Radio</option>
            <option value="TV">TV</option>
            <option value="Magazine">Magazine</option>
            <option value="Online">Online Search</option>
            <option value="YellowPages">Yellow Pages</option>
            <option value="Friend">Friend</option>
            <option value="Co-worker">Co-worker</option>
          </select>
        </td>
      </tr>
      <tr>
        <td class="MultiLineLabel Label">Comments: </td>
        <td>
          <textarea name="Comments" cols="60" rows="5" maxlength="4000">Please give us your comments....</textarea>
        </td>
      </tr>
      <tr>
        <td colspan="2" class="submitButton">
          <input type="submit" value="Send the Info">
        </td>
      </tr>
    </table>
    </form>
  </div>
</body>
</html>

Here is the stylesheet, anotherForm.css:

body
{
  font-family:Arial,sans-serif;
}

#mainDiv
{
	width: 800px;
	margin: 50px auto 0px auto;  /* TRBL syntax */
	text-align: left;
}

.explanation
{
	font-size: 0.7em;
	font-style: italic;
}

.submitButton
{
  text-align:center;
}

.MultiLineLabel
{
  vertical-align:top;
}

#formTable td
{
  padding-top:20px;
}

#checkboxes td
{
  padding-top:0px;
}

.Label
{
  vertical-align:top;
  text-align:right;
  padding-right: 20px;
  width: 50%;
}

You can see the second tidy form here.

Now here is the part about contextual selectors: Notice the last two selectors in the stylesheet. They are both td element selectors. But they are in different contexts. The first td selector is in the context of the formTable id selector. The second td selector is in the context of the checkboxes id selector.

If we didn't limit the rules for the td selectors like this, all of the cells would have 20 px of padding. Nested tables usually inherit the rules applied to the containing (outer) table.

But I don't want padding in the nested table. So by telling the browser to apply 0 px of padding to the cells (td tags) in the context of the checkboxes selector, which is applied to the nested table, we get the desired results.


HTML5 Input Types

As we saw in a previous handout, HTML5 introduced some new type attributes that can be used in <input> tags.

The new type attribute values for the <input> (form) element are:

tel

search

url

email

datetime

date

month

week

time

datetime-local

number

range

color

The idea of these new types is that the browser can provide the user interface, such as a calendar date picker or integration with the user's address book, and submit a defined format to the server. It gives the user a better experience as his input is checked before sending it to the server meaning there is less time to wait for feedback.

In older browsers, your forms will still work, meaning that all of these new types of input tags will degrade gracefully to the default "text" input type. You can use these new types even now, while the rest of the world catches up to the browsers that support HTML5.


HTML5 Attributes

There is an excellest list of attributes which were added to form input tags in HTML5, at W3Schools.com, in the "Attributes" section.

One of the most useful of these new HTML5 attributes is the required attribute. Most browsers now support this attribute. If the user does not provide information in a form field which has this required attribute, the browser will display some sort of message or warning, telling the user to provide the information.

Another really useful new attribute is placeholder. This attribute causes the browser to display a grayed-out "hint" in the input field, which goes away when the user begins to type something into the input field.

The autofocus attribute is very handy, too, and causes the browser to put "focus" on the input field when the page is loaded. When the input field gets "focus", the cursor or selection indicator is placed into that field.