HTML5 – HTML5 Forms: Creating Forms Using HTML5 Tags

Let’s talk about the 13 form creation tags for HTML5 next; three are new to HTML5 and ten work in HTML5 and HTML legacy versions. They allow developers to create different types of form-based content, using a form container with data entry (or data input) fields along with advanced user interface controls in the form, such as buttons and drop-down lists that can make your forms interactive. These more specialized form-related tags allow HTML5 developers to define forms for their document with a significant amount of flexibility, using more than a dozen powerful tags. The form tags talk to the server-side processing component in most circumstances, so we are only going to cover the client-side form design HTML5 markup component in this process. For server-side processing, make sure to get a book on PHP, JSF, Drupal, Joomla, AJAJ, or AJAX at the Apress website (
www.apress.com
).

In this chapter, you look at forms tags related to implementing forms content in HTML, as all of these tags are supported in HTML5, and many in earlier versions of HTML. These tags include a form <form>, label <label>, input <input>, text area <textarea>, field set <fieldset>, legend <legend>, select <select>, options <option> and option group <optgroup>, button <button>, data list <datalist>, key generator <keygen>, and the output <output> tag that allows you to in-line calculations.

HTML5 Form Tags: Interactive Information

This chapter covers the 13 text-related form tags supported in HTML5, which create interactive forms to collect information. These are usually designed in a grid configuration, or even styled similar to a table. Ten of these tags are supported in legacy versions of HTML, and three of them are new to HTML5. These form tags would also optimally be utilized as child tags of the semantic tags covered in Chapter 10, so that the form-based content is encapsulated (or wrapped) into standardized semantic containers. Form data can also be semantic; it can be assimilated using semantic search, as the forms-related tag names describe what a form element defined by that tag does, and therefore what it represents to the content.

Table 15-1 shows 13 form tags supported in HTML5; ten of them are supported in legacy HTML versions.

Table 15-1. Thirteen HTML Forms Design Content

Publishing Tags

HTML Form Creation Tag	HTML Form Creation Tag’s Purpose or Usage
form	Defines a form
input	Defines an input (data field)
label	Defines an input (field) label
textarea	Defines text area (multi-line input field)
fieldset	Defines a fieldset (group of input fields)
legend	Defines a legend (label) for a fieldset
select	Defines a drop-down list
option	Defines an option in drop-down list
optgroup	Defines an option group in drop-down list
button	Defines a button
datalist (new in HTML5)	Pre-defined option list for input controls
keygen (new in HTML5)	Defines a key-pair generator field in form
output (new in HTML5)	Defines output (a result of a calculation)

Let’s take a look at these form creation tags in logical sections, in the same way that they are arranged in this table, starting with core HTML5 form tags <form>, <label>, and <input>. These define important form characteristics or components to an HTML5 rendering engine. For this reason, these form tags should also be considered semantic search tags. As such, it is important these tags are implemented correctly for forms.

Basic HTML Form Creation: Form, Label, and Input

The top-level form tags define the form itself include the form <form> tag, which is utilized as the parent container for the form, and the <label> and <input> child tags, which specify form labels and data input fields.

The FORM Tag: The Core Tag Used to Create the Form Element

A <form> tag

defines the HTML form construct, which is used for obtaining user data input. An HTML form, at a bare minimum, must consist of this <form> element, as well as one or more of the elements seen in Table 15-1.

Two <form> element parameters were introduced in HTML5, autocomplete and novalidate, and six HTML parameters are still supported. One is no longer supported, as shown in Table 15-2.

Table 15-2. Nine <form> Parameters Used for Form Configuration

HTML5 Form Tag Parameter	HTML5 Form Tag Parameter’s Usage
accept (no HTML5 support)	Specifies a comma-separated list of file types that a server accepts, which is submitted through a file upload process
autocomplete (New in HTML5)	Specifies autocomplete on or off for form
novalidate (New in HTML5)	Specifies a form should not be validated
accept-charset	Specifies character encodings that are specified for use for a form submission
action	Specifies where to submit the form data
enctype	Specifies how form data should be encoded
method	Specifies HTTP method to use ( get or post)
name	Allows you to specify the form name
target	Specifies where to display the response is received after submitting the form ( _blank, _parent, _self, _top)

