Forms are a key component in every facet of the web. Designed to gather data, forms are essential to the acquisition of information. This exercise will help strengthen your understanding of the fundamentals of HTML5 forms.

Share:

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.



07 October 2011

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.

Frequently used acronyms

  • CSS3: Cascading Style Sheet version 3
  • GUI: Graphical user interface
  • HTML5: Hypertext Markup Language version 5
  • IT: Information technology

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

Exercise

Your task is to design the form elements used to create the form shown in Figure 1.

Figure 1. A simple form web page
a page with fields to enter data

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.

  1. Code the form with autocomplete active.
  2. 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.
  3. 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.
  4. The Telephone field should have placeholder text, a pattern to restrict entry, and be required.
  5. The Email address field should have placeholder text and allow multiple entries. This field should also be required.
  6. The Books field should have a data list. You can select the content you would like to list.
  7. The Quantity (Maximum 5) field should have a minimum value of 1 and a maximum value of 5.

Exercise solutions

Follow these solution steps to check your work.

Resources

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=762338
ArticleTitle=Practice: Create a simple HTML5 form
publish-date=10072011