Most Web forms, or at least many fields in most forms, require specifically formatted input. The new HTML5 form and input attributes are intuitive, easy to use, and replace a lot of scripting that was required in HTML 4.01 and previous versions.
Form input is the information a user enters into fields in a Web or client application form.
(To keep things simple, we use the term “Web form” most of the time, but it applies to client application as well.) HTML5 introduces several new form and input element attributes, such as url for entering a single Web address, email for a single email address or a list of email addresses, and search to prompt users to enter text they want to search for. The new attributes make form development much easier than in the past. What used to take a lot of scripting can be accomplished by HTML5 tags.
On the flip side, many of the new attributes are not yet supported by all of the major brows-ers. However, if you use a new element or attribute that isn’t yet supported, the browser “falls back” to an alternate display, a different form of input, or what have you.
HTML5 introduces two new attributes for the form element—autocomplete and novali-date. All attributes for the form element are listed in Table 3-4, with the new attributes indi-cated with a double asterisk.
Check the functionality of any form you create in many different brows-ers during development.
This ensures the ele-ments and attributes you select work as expected or the fall-back method collects accept-able input.
TAKE NOTE
*
Table 3-4
Form element attributes used in HTML5
ATTRIBUTE VALUE DESCRIPTION
accept-charset character_set Specifies a set of character encodings the server accepts
action URL Specifies the Web address to which form data is sent
autocomplete** on Specifies whether autocomplete is on or off
off in a form or input field; can be “on” for specific input fields and “off” for the form, or vice versa
enctype application/x-www- Specifies the encoding type for form data
form-urlencoded when submitting the data to a server;
multipart/ used only for method="post"
form-data text/plain
(continued)
ATTRIBUTE VALUE DESCRIPTION
method get Specifies the HTTP (transmission) method
post used when sending form data; use “get”
for retrieving data and use “post” for storing or updating data or sending email name text Specifies the name of a form, which is used
to reference form data after a form is submitted
novalidate** novalidate A Boolean attribute that specifies that the form data (user input) should not be vali-dated when submitted; HTML5 also allows Boolean attributes to be set by mention-ing the attribute without an equals sign or assigned value
target _blank Specifies where to display the response _self received after submitting the form _parent _blank loads the response in a new,
_top unnamed browser window
_self loads the response in the current
window; this is the default, so it’s use
isn’t required
_parent loads the response in the parent
window (the browser window that opens the form window) attributes do you use for restricting form input?
2.5
HTML5 introduces numerous input element attributes. The attributes for the input element are listed in Table 3-5; new attributes in HTML5 are indicated by a double asterisk.
Table 3-5
Input element attributes used in HTML5
ATTRIBUTE VALUE DESCRIPTION
accept audio/* Specifies file types the server accepts; used video/* only for type="file"
image/*
MIME_type
alt text Specifies alternate text for images; used only for type="image"; commonly used when creating a custom Submit button from your own image file
autocomplete** on Specifies whether autocomplete is on or off
off in a form or input field; can be “on” for specific input fields and “off” for the form, or vice versa
(continued)
ATTRIBUTE VALUE DESCRIPTION
autofocus** autofocus A Boolean attribute, specifies that a control is to be focused, or selected, as soon as the page loads
checked checked Specifies that an input element be pre-selected upon page load; used only for type="checkbox" or type="radio"
disabled disabled Disables an input element
form** form_id Specifies the form (or multiple forms) an input element belongs to
formaction** URL Specifies the Web address of the file that will process the input control when the form is submitted
formenctype** application/x- Specifies the encoding type for form
www-form- data when submitting the data to
urlencoded a server; used only for method=”post”
multipart/
form-data text/plain
formmethod** get Specifies the HTTP (transmission) method
post used for sending form data to a Web
address
formnovalidate** formnovalidate A Boolean attribute that prevents validation when submitting input
formtarget** _blank Specifies a keyword that indicates
_self where to display the response
_parent received after submitting the form _top
framename
height pixels Specifies the height of an input element;
used only with input type="image"
list** datalist_id Refers to a datalist element that contains predefined content to autocomplete input, such as selecting an item from a drop-down list
max** number Specifies the maximum value for an input
date element
min** number Specifies the minimum value for an input
date element
multiple** multiple A Boolean attribute that specifies the user may enter multiple values
pattern** regexp Provides a format (a regular expression) for the input field; the input element’s value is checked against the expression
Table 3-5 continued
(continued)
ATTRIBUTE VALUE DESCRIPTION
placeholder** text Displays a key word or short phrase that describes the expected value of an input field, such as “Email” for an email input field; placeholder disappears when user enters data
readonly readonly Restricts an input field to read-only required** required A Boolean attribute that requires an input
field to be filled out before submitting the form
size number Specifies the width of an input element, in number of characters
src URL Specifies the Web address of the image
used as a submit button; used only for type="image"
step** number Specifies the accepted number of intervals for an input element; can be used with the min and max attributes to create a range of values
For example, you are creating a slider bar for input. If you set step="3", each time the user move the slider, the input value increas-es or decreasincreas-es by 3
type button, checkbox, Specifies the type of input element to display
color, date,
datetime, datetime-local,
email, file,
hidden, image,
month, number,
password, radio,
range, reset,
search, submit,
tel, text, time,
url, week
value text Specifies the value of an input element width pixels Specifies the width of an input element;
used only with input type=”image”
**New in HTML5.
Table 3-5 (continued)
EXPLORING FORM CREATION, INPUT ATTRIBUTES, AND VALUES
To create a form, use the <form> start and end tags. All of the form’s content and fields go between the two <form> tags. Most forms also include the id attribute in the start tag, as follows:
<form id="keyword">
<content and fields>
</form>
The fieldset element is used with many forms to group related elements. The <fieldset>
tag draws a box around individual elements and/or around the entire form, as shown in Figure 3-18.
If the form is included in an HTML document with other items, you can use the <div> tag at the beginning and end of the form to separate it from other content. Using the <div> tag also lets you include inline formatting, if the form uses tags to align fields vertically short and simple and you don’t want to create a CSS style sheet. The <div> tag uses the id attribute and appears before the first <form> tag. The label element displays the label for each field.
An example of the markup for a very simple form is:
<div id="contact-form"
style="font-family:'Arial Narrow','Nimbus Sans L',sans-serif;">
<form id="contact" method="post" action="">
<fieldset>
<label for="name">Name</label>
<input type="text" name="name" />
</fieldset>
<fieldset>
<label for="email">Email</label>
<input type="email" name="email" />
</fieldset>
</form>
</div> <!-- end of contact-form -->
The form is shown in Figure 3-19.
Figure 3-18
The fieldset element groups related elements in a form and adds a border
Now let’s look at some of the new HTML5 attributes and values. Although this section doesn’t address everything listed in Tables 3-4 and 3-5, it does describe and show examples of some of the most commonly used attributes and values.
The required attribute requires information in a field when the form is submitted. The email attribute (shown in the preceding example) requires the user to enter an email address. The browser will alert the user with an error message to fix these issues.
An example of an input element with the required and email attributes is:
<input type="email" required />
To make a form more user-friendly, add placeholder text. Placeholder text is text displayed inside an input field when the field is empty. It helps users understand the type of informa-tion they should enter or select. When you click on or tab to the input field and start typ-ing, the newly entered text replaces the placeholder text. An example of the placeholder attribute is:
<input name="fName" placeholder="First Name" />
The pattern attribute provides a format (a regular expression) for an input field, which is used to validate whatever is entered into the field. For example, let’s say you have a required input field for employee ID. Every employee ID begins with two capital letters followed by four digits. You would use a text input field with the required and pattern attributes to ensure that the field (1) is populated when the user clicks the submit button and (2) con-tains a value that matches the correct format for an employee ID. If the user hovers over the field, the message in the title attribute displays, which you add separately. An example of the pattern attribute is:
<input type="text" id="empID" name="EmployeeID"
required pattern="[A-Z]{2}[0-9]{4}"
title="Employee ID is two capital letters followed by four digits">
You can use the pattern attribute with these <input> types: text, search, url, telephone, email, and password.
Figure 3-19 A very simple form
The datalist element enables you to present the user with a drop-down list of options to select from. Only the options in the list may be selected. Alternately, you could insert type="text" into the input element to create a text box in which the user enters text. The following example lets the user select from one of three countries:
<input id="country" name="country"
size="30" list="countries" />
<datalist id="countries">
<option value="United States">
<option value="Canada">
<option value="United Kingdom">
</datalist>
The search value for the type attribute enables you to create a search feature for a Web page. An example of the markup is:
<form>
<input name="search" required>
<input type="submit" value="Search">
</form>
Finally, the autofocus attribute moves the focus to a particular input field when a Web page loads. An example of autofocus is when you open a search engine Web page and the insertion point automatically appears in the input box so you can type search terms with-out first clicking in the box. An example of the markup to place the focus on a field named fname when a page loads is:
<input type="text" name="fname"
autofocus="autofocus" />
autofocus has historically been handled by JavaScript, and if a user turns off JavaScript in a Web browser, the autofocus feature doesn’t work. To work around this issue, the HTML5 autofocus attribute is supported by all major browsers and behaves consistently across all Web sites.
CREATE A SIMPLE WEB FORM
GET READY. To create a simple Web form, perform the following steps:
1. Using an HTML editor or app development tool and a Web browser, create a simple Web form with the following markup:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Contact Us</title>
</head>
<body>
<div id="contact-form">
<form id="contact" method="post" action="">
<fieldset>
<label for="custname">Name</label>
<input type="text" id="custname" />
<label for="email">Email</label>
<input type="email" id="email" />
<label for="phone">Phone</label>
<input type="text" id="phone" />
<label for="message">Questions or Comments</label>
<textarea name="message"></textarea>
<input type="submit" name="submit" id="submit"
value="Submit" />
</fieldset>
</form>
</div><!-- End of contact-form -->
</body>
</html>
2. Save the file as L3-WebForm-orig.html. The rendered version is shown in Figure 3-20.
Figure 3-20
The beginning of a Web form
3. The Web form looks unstructured. Ideally, you would use CSS to apply alignment, but because you haven’t learned CSS yet, you can apply a workaround to make the fields align vertically. One method is to add <fieldset> start and end tags around each label/input pair. This would align the fields vertically and add boxes around them.
Using opening and closing <p> tags instead of <fieldset> tags would accomplish the same thing but without adding boxes. For this exercise, use the <p> tags.
Figure 3-21 shows the same Web form with <p> tags around the label/input pairs, including the comments field.
4. Add placeholder text to all fields. The result should look similar to Figure 3-22, if viewed in the Mozilla Firefox Web browser.
Figure 3-21
A Web form using <p> tags to align fields vertically
Figure 3-22
A Web form with placeholders added to each field
5. Save the file as L3-WebForm-placeholders.html.
6. Leave the file and editing tool open if you continue to the next exercise during this session.
✚
MORE INFORMATIONTo learn more about HTML5 input element attributes, visit the W3C.org Web site at http://bit.ly/I1PW3P.