As you see in this chapter, all the other form tags are
child tags

of <form>. The following HTML creates an empty form:

<!DOCTYPE html><html>
<head>
 <title>Empty Exotic Car Preference Form</title>
</head>
<body>
 <section >
  <form action="myForm.asp" method="get" autocomplete="on" novalidate>              
    <!-- Your Form Design and Child Tags will be nested in here -->
  </form>              
  <p>Form data will be sent to a page on the server called "myForm.asp"</p>
 </section>
</body>
</html>

This <form> tag defines the myForm.asp for the form data submission, defines an HTTP “get” method for the server to read the data from the client form, sets the autocomplete feature to “on” and sets the novalidate feature

to “true” by including the novalidate parameter itself inside of the opening <form> tag.

Next, let’s take a look at how to use the input <input> tag, to get data input from the person filling out your form.

The INPUT Tag: Adding Data Input Fields to the Form

The <input> tag

is used as a child tag to define DATA input areas for users to enter text. These are commonly called fields in forms and in databases. This tag has so many parameters that I am going to include two tables: one has the parameters that are new to HTML5 and the other has parameters that are not supported in HTML5. There are also those parameters that work in both HTML5 and legacy HTML versions. We’ll get to parameters after a short example of using two <input> child tags in a parent <form> tag.

Let’s use <input> tags to ask our users to enter the car manufacturer and model they prefer, as shown in the following markup:

<!DOCTYPE html><html>
<head>
  <title>My Exotic Car Preference Form with Two Input Fields</title>
</head>
<body>
 <section >
  <form action="myForm.asp" method="get" autocomplete="on" novalidate>
  Manufacturer: <input type="text" name="manufacturer" value="Ferrari"><br>
  A Model Name: <input type="text" name="model-name" value="LaFerrari"><br>
  </form>
  <p>Please enter favorite exotic car manufacturer and model name above!</p>
 </section>
</body>
</html>

Parameters specify text input, field name, and a default value. The autocomplete=“on” parameter tells the browser that it is allowed to predict or guess the data value that the user is typing in currently. When

a user starts to type in a field, the browser should display options to fill in the field, based on earlier typed values, or on pre-defined input. You see how this pre-defined input is defined a bit later on in the chapter when we cover the <datalist> tag, which is used to define a list of data elements. It is used with the autocomplete parameter (and function) to greatly enhance the user experience of your form design by giving the appearance of an “artificial intelligence” on the part of the form, which give the users feedback as to what the field in a form is looking for from them.

Table 15-3 lists

the 19 new HTML5 <input> tag parameters.

Table 15-3. HTML5 <input> Parameters Used in Form Configuration

HTML5 Input Tag Parameter	HTML5 Input Tag Parameter’s Usage
autocomplete	Specifies autocomplete on or off for input
autofocus	Specifies autofocus for input on page load
dirname	Specifies respect text direction for input
form	Specifies a form that the input belongs to
formaction	Specifies URL that the form is processed at
formenctype	Specifies encoding (for submit or image)
formmethod	Specifies HTTP method to use ( get or post)
formnovalidate	Specifies input should not be validated
formtarget	Specifies where to display the response
height	Specifies the height for the input element
list	Specifies datalist containing input options
max	Specifies a maximum value for input element
min	Specifies a minimum value for input element
multiple	Specifies more than one value for an input
pattern	Specifies the “regular expression” that an <input> element value is checked against
placeholder	Specifies a short hint, describing expected value to be entered in an <input> element
required	Specifies an input field as being required
step	Specifies legal number intervals for input
width	Specifies the width for the input element

Table 15-4 lists 11 legacy HTML <input> tag parameters.

Table 15-4. HTML <input> Parameters Used in Form Configuration

