Forms

References

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:

method -- required
action -- required

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

The user's computer must have a mail client (e-mail program) installed and configured. The e-mail, in other words, is sent from the client machine, not the server.
The method must be "post".

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:

enctype="text/plain" sends the data in this format, as a plain text e-mail message:
```
FirstName=Nosmo
LastName=King
```
enctype="application/x-www-form-urlencoded" sends the data in this format, as an attachment to the e-mail:
```
FirstName=George&LastName=Bush
```

enctype="multipart/form-data" sends the data in this format, as an attachment to the e-mail:

-----------------------------7d426198503d6
Content-Disposition: form-data; name="FirstName"

Jim
-----------------------------7d426198503d6
Content-Disposition: form-data; name="LastName"

Link
-----------------------------7d426198503d6--

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:

The <input> tag does not have a closing tag. That is, there is no </input> tag. It is a self-closing tag.
The type attribute with its value of "submit" is what tells the browser that this control is a submit button.
The value attribute's value gives the text that you want to display on the submit button itself.
If you don't put a value attribute in the submit button, the text will default to "Submit Query" in Internet Explorer.

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="firstName" size="30" maxlength="50" placeholder="First Name">

Please note these points about the above code:

The <input> tag does not have a closing tag. That is, there is no </input> tag. It is a self-closing tag.
The attribute type="text" is what tells the browser to put a single-line input text box into the form.
The attribute name="firstName" gives the label that will show up as a name for the user's input data, in the e-mail message or in the data that is sent to the server.
Please note that the name attribute is a required attribute in form input fields.
Also please note that the name attribute may not have any spaces in it. It may have possible alphabetic, numeric, and underscore characters; and the first character must be alphabetic.
The attribute size="30" (or whatever size you put) tells the browser how wide (in em units) to make the input box. An em unit is the width of upper-case "M" in the default font, in most browsers.
The attribute maxlength="50" (or whatever value you put) tells the browser how many characters the user can type into the input box. If this value is larger than the size attribute's value, the text will scroll horizontally as the user types.
The attribute placeholder="First Name" tells the user what kind of information they should type into the input field. The short hint is displayed in the field before the user enters a value, and disappears when the user starts to type text into the field.

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="firstName" size="30" maxlength="50"
         placeholder="First Name">
    <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" placeholder="Password">

Please note these points about the above code:

The attribute type="password" is what tells the browser to put a password input text box into the form.
The browser will mask what the user types into this password input box. Instead of the characters that the user types, the browser will display asterisks or circles, depending on the operating system.
But please note carefully that the password is not encrypted when it is sent to the server or to the e-mail client. If you want to safeguard sensitive data such as a password, you will need to arrange with your ISP to use a secure (SSL) connection for the form page itself. A secure connection uses the https:// protocol.

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

You should always make sure that the page which contains the <input type="password"> tag is displayed in a secure connection.

<!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" size="20" maxlength="20"
        placeholder="Password">
    <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" placeholder="Comments"></textarea>

Please note these points about the above code:

The <textarea> tag does require a closing tag (</textarea>).
If you want to put some text into the <textarea> box as the form initially displays, you can put that text between the opening and closing <textarea> and </textarea> tags.
The optional attribute cols="30" (or whatever value you put) tells the browser how wide (in em units) to make the textarea input box.
The optional attribute rows="4" (or whatever value you put) tells the browser how tall to make the textarea input box. Each row's height is the height of the default font, in most browsers.
The optional attribute maxlength="4000" (or whatever value you put) tells the browser how many characters to allow the user to type in, as a maximum number.

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" placeholder="Comments"></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:

The size attribute tells the browser how wide (in em units) to make the text input area of this field.
The browser will automatically display a Browse... button for the user to navigate their file system and select a file.
This field will automatically put the path info to the selected file, into the text input area of the field.
The form itself will not upload the file. You must use some kind of server-side processing to upload the file.

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:

If you want one of the radio buttons to be pre-selected when the form initially displays, you can add the checked property to that choice.
The attribute value="blue" (or whatever value is in the choice that the user selects) is what gets transmitted by the form.
In order for the browser to enforce the user's selecting only one choice at a time, you must give all of the radio button input fields in a set the same name attribute value.

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:

If you want any of the checkboxes to be pre-selected when the form initially displays, you can add the checked property to those choices.
The attribute value="dog" (or whatever value is in the choices that the user selects) is what gets transmitted by the form.
The name attribute looks different than previous samples that we've seen. The square brackets ([ ]) after Pets allow the form to send multiple values to the action page, in what becomes what is called an array in the programming languages that receive the values, such as PHP.

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>Monday Night Football</option>
      <option value="5" selected>NCAA March Madness</option>
    </select>

Please note these points about the above code:

You can allow the user to make multiple selections by adding the multiple property to the <select> tag.
The name attribute looks different than previous samples that we've seen. The square brackets ([ ]) after TV allow the form to send multiple values to the action page, in what becomes what is called an array in the programming languages that receive the values, such as PHP.
To make the select list into a dropdown list, you need to:
- not have a multiple attribute,
- and
  - not have a size attribute, or
  - have a size="1" attribute
in the <select> tag.
The selections themselves are coded with <option> tags.
The value attribute gives the value that will be sent to the server or the e-mail program, for those options (items) that are selected, when the submit button is clicked. (If you do not include a value attribute, the value that will be sent is the text that is contained by the <option> tag; that is, the text that is displayed in the list for that item.)
Any options that you want to be pre-selected when the form initially displays can be coded with the selected attribute.
There is a closing </select> tag.

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>Star Trek</option>
      <option value="4" 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>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:

The name attribute gives the variable name that will be sent to the server or e-mail program.
The value attribute gives the value that will be sent to the server or the e-mail program.
CAUTION: Even though this input field is not displayed in the browser, it is still viewable if the user knows how to use their right mouse button to View Page Source. The tag is in the form even though it is not displayed. DO NOT PUT SENSITIVE INFORMATION in this tag!

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:

This type attribute value "image" automatically tells the browser to make the image into a submit button. This is a nice feature!
The name attribute is required, and identifies this button to the mail-processing program and any scripts that might want to know what button was clicked by the user.
The alt attribute and title attribute work just like they do in a standard <img> tag, and display this text when the user hovers their mouse cursor over the image.
You can also put a width attribute and a height attribute in this tag, just like in a standard <img> tag.

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:

The value attribute gives the text that you want to display on the button.
If you don't put a value attribute in the reset button's tag, Internet Explorer defaults to displaying "Reset" on the 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.

If you do use a two-column table, you should NOTE that accessibility considerations dictate that you put the field's label in the left column. This of course means that the input field will be in the right column.

<!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>Monday Night Football</option>
          <option value="5" 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>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:

Only one button is needed to submit the form. It could be either of the two submit buttons.
The second submit button is an image.

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

url

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 (which is actually a property). 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 (which is actually a property) 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.

Dallas College, Richland Campus Multimedia Learning Center

Forms

References

Introduction to Forms

The <form> Tag

The Submit Button

Stylesheet for Examples

Input Text (Single-Line Input)

Password Input

Textarea (Multiple-Line Input)

File Input

Radio Buttons

Checkboxes

Select Lists

Hidden Input

Custom Submit Button

The Reset Button

Custom Reset Button

Tidying Up Forms

Another Tidy Form

HTML5 Input Types

HTML5 Attributes