In this exercise, you create a simple form using several of the new
<input> tag attributes and types. You create the
nuts and bolts of the form, not the bells and whistles. The objective is to build a
skeleton on which rich Internet applications (RIAs) can be developed, while ensuring
an understanding of the structural and semantic underpinnings of sound HTML5 form
construction.
To perform the tasks required to create the form in this exercise, you should:
- Be familiar with HTML and forms in general
- Understand the semantic fundamentals of HTML5
- Know about the new input types and attributes
Your task is to design the form elements used to create the form shown in Figure 1.
Figure 1. A simple form web page
In addition to looking like the form shown in Figure 1, your form must include the constructs listed in the following instructions. When creating the code for your form, you must use the HTML5 tags that are appropriate to replicate the form and fulfill all the specifications listed.
- Code the form with
autocompleteactive. - Given the image shown in Figure 1, it is easy to see that two field sets are used to create the main structure of the form. Your task is to create the field sets, including the names Customer Info and Books. Don't worry about the content fields for the moment.
- The Name field you create should have
autofocus, placeholder text, and be required. Don't forget to select the appropriate type for this field as well as all the fields that follow. - The Telephone field should have placeholder text, a pattern to restrict entry, and be required.
- The Email address field should have placeholder text and allow multiple entries. This field should also be required.
- The Books field should have a data list. You can select the content you would like to list.
- The Quantity (Maximum 5) field should have a minimum
value of
1and a maximum value of5.
Follow these solution steps to check your work.
-
"HTML5
fundamentals, Part 2: Organizing Inputs" (developerWorks, May
2011) provides an overview of the new types and attributes in HTML5.
-
"Create
modern Web sites using HTML5 and CSS3" (developerWorks, March
2010) is a multi-component 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 today.
-
The W3Schools.com: HTML5
Tag Reference provides an extensive list of HTML5 tags, definitions, and examples.
-
The WHATWG
website provides detailed information for the HTML5 specification.
-
Stay current with developerWorks
technical events and webcasts focused on a variety of IBM products and IT
industry topics.
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
Tags
Use the slider bar to see more or fewer tags.
For articles in technology zones (such as Java technology, Linux, Open source, XML), Popular tags shows the top tags for all technology zones. For articles in product zones (such as Info Mgmt, Rational, WebSphere), Popular tags shows the top tags for just that product zone.
For articles in technology zones (such as Java technology, Linux, Open source, XML), My tags shows your tags for all technology zones. For articles in product zones (such as Info Mgmt, Rational, WebSphere), My tags shows your tags for just that product zone.
Popular article tags |
My article tagsSkip to tags list
Popular article tags |
My article tags