HTML Input Tag Parameter	HTML Input Tag Parameter’s Usage
align (Not in HTML5)	Specifies the alignment of an image input; only for type=“image” ( left, right, top, middle, bottom)
accept	Specifies the types of files that a server accepts; only for type=“file” (audio/type, video/type, image/type)
alt	Specifies alternate text for images; this is only for type=“image”
checked	Specifies input element pre-selected after the pageload; this is for type=“checkbox” or for type=“radio” (radio buttons)
disabled	Specifies <input> element should be disabled
maxlength	Specifies maximum characters in input field
name	Specifies the input field (element) name
readonly	Specifies that input field is read-only
size	Specifies input field width in characters
src	Specifies a URL for an image to use as a submit button; only used for type=“image”
type	Specifies a type of input element to display
value	Specifies the input element default value

The align parameter isn’t supported in HTML5 because it is done with CSS3. These other 11 parameters are supported in both HTML5 and in earlier (legacy) versions of HTML.

Let’s add a limit to the number of characters that your user is allowed to use to designate a car brand and model name:

<form action="myForm.asp" method="get" autocomplete="on" novalidate>
 Manufacturer:
 <input type="text" name="manufacturer" value="Ferrari" maxlength="16"><br>
 A Model Name:
 <input type="text" name="model-name" value="LaFerrari" maxlength="24"><br>
</form>

This maxlength parameter

allows you to control the width for text data fields, so that you can have a compact form design, and limit a user to a reasonable character data length.

Let’s add autofocus to the first data entry field so the user has their cursor in the correct data field, ready to type:

<form action="myForm.asp" method="get" autocomplete="on" novalidate>
  Manufacturer:
  <input type="text" name="manufacturer" value="Ferrari"
         maxlength="16" autofocus><br>
  A Model Name:
  <input type="text" name="model-name" value="LaFerrari" maxlength="24"><br>
</form>

Now let’s “wire” the input fields to the form they’re in by using the name attribute inside the <form> tag, and the form attribute in the <input> tag, referencing the same characters:

<form name="carpreferenceform" action="myForm.asp" method="get"              
      autocomplete="on" novalidate>
  Manufacturer:
  <input type="text" name="manufacturer" value="Ferrari"
         maxlength="16" form="carpreferenceform" autofocus><br>
  A Model Name:
  <input type="text" name="model-name" value="LaFerrari"
         maxlength="24" form="carpreferenceform"><br>
</form>

Notice that since I have a method=“get” inside of my <form> tag, that I don’t have to use formmethod=“get” inside of each <input> tag. For design purposes, I can also define width and height in pixels for these data fields as well:

<form name="carpreferenceform" action="myForm.asp" method="get"
      autocomplete="on" novalidate>
  Manufacturer:
  <input type="text" name="manufacturer" value="Ferrari"   height="24"              
         maxlength="16" form="carpreferenceform" autofocus width="128"><br>
  A Model Name:
  <input type="text" name="model-name" value="LaFerrari" height="24"              
         maxlength="24" form="carpreferenceform"         width="128"><br>
</form>

I’m not going to

cover 30 parameters for the <input> element in detail here, because some of these are self-explanatory, some are seldom used, and others are used in conjunction with the server side of the form processing, which is likely a different team member that is specifying what parameters to use!

Next, let’s take a look at the <label> tag. This allows you to label the <input> elements, especially those that use a type parameter,

to designate something other than a data field, such as a radio button, GUI button, or check box, for instance.

The LABEL Tag: Fixed Text Label Definitions for Input Elements

Whereas an <input> tag is an empty
tag

and contains no content, only parameters, a <label> tag can contain a descriptive label, in between the <label> and </label> opening and closing tags. The <label> tag is specifically used to define a label for a related <input> element. This <label> tag does not render as anything special for the user other than a text label. However, it does provide a user experience improvement for touchscreen and mouse users, because if the user touches or clicks text specified using this <label> element, it toggles the input (control) element specified by the <input type=”control-name”>.

