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 |
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 |
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 |
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 |
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!