![Close [x]](http://dw1.s81c.com/i/c.gif){kind=small}
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.
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 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.
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.
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
color | date | datetime | datetime-local | month |
week | time | email | number | range |
search | tel | url |
Table 2 shows the new <input>
attributes.
Table 2. New <input> attributes
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.
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.
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.
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.
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.
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.
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 yearmonth. Selects month and yearweek. Selects week and yeartime. Selects time (hour and minute)datetime. Selects time, date, month, and year (UTC time)datetime-local. Selects time, date, month, and year (local time)
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.
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>
|
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 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>
|
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.
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> |
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 " + fullname.value + "\n "
+ tel.value + "\n " + email.value);
}
|
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;
}
|
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.
| Description | Name | Size | Download method |
|---|---|---|---|
| Example HTML, CSS3 and JavaScript files | HTML5Forms.zip | 10KB | HTTP |
Information about download methods
Learn
-
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.
Discuss
- 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.
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.
Table of contents
Next steps from IBM
Learn more, join the cloud community