There are only two parameters for this <label> tag; the form parameter, which you have seen with the <input> tag, which “wires” the <label> to a <form>, and the for parameter, which wires the <label> to the <input> itself, using an id parameter.

The for parameter for the <label> tag should be equal to the id attribute for the related <input> element, to bind them together. This is shown in the

following HTML5 markup example:

<!DOCTYPE html><html>
<head>
  <title>My Exotic Car Preference Form using Six Radio Buttons</title>
</head>
<body>
 <section id="exotic car preference form">
  <form name="carform" action="myForm.asp" method="get" novalidate>
   <label for="ferrari">Ferrari</label>
   <input type="radio" name="cartype" form="carform" id="ferrari"
          value="Ferrari Brand Selected" /><br>
   <label for="maserati">Maserati</label>
   <input type="radio" name="cartype" form="carform" id="maserati"
          value="Maserati Brand Selected" /><br>
   <label for="bugatti">Bugatti</label>
   <input type="radio" name=cartype" form="carform" id="bugatti"
          value="Bugatti Brand Selected" /><br>
   <label for="laferrari">Ferrari</label>
   <input type="radio" name="carmodel" form="carform" id="laferrari"
          value="Ferrari La Ferrari Model Selected" /><br>
   <label for="grancabrio">GranCabrio</label>
   <input type="radio" name="carmodel" form="carform" id="grancabrio"
          value="Maserati GranCabrio Model Selected" /><br>
   <label for="chiron">Chiron</label>
   <input type="radio" name=carmodel" form="carform" 
          value="Bugatti Chiron Model Selected" /><br>
   <input type="submit" value="Please Submit My Choices" form="carform" />
  </form>                                  
  <p>Please select your favorite exotic car manufacturer and model name</p>
 </section>
</body></html>

This time we are using radio buttons to designate a user selection of their favorite car manufacturer, and favorite car. The radio buttons are grouped by name, so that you can’t select more than one, and are wired to the form and input described earlier using
form

and for parameters respectively. The value you provide is what is sent to the server (or e-mail address) when the form is submitted using the <input type=“submit”> tag, which is used for a simple Submit button. Complex buttons are covered later in this chapter. Next, let’s take a look at larger areas of form data entry such as text areas or paragraph text entry and groups of fields or field sets.

HTML Form Content Groups: TextArea or FieldSet

The next three tags in Table 15-1 allow you to define large data entry areas for text and collections of data input fields. There are over a dozen parameters for these tags, all of which are supported in HTML5. I include them in Tables 15-5 and 15-6, and try to cover all the key parameters in the examples.

Table 15-5. Twelve HTML5 Parameters for Text Area Configuration

TextArea Tag Parameter	TextArea Tag Parameter’s Usage
cols	Specifies text area columns (characters)
rows	Specifies text area rows (lines)
name	Specifies the text area (element) name
disabled	Specifies text area should be disabled
readonly	Specifies that text area is read-only
autofocus	Specifies text area autofocus on page load
dirname	Specifies please respect text area direction
form	Specifies the form text area belongs to
maxlength	Specifies text area maximum character count
placeholder	Specifies description of what text is needed
required	Specifies that text area completion required
wrap	Specifies how text area needs to be wrapped (options are hard or soft)

Table 15-6. Three <fieldset> Parameters Used Prior to HTML5

HTML FieldSet Tag Parameter	HTML FieldSet Tag Parameter’s Usage
disabled	Specifies text area should be disabled
form	Specifies the form text area belongs to
name	Specifies the text area (element) name

The TEXTAREA Tag: Define a Block or Paragraph of Text Input

The <textarea> tag

allows you to define multi-line text input controls. These text area controls can hold an unlimited number of characters, although this is not advised, and text renders using a fixed-width font such as monospace or Courier). The size of the text area should be specified using the cols and rows parameters, as I have done in the following example markup, where I ask the users for a written description of their favorite car brand and model. I am also using just about every <textarea> tag parameter possible within the example, including autofocus, required, name, form, placeholder, and maxlength.

