Section 1: Overview
Forms are an inescapable part of web design and development.
- They are used to capture personal data from users, to post information to message boards, to add items to shopping carts, and to update blogs.
A form is a web page, or a segment of a page, that contains special elements called form controls and labels for those controls.
- Users generally "complete" a form by modifying its controls (entering text, selecting menu items, etc.), before submitting the form to an agent for processing (e.g., to a Web server, to a mail server, etc.)
A form element (<form></form>) acts as a container for form controls.
The form element specifies
- The layout of the form (given by the contents of the element and their CSS).
- The program that will handle the completed and submitted form (the action attribute).
- The method by which user data will be sent to the server (the method attribute).
Form controls make up the user interface for the form.
- A form can contain text and markup (paragraphs, lists, etc.) in addition to form controls to provide labels, additional information, structure, etc.
When a user fills out an HTML form, he/she enters information or makes selections using form controls.
Here is a link to the HTML5 specifications on forms and controls.
Form Handlers
Unfortunately, once you start working with HTML forms, you quickly discover that while you can design a form using any HTML editor, you can't make it do anything with HTML.
In order to make a form function as desired, you must have an HTML form handler.
- A form handler is a program that is usually executed on the webserver, although simple JavaScript form handlers may be executed on the client's machine.
- The form handler takes the information entered in the HTML form by the user and does something with it.
What the form handler does depends on the nature and complexity of the HTML form.
- For a simple contact form, the form handler might do nothing except send the information entered to an email address. (Whether tasks like sending mail can actually be done depends on the restrictions imposed by the web server administrator.)
- For a more sophisticated application, the form handler might be a highly complex program that connects to a database and performs a variety of functions.
The form handler is NOT part of the HTML, it is a separate program which must be installed on your webserver.
- As we will see later, the location of the form hander is specified in the HTML form tag via the action attribute.
Section 2: Examples
When the user submits the form (usually by clicking a Submit button), the data is collected from the form and sent to a server, as specified by the form's action, for some sort of form processing. In some cases that form data is manipulated locally by JavaScript.
The first example is an html form that calls a form handler on the server, implemented in a PHP function, to read the user's name and echo it.
Here is a link, and the html code for the form:
<body>
<form action="welcome.php" method="post">
<!--
Notice I use the name attribute here. It is valid for use
with form controls, and the underlying PHP code needs it.
-->
<div>
<label for="firstname">First Name:</label>
<input type="text" placeholder="Enter first name..." name="firstname" >
</div>
<label>
Last Name:
<input type="text" placeholder="Enter last name..." name="lastname" >
</label>
<input class="newLine" title="Click to process the data." type="submit" value="Go!" >
</form>
</body>
Here is the php file for anyone who is interested.
Here is another example, but this time it uses a JavaScript form handler.
The form code appears below, and here is a link. Clicking View Page Source will reveal the HTML code and the JavaScript form handler.
<body>
<form>
<h2>MPH to KPH Converter</h2>
<label for="txtMPH">Enter MPH:</label>
<!--
Notice that I used the id attribute to assign an identifier to
the field. We'll use it later.
-->
<input autofocus id="txtMPH" class="text1" type="text">
<!--
Notice the button's onclick event. It calls the calcKM function
when the button is clicked.
-->
<input id="cmdCalc" type="button" onclick="calcKM();" value="Convert" >
<label for="txtKPH" class="label1">KPH:</label>
<!--
Notice that I used the id attribute to assign an identifier
to the field.
-->
<input id="txtKPH" class="text2" type="text" readonly ="readonly" >
</form>
</body>
Section 3: Form Submission
Web forms are mostly used to capture user entered data and post them back to the server.
- Examples include signup forms, login forms, profile update forms, and many more types of forms.
- Such forms typically include a Submit button and a Reset button.
To let the browser know where to send the content these properties can be added to the <form> tag:
- action = address
- method = "post" or method = "get"
- Example: <form action="welcome.php" method="post">
When the user clicks on the "Submit" button, the content of the form is sent to another file.
- The form's action attribute defines the name of the file (form handler) to send the content to.
- The file defined in the action attribute usually does something with the received input.
- The address is the url of the script the content should be sent to.
- When a form is submitted, all fields on the form are sent to the processing agent designated by the action attribute using the protocol specified by the method attribute.
- The post and get methods are simply two different methods for submitting data to the script.
- Here is an example of a submit button: <input title="Click to process the data." type="submit" value="Go!" >
Form processing will be covered in more detail in INFO 4430.
Example
The demo in Section 2 (link) was actually written for use in INFO 4430, and uses a Submit button to process user input.
- The form action is "welcome.php", which means that the form data is sent to a PHP file called "welcome.php" that uses the php programming language to read the data from the two input fields on the original form, and then displays a new page on which it writes a welcome message to the user.
- The form method is POST, which "hides" form data in the body of the request and is not visible to the user. (GET, on the other hand, sends form data as part of the URL, and users can see it and perhaps corrupt it. That may sound dangerous, but both have their uses. link Be sure to look at the URL after clicking Go!)
Overriding Form Methods
The formmethod attribute can be associated with form controls to override the method attribute on the form element.
The formaction attribute acts similarly.
Section 4: Original Form Tags
Form fields are objects that allow the visitor to enter information - for example text boxes, drop-down menus or radio buttons.
Prior to HTML5, most controls were differentiated by the type attribute of the input element.
-
For example, a text field specified type = "text". Here's an example:
<input type="text" id="txtMPH" >
-
Even things like checkboxes were a special type of the input tag:
<input type="checkbox" id="option1" value="Milk" >
-
Buttons were a type of input tag as well:
<input type="button" id="cmdCalc" value="Convert" >
Some controls, like textareas, have their own tag:
<textarea rows="5" cols="20">A lot of text here</textarea>
Select fields also have their own tag:
<select size="2">
<option value="first option">Option 1</option>
<option value="second option">Option 2</option>
<option value="third option">Option 3</option>
</select>
Control Choices
The following controls have been available in prior versions of HTML and can be added to your forms. Click any control for a pre-HTML5 example and details.
Here are examples of each of the following controls. View Source for code examples.
| Original Form Fields (Click a row for details) |
|||
|---|---|---|---|
| Type | Format | HTML5 Spec | |
| Text field | <input type="text" > | link | |
| Text fields are one line areas that allow the user to input text. | |||
|
HTML Code: <label> Example text field: <input type="text" name="example" > </label> |
|||
| Password field | <input type="password" > | link | |
| Password fields are similar to text fields, with the difference being that what is entered into a password field shows up as dots on the screen in order to prevent others from reading the password on the screen. | |||
|
HTML Code: <label> Example password field: <input type="password" name="pw" > </label> |
|||
| Hidden field | <input type="hidden" name="course" value="INFO2220" > | link | |
| Radio buttons | <input type="radio" > | link | |
Radio buttons are used when you want to let the
visitor select one - and just one - option from a set of alternatives.
The name attribute is used to group the radio buttons together.
(image)
|
|||
|
HTML Code: <label> Example radio buttons: <label><input type="radio" name="radioSet1" value="INFO 1181" checked>INFO 1181</label> <label><input type="radio" name="radioSet1" value="INFO 2220">INFO 2220</label> <label><input type="radio" name="radioSet1" value="INFO 3301>INFO 3301</label> </label> |
|||
| Check Boxes | <input type="checkbox" name="check1" id="option1" value="INFO2220" > | link | |
| Check boxes are used when you want to let the visitor select one or more options from a set of alternatives. | |||
|
HTML Code: <label> Example check boxes: <label> <input type="checkbox" id="option1" name="check1" value="INFO 1181" checked>INFO 1181 </label> <label> <input type="checkbox" id="option2" name="check1" value="INFO 2220" checked>INFO 2220 </label> <label> <input type="checkbox" id="option3" name="check1" value="INFO 3301>INFO 3301 </label> </label> |
|||
| File input field | <input type="file" > | link | |
The file input field creates a field through which users
can upload files from a local computer or network.
|
|||
|
HTML Code: <label> Example file input field: <input type="hidden" name="MAX_FILE_SIZE" value="30000" > <input type="file" name="selectedfile" > </label> |
|||
| Button field | <input type="button" > | link | |
| Input fields with the button type define clickable buttons that are used primarily with JavaScript to activate a script. We will later see that there is a button tag as well. | |||
|
HTML Code: <label> Example button field: <input type="button" value="Example Button" > </label> |
|||
| Submit button field | <input type="submit" > | link | |
| The submit button field is a button that gives the user the option of submitting the form. The value parameter is used to specify the text that appears on the button. When a visitor clicks a submit button, the form is processed according to the form-submission action for the element specified in the action setting (or formaction setting in HTML5) of the <form< tag. | |||
|
HTML Code: <label> Example submit button field: <input type="submit" value="Submit Type" > </label> |
|||
| Reset button field | <input type="reset" > | link | |
| The reset button field is a button that will reset the form fields to their default values with no additional coding required. The button text is specified using the value parameter. | |||
|
HTML Code: <label> Example reset button field: <input type="reset" value="Reset Type" > </label> |
|||
| Image button field | <input type="image" > | link | |
| Image button fields have the same effect as submit buttons. When a visitor clicks an image button, the form is processed according to the form-submission action for the element specified in the action setting (or formaction setting in HTML5) of the <form> tag. These also require a src attribute, like the img tag. | |||
|
HTML Code: <label> Example image button field: <input type="image" alt="image button" src="demos/cisDark.jpg" > </label> |
|||
| Text areas | <textarea cols="x" rows="y"></textarea> | link | |
| Text areas are text fields that can span several lines. You can specify how many columns and rows you want in your text area via the cols and rows settings. The user can enter info into the field. If you specify text between the start and end tag, everything written between these tags will be presented in the text area box. | |||
|
HTML Code: <label> Example text area: <textarea cols="25" rows="5" id="textarea">You can enter several lines here.</textarea> </label> |
|||
| Drop down (select) | <select> </select> | link | |
| HTML drop-downs allow visitors to select an item from
a list. These are also know as select fields or list-boxes. By default only one option can be selected, however you can allow multiple selections by including the word multiple in your select tag. |
|||
|
HTML Code: <label> Example drop down box: <select id="select"> <option value="INFO 1181">INFO 1181</option> <option value="INFO 2220" selected="">INFO 2220</option> <option value="INFO 3301">INFO 3301</option> </select> </label> |
|||
| Button tag | <button> </button> | link | |
| The HTML button tag is used for creating a button within
forms. Although you can also use the <input> tag to create an HTML button, the <button> tag allows you to place HTML between the <button> </button> tags, which enables you to do things you wouldn't normally be able to with the <input> tag. You can specify the type of the button (submit, reset, button) by using the type attribute. |
|||
|
HTML Code: <label> Example button field: <button value="Button Example>Button Element</button> </label> |
|||
Note: To specify the maximum number of characters allowed in the <input> element, use the maxlength attribute. (If the attribute is omitted, then there is no maximum allowed value length.)
Helpful Links
Section 5: Labels
Another aspect of forms that needs to be addressed is labels for form fields. Let's look again at the first example from Section 2:
Notice the labels for the first name and last name input fields.
The label element represents an on-form caption for a form control, and is used to identify or to associate a description with a form control.
Each label element can only be associated with a single form control, while a form control may have several labels associated with it.
In the html form code below, the labels are highlighted:
<body>
<form action="welcome.php" method="post">
<div>
<label for="firstname">First Name:</label>
<input autofocus type="text" placeholder="Enter first name..." name="firstname" >
</div>
<label>
Last Name:
<input type="text" placeholder="Enter last name..." name="lastname" >
</label>
<input title="Click to process the data."
type="submit" value="Go!" >
</form>
</body>
The label element associates a label with a form control. By associating labels with form controls, authors give important hints to users of speech browsers while also allowing visual browsers to duplicate common GUI features.
Each label element is associated with exactly one form control.
The for attribute explicitly specifies the control associated with the label.
- The value of the for attribute must match the value of the associated form control's id or name attribute.
-
In the absence of the for attribute, the label must contain the associated
form control.
- Open the form demo again. Do a View Source, and look at the radio buttons for a more appropriate example of this type of label.
Helpful Links
Section 6: New Elements
HTML5 introduced 5 new elements related to input and forms.
- progress – Represents the progress of the completion of a task.
- meter – Represents a scalar measurement within a known range.
- datalist – Represents a set of option elements that can be used in combination with the new list attribute for input to make dropdown menus. A text box suggests values from the datalist element as a user types, but enables a user to enter a value not in the list.
- output – Displays the results of a calculation.
Here are some examples:
- Here are examples of progress and meter tags. (Chrome)
- More on Cross Browser HTML5 Progress Bars In Depth.
- Here is a discussion of datalists.
- Finally, an example of an output tag.
Section 7: New Input Types
HTML5 includes a variety of new input types to help improve accessibility for browsers and assistive technologies.
- The new input types help to standardize form fields to provide consistency across websites, and assistive technologies can more easily build in support for them.
-
Instead of being limited to text, password, check boxes, etc., HTML5 adds new types.
- datetime-local – For entering a date and time (with no timezone information).
- date – For entering a date with no time zone.
- month – For entering a date with a year and a month, but no time zone.
- time – For entering a time value with hour, minute, seconds, and fractional seconds, but no time zone.
- week – For entering a date that consists of a week-year number and a week number, but no time zone.
- number – For numerical input.
- range – For numerical input, but unlike number, the actual is not important.
- email – For entering either a single email address or a list of email addresses.
- url – For entering a single URL.
- search – To prompt users to enter text that they want to search for.
- tel – For entering a telephone number.
- color – For choosing color through a color well control.
- Mobile accessibility: if your user is browsing with an iPhone and they arrive at a special email input, the iPhone will display a keyboard with the @ symbol provided on the primary screen. If the INPUT is of type "url", the iPhone will display the ".com" button on the primary keyboard screen.
- The following page demonstrates and describe the new types. The page may need to be viewed in Opera if Firefox or Chrome do not yet support these new types. (Note: If they are not supported by a browser, they will behave as regular text fields.)
- See a Ralph Video for more!
Section 8: New Input Attributes
New Input Attributes
HTML5 also introduced several new attributes for the input and form elements.
You can read about all of them here, but we'll emphasize a few of them.
autofocus
- Focuses the input on the element when the page is loaded.
- autofocus can be applied to input, select, textarea, and button.
- In all forms in this course you must be sure that the cursor automatically appears in the initial field.
placeholder
- The placeholder value is displayed in light text until the element gets focus and the user enters some data. It can be specified on input and textarea.
- A placeholder value is used to give users a hint about what sort of data they should enter.
- You can see placeholders in use in the examples in sections 2 and 4.
pattern
- The pattern attribute specifies a regular expression used to validate an input field. For example, if a part number consists of three uppercase letters followed by four digits, we can use the pattern below:
- <input type="text" id="partNumber" pattern="[A-Z]{3}[0-9]{4}" >
- The use of pattern ensure that the field value matches the correct format for a part number.
Others
You can find out more about attributes in HTML5 tutorial- New form attributes.
Section 9: Control Groupings
<fieldset>
The <fieldset> tag is used to group related elements in a form, and draws a box around the related elements.
<legend>
The <legend> tag defines a caption for the <fieldset> element.
Note: there should be no tags between the <fieldset> tag and the <legend> tag.
Here is an HTML - Fieldsets and Legends video and an HTML <fieldset> tutorial and example..
Here is a version of the demo page that we looked at earlier, but this time using fieldsets and legends rather than divs and labels: link
Formatting Tip
It is not uncommon to see forms with multiple form fields that appear on the same line, but setting up the CSS for these forms can be a challenge because the display property of many form fields defaults to block.
Here is an example that demonstrates the use of inline-block to format the form fields correctly. Be sure to View Page Source and look at the CSS.
Section 10: Extra Notes
Section 11: Resources
- Have a Field Day with HTML5 Forms
- Making Forms Fabulous with HTML5 - HTML5 Rocks
- The Current State of HTML5 Forms indicates browser support for the new features.
- HTML5 Form Elements Tutorial
- New Form elements and attributes in HTML5 (Coding Examples)
- quackit HTML 5 <form> Tag
Accessible Rich Internet Applications