PDF

HTML5 fundamentals, Part 2: Organizing inputs
Interacting with your visitor
Grace Walker
IT Consultant
Walker Automated Services
31 May 2011
HTML5 reflects the monumental changes in the way you now do business on the Web and
in the cloud. This article is the second in a four-part series designed to spotlight changes
in HTML5, beginning with the new tags and page organization and providing high-level
information on web page design; the creation of forms; the use and value of the APIs; and,
finally, the creative possibilities that Canvas provides. This second part introduces the concept
of HTML5 form controls and touches on the role of JavaScript and CSS3.
View more content in this series
Administration, data analysis, marketing strategy, and the other functions of enterprise-level
institutions are all important. However, without a successful digital window that your potential
customer can use—or be motivated to use—the necessary initial processes for the development
of site visitor conversion will be absent. A positive, user-friendly experience that prompts the
interactivity required for your endeavor is a primary institutional goal.
Frequently used acronyms
•
•
•
•
•
API: Application programming interface
CSS3: Cascading style sheet version 3
HTML5: Hypertext Markup Language version 5
IT: Information technology
UTC: Coordinated universal time
The heart of interactivity is the site's forms. They facilitate an interactive exchange with the user
so that the goals that motivated the website's construction can be advanced by converting site
visitors. Forms are the central factor that energizes the interaction between website owners or
agents and the website users, and as such, they are of extreme importance to the design and
development of a site.
The center of that heart is found in the controls—radio buttons, check boxes, text boxes, number
spinners, and the like. These elements are essential to the website users' discourse with the site.
In other words, without fully functional controls (both in "mechanical" operation of the control and
© Copyright IBM Corporation 2011
HTML5 fundamentals, Part 2: Organizing inputs
Trademarks
Page 1 of 15
developerWorks®
ibm.com/developerWorks/
the control's appropriateness for the given task), there can be no dialogue and, consequently, no
potential conversion.
It is imperative that the relationships of the conversion process be carefully considered, including
all aspects of the interaction between the site visitor and the system in place. Speed of validation,
input, cognition, navigation, loading of pages, and how the pages are set up all have an impact
on the conversion process. Validation improvements and enhancements, along with the
extended variety of form control options offered and the general multimedia nature of the HTML5
specifications, are all contributors to HTML5's potency in translating a site visitor into an actual site
user.
HTML5 is an exceptionally vigorous tool for validation and the general assurance of sound
web-based computing—a critical security asset. It is particularly important in the design and
development of websites intended to solicit customers. Therefore, its use is essential to
maintaining a healthy rate of conversion. If you can't draw prospects, you're in trouble; if you can't
convert the prospects you do draw, you're in for a crash landing.
But help is here. HTML5 types, such as email and telephone, facilitate broad communication
options. Combined with the structural clarity imparted by HTML5's semantic foundation, there is no
barrier to a clear dialogue between you and the rest of the world.
Given our net-centric world, the hectic pace of the increasingly stochastic global economy, the
rapid development of cloud computing, the exponential growth in the use of mobile technology,
and cross-platform telecommunications solutions—both commercial and social—it is clear that we
stand on the threshold of a brave new world of web-based computing and communication. It is a
world that is both a function and a derivative of the evolving marriage between the many elements
of communication and IT as well as the needs of a highly competitive global society.
Designing the form
In HTML5, forms have been given a major refurbishing. Several tasks that previously required
JavaScript coding can now be easily performed without it. This article's form example analyzes the
use of the HTML5 suite of form innovations. The first step in the process is, of course, planning the
form.
The layout of the form example you will develop is shown in Figure 1. You will develop three areas
for the form page: the Header area, the Form area, and the Footer area. The Header area includes
the page heading and subheading wrapped in the <header></header> tags. At the bottom of the
page, the Footer area contains the copyright information inside the <footer></footer> tags. I
discussed the construction of a Header area and a Footer area in the example provided in part 1 of
this series: If you are unfamiliar with the <header> and <footer> tags, refer to that article.
HTML5 fundamentals, Part 2: Organizing inputs
Page 2 of 15
ibm.com/developerWorks/
developerWorks®
Figure 1. Form page layout
This forms discussion focuses on four tags:
•
•
•
•
<form>
<fieldset>
<label>
<input>
In HTML5, two new attributes have been added to the <form> tag: autocomplete and novalidate.
The autocomplete attribute enables the drop-down suggestion lists that appear on sites like
Google. The novalidate attribute turns validation off for a form, which is valuable during testing.
The <fieldset> tag has three new attributes: disable, name, and form. The disable attribute
deactivates the <fieldset>. The name attribute sets the name for the <fieldset>. The form
attribute value is the ID of the form or forms to which the <fieldset> belongs. In HTML5, a
<fieldset> can be outside of the form or forms to which it belongs. When a <fieldset> is placed
outside of the form, you must set the form attribute of the <fieldset> tag so the <fieldset> can be
associated with the correct form or forms.
The <label> tag, which defines a categorization for an input element, has one new attribute: form.
The form attribute value is the ID of the form or forms to which the <label> belongs. The <label>
tag can also be placed outside of the form, so the form attribute here is also used to associate the
<label> with the appropriate form.
The <input> tag has several new types as well as attributes that enhance the usability of the
form. HTML5 has introduced a number of new input types designed to organize and categorize
data, replicating the overall semantic approach of HTML5. The old adage that form should follow
function is an appropriate one to describe HTML5 forms functions.
In HTML5, the form <input> field can be outside of the <form> tags. The form attribute identifies
the form or forms to which the input field belongs. It also identifies the form that it belongs to by
referring to the ID of the form. Table 1 shows the new <input> types.
Table 1. New <input> types
Input types
color
date
datetime
datetime-local
month
week
time
email
number
range
HTML5 fundamentals, Part 2: Organizing inputs
Page 3 of 15
developerWorks®
search
ibm.com/developerWorks/
tel
url
Table 2 shows the new <input> attributes.
Table 2. New <input> attributes
Input types
autocomplete
autofocus
form
formaction
formenctype
formmethod
formnovalidate
formtarget
height
max
min
multiple
pattern
placeholder
required
step
During web page creation, you use most of these types and attributes.
Creating the form
The web page shown in Figure 2 is for The Classical Music Place, a site that has the works of
several composers for download. It also allows aficionados of classical compositions to upload
their recordings of classical pieces. This is the page you're going to create.
HTML5 fundamentals, Part 2: Organizing inputs
Page 4 of 15
ibm.com/developerWorks/
developerWorks®
Figure 2. The Classical Music Place form
The form's structure begins with the <form> tag. In this example, you use the new autocomplete
attribute, shown here:
<form id="orderForm" autocomplete="on"
action="javascript:alertValues();" method="get">
A JavaScript action is contained in the <form> tag, as well, which I'll discuss in a later section.
HTML5 fundamentals, Part 2: Organizing inputs
Page 5 of 15
developerWorks®
ibm.com/developerWorks/
The <form> tag contains four <fieldset> tags, visually outlined by the gray areas in Figure 2:
Name, Telephone, Email address, and date. The <fieldset> tag groups like content on the form.
Let's look at each <fieldset> separately.
First <fieldset> tag
The first <fieldset> tag contains customer information (see Figure 3). It has a Name field, a
Telephone field, an Email address field, and a Date field. The Name field has an autofocus
attribute, which lets you start entering text without having to click in the field.
Figure 3. Customer information fields
The first <fieldset> contains a <legend>, a <label>, and an <input> tag, as shown in Listing
1. The Name field, which is type text, has three of the new <input> attributes: placeholder,
autofocus, and required.
Listing 1. The Name field
<fieldset>
<legend> Customer Info </legend>
<p>
<label>Name:
<input id="name" name="name" type="text" placeholder="Enter your name"
autofocus required size="50">
</label>
</p>
The autofocus ensures that the input focus will be on this field when the page opens. This is a
function that causes the page to focus as soon as it loads, allowing the user immediate access to
the form.
The placeholder attribute puts the text between the quotations marks into the field in a muted gray
text. The placeholder attribute should tell the user what the field must contain and is displayed
when the field is empty. However, because the Name field also has autofocus set, when you
enter the page, you can't actually see the text. Note that in Figure 3, the Name field does not
display the placeholder, and it is framed in a yellow highlight. If you move to another field without
entering data, the placeholder text will be displayed. When you use the autofocus attribute with the
placeholder attribute, the placeholder text disappears because of the activated focus in the field.
HTML5 fundamentals, Part 2: Organizing inputs
Page 6 of 15
ibm.com/developerWorks/
developerWorks®
The required attribute facilitates the mandatory population of a field as a precondition to the
submission of the form. This is valid for text, search, URL, telephone, email, password, date
pickers, number, check box, radio button, and file fields.
The Telephone field, which is type tel, has the attributes required, placeholder, size, and
pattern, as shown in Listing 2. The tel type is a text field designed to contain telephone numbers.
In the example, the telephone has a pattern restriction that must be strictly observed, because the
system will not let you submit until you use the right pattern of characters. The placeholder for the
telephone holds the pattern against which your input is matched.
The pattern emulates the functions of a traditional JavaScript regular expression (regex). The input
has to match the defined pattern structure of the regex before it can be validated. It works with
text, search, url, telephone, email, and password types.
Listing 2. The Telephone field
<p>
<label>Telephone:
<input id="tel" name="telephone" type="tel" placeholder="Pattern: 1-234-567-8910"
required size="50" pattern="([0-9]{1}(-[0-9]{3})(-[0-9]{3})(-[0-9]{4}))">
</label>
</p>
The Email address field is type email, as shown in Listing 3.The email address is automatically
validated without having to use a pattern: The validation is part of HTML5. If the email address is
not presented in the appropriate format, the form cannot be submitted.
Listing 3. The Email address field
<p>
<label>Email address:
<input id="email" name="email" type="email" placeholder="Enter your email address"
required size="50">
</label>
</p>
The last entry in this <fieldset> is the Date field. The date type provides a calendar picker for
date selection in the Opera browser but creates a spinner in Google Chrome, as seen in Figure 3.
Figure 4 shows the Opera rendition of the web page with the Date field picker displayed. Note that
in Opera, the corners of the field set are not rounded, even though the same style sheet was used
that rounded the corners in Chrome.
HTML5 fundamentals, Part 2: Organizing inputs
Page 7 of 15
developerWorks®
ibm.com/developerWorks/
Figure 4. The Date field
Listing 4 shows the code used to create the date picker.
Listing 4. The Date field
<p>
<label>Date: <input type="date">
</label>
</p>
</fieldset>
You can generate a report for any date. You can even break it down to the hour. Here are the date
types that you can create:
•
•
•
•
•
•
date. Selects date, month, and year
month. Selects month and year
week. Selects week and year
time. Selects time (hour and minute)
datetime. Selects time, date, month, and year (UTC time)
datetime-local. Selects time, date, month, and year (local
time)
Second <fieldset> tag
The second <fieldset> tag contains an <input> tag with a list attribute and a <datalist> tag.
The list attribute specifies an input field's <datalist>. The <datalist> tag provides a list of input
field options. The list attribute works with these <input> types: text, search, url, telephone,
email, date pickers, number, range, and color.
HTML5 fundamentals, Part 2: Organizing inputs
Page 8 of 15
ibm.com/developerWorks/
developerWorks®
The <datalist> is displayed in a drop-down list, as shown in Figure 5. This image was taken in
Opera. In Chrome, this list is displayed as a simple text box. The user would not be presented with
the list.
Figure 5. The Favorites field
Listing 5 provides the field set that creates the Favorite Composer section.
Listing 5. The Favorite Composer field
<fieldset>
<legend> Favorite Composer </legend>
<p>
<label>
<input type="text" name="favorites" list="composers">
<datalist id="composers">
<option value="Bach">
<option value="Beethoven">
<option value="Brahms">
<option value="Chopin">
<option value="Mendelssohn">
</datalist>
</label>
</p>
</fieldset>
Third <fieldset> tag
The third <fieldset> tag displays a list of composers, followed by a number field that designates
how many works are available for each of the listed composers. Figure 6 shows the section.
Figure 6. The Composers fields
For example, Bach has five works, and Beethoven has 10 works. Listing 6 shows the maximum
values for each composer. The number field will not accept more than the maximum value when
HTML5 fundamentals, Part 2: Organizing inputs
Page 9 of 15
developerWorks®
ibm.com/developerWorks/
you submit the form. When submitted, this field responds to incorrect, out-of-scope values by
prompting you to correct the input so that it complies with the acceptable numeric limits of the field.
The number type creates a spinner field for input. The min, max, and step are used with the number
type. The default step value is 1. The min, max, and step attributes are used with number, range,
or date picker input constraints. The max attribute determines the maximum value permitted for the
input field. The min attribute determines the minimum value permitted for the input field. The step
attribute determines the valid numeric increment.
Listing 6. The composer fields
<fieldset>
<legend>Composers</legend>
<p>
<label>
Bach: <input name="form_number" id="form_number" type="number" min="1" max="5" >
</label>
</p>
<p>
<label>
Beethoven: <input name="form_number" id="form_number" type="number"
min="1" max="10" >
</label>
</p>
<p>
<label>
Brahms: <input name="form_number" id="form_number" type="number" min="1" max="7" >
</label>
</p>
<p>
<label>
Chopin: <input name="form_number" id="form_number" type="number" min="1" max="10" >
</label>
</p>
<p>
<label>
Mendelssohn: <input name="form_number" id="form_number" type="number"
min="1" max="4">
</label>
</p>
</fieldset>
Fourth <fieldset> tag
The fourth <fieldset> tag contains the <input> type file and the attribute multiple, as shown in
Figure 7. The multiple attribute specifies that an input field can select multiple values from a data
list or file list. In the example, a user can select multiple files for uploading.
HTML5 fundamentals, Part 2: Organizing inputs
Page 10 of 15
ibm.com/developerWorks/
developerWorks®
Figure 7. The Upload field
The code for the file type and multiple attribute is shown in Listing 7.
Listing 7. The Upload field
<fieldset>
<legend> Upload file(s) </legend>
<p>Upload one of your orchestra's file(s) for inclusion in our library</p>
<p><label>
<input type="file" multiple="multiple" />
</label>
</p>
</fieldset>
The Submit button uses the height and width attributes, as shown in Listing 8. You use these
attributes to set the height and width of the image input type. When you set these attributes, the
page's spatial area for the image is fixed by the constraints imposed by the preset width and height
dimensions, which facilitates the page loading by enhancing the efficacy of the page rendering.
Listing 8. The Submit button
<input type="image" src="submitbutton.png" alt="Submit" width="100" height="45" />
</form>
JavaScript and CSS3
No HTML5 rendition can be accomplished without CSS3. And, although HTML5 has negated the
need for some JavaScript coding, JavaScript is still a valuable tool. Following are the JavaScript
code and CSS3 file used to create the example form.
The JavaScript code is a simple alert box that returns the three required fields, as shown in Listing
9. Although the JavaScript code used here is only one line, it has been placed in a separate
JavaScript file, following best practices for its use.
Listing 9. Example form JavaScript code
function alertValues()
{
alert("Customer information: " + "\n
+ tel.value + "\n
}
" + fullname.value + "\n
" + email.value);
HTML5 fundamentals, Part 2: Organizing inputs
"
Page 11 of 15
developerWorks®
ibm.com/developerWorks/
Listing 10 shows the CSS3 code that formats the example form. The <header> and <footer>
information is not included here.
Listing 10. Example form CSS3
form {
width: 550px;
margin: 0 0 0 0 ;
padding: 50px 60px;
background-color: #2d2d2d;
border-radius: 20px;
}
fieldset {
padding: 0 20px 20px;
margin: 0 0 30px ;
border: 2px solid #ffffff;
background: #B8B8B8 ;
border-radius: 10px;
}
legend {
color: #ffffff;
background: #990033;
font-size: 0.9em;
font-weight: bold;
text-align: left;
padding: 5px;
margin: 0;
width: 10em;
border: 2px solid #660033;
border-radius: 5px;
}
label {
display: block;
float: left;
clear: left;
text-align: left;
width: 100%;
padding: .4em 0 0 0;
margin: .15em 0 0 0;
}
Conclusion
The key to tangible individual and agency success is communication. Form controls and general
page construction guidelines are critical to this process, and HTML5 has provided a quiver of
exceptionally powerful tools appropriate for the task. Those who are prepared for the future—
which is here now—will benefit; those who are not will be severely buffeted by the pace and
demands of the one-Web-world, netcentric, global society.
HTML5 fundamentals, Part 2: Organizing inputs
Page 12 of 15
ibm.com/developerWorks/
developerWorks®
Downloads
Description
Name
Size
Example HTML, CSS3 and JavaScript files
HTML5Forms.zip
10KB
HTML5 fundamentals, Part 2: Organizing inputs
Page 13 of 15
developerWorks®
ibm.com/developerWorks/
Resources
• Create modern Web sites using HTML5 and CSS3 (developerWorks, March 2010) is a
multicomponent HTML5 and CSS3 tutorial.
• In New elements in HTML 5 (developerWorks, August 2007), you will find information for
several of the new elements in HTML5.
• The <html>5doctor website provides an excellent view of the current trends in HTML5.
• The W3Schools.com HTML5 Tag Reference provides an extensive list of the HTML5 tags,
definitions, and examples.
• The WHATWG website provides detailed information for the HTML5 specification.
• The Web development zone specializes in articles covering various Web-based solutions.
• Stay current with developerWorks' technical events and webcasts.
• developerWorks on-demand demos: Watch demos ranging from product installation and
setup for beginners to advanced functionality for experienced developers.
• Follow developerWorks on Twitter.
• Create your developerWorks profile today and set up a watchlist on HTML. Get connected
and stay connected with developerWorks community.
• Find other developerWorks members interested in web development.
• Share what you know: Join one of our developerWorks groups focused on web topics.
• Roland Barcia talks about Web 2.0 and middleware in his blog.
• Follow developerWorks' members' shared bookmarks on web topics.
• Get answers quickly: Visit the Web 2.0 Apps forum.
• Get answers quickly: Visit the Ajax forum.
HTML5 fundamentals, Part 2: Organizing inputs
Page 14 of 15
ibm.com/developerWorks/
developerWorks®
About the author
Grace Walker
Grace Walker, a partner in Walker Automated Services in Chicago, Illinois, is an IT
consultant with a diverse background and broad experience. She has worked in IT
as a manager, administrator, programmer, instructor, business analyst, technical
analyst, systems analyst, and Web developer in various environments, including
telecommunications, education, financial services, and software.
© Copyright IBM Corporation 2011
(www.ibm.com/legal/copytrade.shtml)
Trademarks
(www.ibm.com/developerworks/ibm/trademarks/)
HTML5 fundamentals, Part 2: Organizing inputs
Page 15 of 15