<!DOCTYPE html><html>
<head>
 <title>Exotic Car Preference Written Description Form</title>
</head>
<body>
 <section >
  <form name="cardescription" action="myForm.asp" method="get" novalidate>
   <textarea rows="5" cols="250" maxlength="1250" required
              name="myfavoritecar" form="cardescription" autofocus
              placeholder="Write a short paragraph on your favorite car">    Please write a short paragraph on your favorite car and brand in here!    </textarea>              
  </form>
  <p>Please write a short paragraph on your favorite car and brand above</p>
 </section>
</body></html>

The dozen parameters for

this <textarea> tag is listed in Table 15-5, with the five legacy parameters listed in the first section, and the seven new HTML5 parameters listed in the second section.

Next, let’s look at how to logically group fields and data entry controls together, using the <fieldset> element.

The FIELDSET Tag: Grouping Data Fields and Input Controls

The <fieldset> tag

is used to group related form data field and control elements together within a complex form. The <fieldset> tag draws a box around related elements to group them visually.

Let’s use the radio button control example, and put the car brand selection and car model selection radio buttons into their own

logical sections, by using this <fieldset> element.

This should look like the following HTML5 markup:

<!DOCTYPE html><html>
<head>
 <title>Exotic Car Preference Form: 6 Radio Buttons in 2 Field Sets</title>
</head><body>
 <section id="exotic car preference form">
  <form name="carform" action="myForm.asp" method="get" novalidate>
   <fieldset name="carbrands" form="carform">
    <label for="ferrari">Ferrari</label>
    <input type="radio" name="cartype" form="carform" id="ferrari"
           value="Ferrari Brand Selected" /><br>
    <label for="maserati">Maserati</label>
    <input type="radio" name="cartype" form="carform" id="maserati"
           value="Maserati Brand Selected" /><br>
    <label for="bugatti">Bugatti</label>
    <input type="radio" name=cartype" form="carform" id="bugatti"
           value="Bugatti Brand Selected" /><br>
   </fieldset>              
   <fieldset name="carmodels" form="carform">
    <label for="laferrari">Ferrari</label>
    <input type="radio" name="carmodel" form="carform" id="laferrari"
           value="Ferrari La Ferrari Model Selected" /><br>
    <label for="grancabrio">GranCabrio</label>
    <input type="radio" name="carmodel" form="carform" id="grancabrio"
           value="Maserati GranCabrio Model Selected" /><br>
    <label for="chiron">Chiron</label>
    <input type="radio" name=carmodel" form="carform" 
           value="Bugatti Chiron Model Selected" /><br>
   </fieldset>              
    <input type="submit" value="Please Submit My Choices" form="carform" />
  </form>      
 <p>Please select favorite exotic car manufacturer and model name above</p>
 </section>
</body></html>

Notice that I have wired

everything together using the form and name parameters, as well as naming the logical fieldsets. Three HTML5 <fieldset> parameters are listed in Table 15-6.

Next, let’s take a look at the complex form’s <legend> element.

The LEGEND Tag: Adding a Legend to the Field Set Groupings

The <legend> tag

defines a caption for the <fieldset> element. It has one align parameter (see Table 15-4) that is no longer supported in HTML5, as you now need to use CSS for this alignment function (although the parameter may still work in some browsers attempting to provide backward compatibility). Align parameter values include top, bottom, left, and right.

