HTML5 fundamentals, Part 2: Organizing inputs

Interacting with your visitor

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.

Grace Walker, IT Consultant, Walker Automated Services

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.



31 May 2011

Also available in Chinese Russian Japanese Vietnamese Spanish

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 the control's appropriateness for the given task), there can be no dialogue and, consequently, no potential conversion.

Develop skills on this topic

This content is part of a progressive knowledge path for advancing your skills. See HTML5 fundamentals

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.

Figure 1. Form page layout
Box with a header, form, four fieldsets, and a footer tag.

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
colordatedatetimedatetime-localmonth
weektimeemailnumberrange
searchtelurl  

Table 2 shows the new <input> attributes.

Table 2. New <input> attributes
Input types
autocompleteautofocusformformactionformenctype
formmethodformnovalidateformtargetheightmax
minmultiplepatternplaceholderrequired
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.

Figure 2. The Classical Music Place form
Form with with customer, favorite composer, composers, and upload files sections with various fill-in and drop-down fields.

Click to see larger image

Figure 2. The Classical Music Place form

Form with with customer, favorite composer, composers, and upload files sections with various fill-in and drop-down fields.

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.

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
Customer information fields name, telephone, email address and date.

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
The Date field with a calendar to select dates.

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.

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
The Favorites composer field with a drop-down list of composers.

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
The Composers section with 5 fields, one for each composer, with a drop-down list.

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>

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.

Figure 7. The Upload field
The Upload section with a choose file button.

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     " + 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;
}

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.


Download

DescriptionNameSize
Example HTML, CSS3 and JavaScript files HTML5Forms.zip10KB

Resources

Learn

Discuss

Comments

developerWorks: Sign in

Required fields are indicated with an asterisk (*).


Need an IBM ID?
Forgot your IBM ID?


Forgot your password?
Change your password

By clicking Submit, you agree to the developerWorks terms of use.

 


The first time you sign into developerWorks, a profile is created for you. Information in your profile (your name, country/region, and company name) is displayed to the public and will accompany any content you post, unless you opt to hide your company name. You may update your IBM account at any time.

All information submitted is secure.

Choose your display name



The first time you sign in to developerWorks, a profile is created for you, so you need to choose a display name. Your display name accompanies the content you post on developerWorks.

Please choose a display name between 3-31 characters. Your display name must be unique in the developerWorks community and should not be your email address for privacy reasons.

Required fields are indicated with an asterisk (*).

(Must be between 3 – 31 characters.)

By clicking Submit, you agree to the developerWorks terms of use.

 


All information submitted is secure.

Dig deeper into Web development on developerWorks


static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=1
Zone=Web development
ArticleID=665301
ArticleTitle=HTML5 fundamentals, Part 2: Organizing inputs
publish-date=05312011