<form name="carform" action="myForm.asp" method="get" novalidate>
 <fieldset name="carbrands" form="carform">
  <legend>Choose Your Favorite Exotic Sports Car Brand:</legend>              
   <label for="ferrari">Ferrari</label>
    <input type="radio" name="cartype" form="carform" id="ferrari"
           value="Ferrari Brand Selected" /><br>
   <label for="maserati">Maserati</label>
    <input type="radio" name="cartype" form="carform" id="maserati"
           value="Maserati Brand Selected" /><br>
   <label for="bugatti">Bugatti</label>
    <input type="radio" name=cartype" form="carform" id="bugatti"
           value="Bugatti Brand Selected" /><br>
  </fieldset>
  <fieldset name="carmodels" form="carform">
   <legend>Choose Your Favorite Exotic Sports Car Model:</legend>              
    <label for="laferrari">Ferrari</label>
     <input type="radio" name="carmodel" form="carform" id="laferrari"
            value="Ferrari La Ferrari Model Selected" /><br>
    <label for="grancabrio">GranCabrio</label>
     <input type="radio" name="carmodel" form="carform" id="grancabrio"
            value="Maserati GranCabrio Model Selected" /><br>
    <label for="chiron">Chiron</label>
     <input type="radio" name=carmodel" form="carform" 
            value="Bugatti Chiron Model Selected" /><br>
  </fieldset>
    <input type="submit" value="Please Submit My Choices" form="carform" />
</form>

Next, let’s look at

the option selection tags for complex forms.

HTML Form Option Selection: Select and Option

HTML5 forms have some fairly complex options for selecting options and option grouping, much like the menus in the application software packages, which makes form design one of the most advanced area in HTML5 publishing, along with new media and interactivity, as you see later on in this book. The third section of Table 15-1 shows tags used to create these selection sets, called drop-down lists, in HTML5 form design.

The SELECT and OPTION Tags: Defining Drop-Down Lists

The <select> element creates drop-down lists. The <option> tag is used inside of the <select> element to define any options you want to make available using this list. These are similar to radio buttons, in that you can only select one member of the list. If you want to select more than one, use a group of check boxes, where multiple data items can be selected.

There are seven parameters supported for a <select> tag, three of these are new in HTML5 and are seen in the top section of Table 15-7. Another four parameters are supported for legacy HTML versions, and are seen in the bottom section of the table.

Table 15-7. Seven <select> Parameters Used for Selection Lists

HTML5 Select Tag Parameter	HTML5 Select Tag Parameter’s Usage
autofocus	Specifies selector autofocus on page load
form	Specifies the form selector belongs to
required	Specifies that a selection is required
disabled	Specifies the selector should be disabled
multiple	Specifies more than one value for selector
name	Specifies the selector name
size	Defines the number of selection options

Let’s create a manufacturer and model selection example, that uses the <select> and <option> tags inside of a <fieldset> tag, inside of a <form> tag inside of a semantic <section> tag, instead of using radio buttons to provide a user with a single selection option.

You wire the <select> tag into the <form> tag, using the name parameter inside of the <form> tag, and using the form parameter inside of each of the <select> tags.

You use the required parameter in <select> tags and the size=“4” parameter to specify the number of options. You should set the autofocus parameter in the first <select> so that it is pre-selected for use, and finally use a name parameter

to give each <select> element a unique identity.

Here’s an example of this using HTML5 markup:

<!DOCTYPE html><html>
<head>
 <title>Exotic Car Selection Form: 8 List Selections in 2 Field Sets</title>
</head>
<body>
 <section >
  <form name="carform" action="myForm.asp" method="get" novalidate>
   <fieldset name="carbrands" form="carform">
    <select form="carform" required name="brandlist" autofocus size="4">
     <option value="ferrari" label="Ferrari">Enzo Ferrari</option>
     <option value="maserati" label="Maserati">Alfieri Maserati</option>
     <option value="bugatti" label="Bugatti">Ettore Isidoro Bugatti</option>
     <option value="lmbo" label="Lamborghini">Ferruccio Lamborghini</option>
    </select>              
   </fieldset>
   <fieldset name="carmodels" form="carform">
    <select form="carform" required name="modellist" size="4">
     <option value="laferrari">LaFerrari</option>
     <option value="grancabrio">GranCabrio</option>
     <option value="chiron">Chiron</option>
     <option value="gallardo">Gallardo</option>
    </select>              
   </fieldset>
   <input type="submit" value="Please Submit My Selection" form="carform"/>
  </form>       
  <p>Please select favorite exotic car manufacturer and model name above</p>
 </section>
</body></html>

Also notice that I am using a label attribute to specify a shorter version of an option text value. This shorter version is displayed in the drop-down list. Also note that this is not yet fully implemented in all of the browsers across all of the HTML5 platforms, but it is only a matter of time before it is fully supported as

its implementation is quite logical.

Next, let’s look at the option group or <optgroup> tag.

The OPTGROUP Tags: Grouping the Drop-Down List Options

The <

optgroup> tag

groups related options in drop-down lists. If you have long lists full of options, then a grouping of related options is easier to digest for your end users. Let’s group the car manufacturer list options into a more expensive and less expensive list grouping to see how this <optgroup> tag is used. The HTML5 markup looks like this:

<select form="carform" required name="brandlist" autofocus size="4">
 <optgroup label="More Affordable Exotic Cars">              
  <option value="ferrari" label="Ferrari">Enzo Ferrari</option>
  <option value="maserati" label="Maserati">Alfieri Maserati</option>
 </optgroup>              
 <optgroup label="Less Affordable Exotic Cars">              
  <option value="bugatti" label="Bugatti">Ettore Isidoro Bugatti</option>
  <option value="lambo" label="Lamborghini">Ferruccio Lamborghini</option>
 </optgroup>              
</select>

Next, let’s take a look at the <button> form design tag.

The BUTTON Tag: Creating User Interface Buttons

The <button> tag defines clickable buttons for submitting or resetting a

form, or for custom purposes. You may place content, such as text or imagery, inside of the <button> elements. This is the primary difference between the <button> element and submit buttons created earlier in the chapter using the <input type=“submit”> element.

Be sure to always specify a type parameter, using either the submit, reset, or button value with the <button> elements. It is important to note that different HTML5 browsers use different default types for this <button> element, so you need to “force the issue” by specifying what you want the button to do, and not rely on default values to be set correctly for you!

Eight HTML5 <button> parameters are listed in Table 15-8, along with three legacy HTML parameters.

Table 15-8. HTML5 <button> Parameters for Button Configuration

HTML5 Button Tag Parameter	HTML5 Button Tag Parameter’s Usage
autofocus	Specifies autofocus for button on page load
form	Specifies a form that the button belongs to
formaction	Specifies URL the form is processed at
formenctype	Specifies encoding (for submit or image)
formmethod	Specifies HTTP method to use ( get or post)
formnovalidate	Specifies button should not be validated
formtarget	Specifies where to display the response
name	Specifies the button element name
disabled	Specifies that a button is disabled for use
type	Selects button type (button, reset, submit)
value	Specifies a text value for the button label

Let’s replace that <input type=“submit”> in the example with <button type=“submit”> and <button type=“reset”> markup:

<!DOCTYPE html><html>
<head>
 <title>Exotic Car Selection Form: 8 List Selections in 2 Field Sets</title>
</head><body>
 <section >
  <form name="carform" action="myForm.asp" method="get" novalidate>
   <fieldset name="carbrands" form="carform">
    <select form="carform" required name="brandlist" autofocus size="4">
     <option value="ferrari" label="Ferrari">Enzo Ferrari</option>
     <option value="maserati" label="Maserati">Alfieri Maserati</option>
     <option value="bugatti" label="Bugatti">Ettore Isidoro Bugatti</option>
     <option value="lmbo" label="Lamborghini">Ferruccio Lamborghini</option>
    </select>
   </fieldset>
   <fieldset name="carmodels" form="carform">
    <select form="carform" required name="modellist" size="4">
     <option value="laferrari">LaFerrari</option>
     <option value="grancabrio">GranCabrio</option>
     <option value="chiron">Chiron</option>
     <option value="gallardo">Gallardo</option>
    </select>
   </fieldset>
  <button type="submit" value="Submit Choices" form="carform" name="B1" />
  <button type="reset" value="Reset Choices" form="carform" name="B2" />
  </form>
  <p>Please select favorite exotic car manufacturer and model name above</p>
 </section></body></html>

Note that I am using the two

pre-defined type values to create two functional buttons, as well as button label values, button names, and a recommended tie-in to the form name using the form parameter. Next, let’s take a look at the new HTML5 form tags.

New HTML5 Form Tags: DataList, KeyGen, Output

There are three new tags in HTML5 for form design. They allow you to define data lists for auto-complete, generate keys for data security, and output the results of calculations on data.

The DATALIST Tag: Defining Each Description Term Child Elem

The <datalist>

tag specifies a list of pre-defined options for an <input> element to use via the list parameter shown in Table 15-3. The <datalist> tag is for use in providing the auto-complete feature on <input> elements. When a <datalist> is provided, users see a drop-down list of pre-defined options appear once they start to input data. To bind the <input> element list parameter together with a <datalist> element, use the id parameter in a <datalist> tag, as shown in the following HTML5 markup:

<input list="italiancars">
 <datalist >
  <option value="Ferrari">
  <option value="Maserati">
  <option value="Bugatti">
  <option value="Lamborghini">
</datalist>

Next, let’s take a look at a Key Generator <keygen> tag.

The KEYGEN Tag: Defining Each Description Data Child Element

The <keygen> tag

allows you to specify a security key-pair generator field, used for securing form data. When the form is submitted, a private key is stored locally, and a public key is sent to the server.

Here is a sample form and username input that uses this <keygen> tag and a <button> tag to submit the secure key to the server, as shown in the following HTML5 markup:

<form action="private_keygen.asp" method="get" name="keyform">
 Username: <input type="text" name="user_name">
 Encryption: <keygen name="security_key">              
 <button type="submit" value="Submit Secure Key" form="keyform" name="K1"/>
</form>

Table 15-9 shows the six HTML5 parameters supported by the <keygen> tag.

Table 15-9. Six <keygen> Parameters for Secure Key Generation

HTML5 KeyGen Tag Parameter	HTML5 KeyGen Tag Parameter’s Usage
autofocus	Specifies KeyGen autofocus on page load
form	Specifies form that the KeyGen belongs to
disabled	Specifies KeyGen element will be disabled
keytype	Specifies a security algorithm for the key
name	Defines the KeyGen element name
challenge	Specifies that the value of the <keygen> element is challenged on submission

Next, let’s take a look at the output <output> tag.

The OUTPUT Tag: Defining Each Description Data Child Element

The <output> tag

represents the result of a calculation, such as one performed using <input> data fields, as done in the example, or from a more complex JavaScript calculation. Table 15-10 shows the three parameters supported in HTML5 for the new <output> tag (element).

Table 15-10. Three <output> Parameters for Output Generation

HTML5 Output Tag Parameter	HTML5 Output Tag Parameter’s Usage
for	Specifies the relationship between the result of the calculation and elements that were used in that calculation
form	Specify form that the output belongs to
name	Defines the output element name

Let’s create a <form> construct that adds two numbers, using the <input> fields to collect the data, an oninput event in the <form> tag to do a simple output=inputA+inputB calculation, and an <output> tag to hold the output. The <form> and <output> constructs are wired together using the o.value (form oninput), and the name=”o” (output tag parameter).

The HTML5 markup for this looks like the following:

<form name="add2numbers" onsubmit="return false"
      oninput="o.value = parseInt(a.value) + parseInt(b.value)">
      <input name="a" type="number" step="any"> +
      <input name="b" type="number" step="any"> =
      <output name="o"></output>
</form>

Next, we’re going to get into defining areas with HTML5.

Summary

This chapter discussed forms tag support in HTML5 and previous versions, including the <form>, <input>, <label>, <textarea>, <fieldset>, <legend>, <select>, <option>, <optgroup>, <button>, <datalist>, <keygen>, and <output> tags. In the next chapter, you learn about HTML5 tags support the positioning of content within HTML5 documents and applications as well as defining areas in HTML5 using pixels or percentages, so that your HTML design is precise!

Blog