Chapter 8 - Developing HTML5 Forms

New Form Elements in HTML5

►<datalist> ●Specifies a list of pre-defined choices for an <input> element ●Users see the pre-defined choices in a drop-down list that narrows according to any user input ●This field also features the autocomplete function for user input ►<keygen> ●Adds security to a form through asymmetric encryption by creating a key-pair generator field in the form ●Generates a key pair (one private key and one public key) upon form submission ●The public key is sent to the server, whereas the private key is stored on the local machine ►<output> ●Displays the result when a calculation is performed

various types of online form fields

►Radio buttons — round buttons in a group of mutually exclusive pre-determined choices ►Check boxes — square buttons in a group of pre-determined choices from which the user can select more than one choice ►Drop-down select list — rectangular field that can expand upon user interaction and allow users to select one or more pre-determined choices ►Text box — rectangle field into which users can type alphanumeric characters of their choice ►Submit and Reset buttons — buttons typically found at the bottom of forms used for either submitting the form or clearing all user input from the form

HTML5 Web form additions

►Semantic input types — New or expanded input fields that describe their content to developers as well as browsers. ►Selection options - New HTML5 elements, input types and validation features that make it easier for users to enter information into Web forms on smaller screens. ►Validation tools — Built-in processes that can check and guide user input into form fields before form submission

HTML5 Form Input Types

Many of the HTML elements used to create Web forms have not changed with the introduction of HTML5: ►The <form> tag is still used to designate the beginning of a form on a page. ►The <input> tag is still used to create many types of form fields. ►The <button> tag is still used to create buttons associated with a particular form, as well as other types of clickable buttons. The HTML <input> element provides multiple ways for users to enter information into a form. It is a multipurpose element used within the <form> element The <input> element uses the type attribute to identify the input control for users. The value of the type attribute varies widely, depending on the type of input you need for specific information.

HTML5 <output> attribute

attributes used with the <output> element, which are global attributes that can be used with various other elements. ►for ●attribute value=element_id Specifies the IDs of the elements whose values were used in the calculation ►form ●attribute value=form_id Specifies the form(s) on the page in which the <output> element appears ►name ●attribute value=User-specified text Specifies a name for the <output> element that can be used to reference it

Cross-Browser Compatible HTML5 Forms

Modern browsers support HTML5 forms, but differences still exist in how the input types and attributes are displayed So it is always a good idea to test your HTML5 forms on a variety of browsers. The CanIUse.com site (http://caniuse.com) also hosts a page that includes the latest status of HTML5 and CSS3 browser support. Browser support changes regularly, with browsers supporting more features of HTML5 and CSS3 each day. Checking resources such as these can help you build forms that are cross-browser compatible, but nothing replaces the need to test, test, test your pages on various browsers to see how they appear and perform.

HTML5 <datalist> element

The <datalist> element provides pre-defined options that sort and complete themselves as users type into the field. This feature is called autocomplete. To use the <datalist> element, you must use the <input> element's list attribute to bind it to the input field. . The list attribute identifies the datalist element you want to use <input list="continents" name="continent"> <datalist id="continents"> <option value="North America"> <option value="South America"> <option value="Europe"> <option value="Asia"><option value="Africa"> <option value="Australia"> <option value="Antarctica"> </datalist> In the example, the <datalist> element identifies itself with the id value "continents". The <input> element uses the list attribute's value to identify this datalist as "continents." The datalist does not work unless you bind these two elements together.

HTML5 attributes for the <fieldset> element

The <fieldset> element is used to group elements so that related fields are placed together in a form. It creates a box around the related fields, which helps to group and separate them on the screen. This is particularly helpful with long forms to compartmentalize the form parts and add whitespace, which makes the form easier to read. The HTML5 global attributes that can be used with the <fieldset> element are: ►form — specifies the form(s) on the page in which the <fieldset> element appears ►name — specifies a name for the <fieldset> element that can be used to reference it ►disabled — disables a group of related form elements

HTML5 attributes for the <label> element

The <label> element is especially useful for semantics and accessibility, which are current concerns in Web page design. The <label> element is especially useful for semantics and accessibility, which are current concerns in Web page design. Users can click the label text to toggle between the controls, such as selected and not selected. The HTML5 global attributes that can be used with the <label> element are: ►form — specifies the form(s) on the page in which the <label> element appears by binding the label to the form (using the <form> element's id attribute) ►for — binds the label to its related input type (using the input's id attribute) The following code example shows how you can use the for attribute with <label>: <form> <label for="red">Red <input type="radio" name="color" id="red" /> </label> <label for="red">Red</label> <input type="radio" name="color" id="red" /> <br /> <label for="blue">Blue</label> <input type="radio" name="color" id="blue" /> </form> The <label> element does not require the for attribute when it wraps around an element. The for attribute is optional in the preceding example.

HTML <legend> element

The <legend> element allows you to add a caption for a group of items created by the <fieldset> element. The caption appears at the top of the box that surrounds the related fields.

HTML5 attributes for the <select> element

The <select> element has existed for a long time, but several new HTML5 global attributes enhance it. The <select> element creates a drop-down selection list, and it uses the <option> element to identify your list options. The HTML5 global attributes that can be used with the <select> element are: ►autofocus — applies focus on the drop-down selection list when the page loads ►form — specifies the form(s) on the page in which the <select> element appears by binding the selection list to the form (using the <form> element's id attribute) ►required — requires the user to select a value for the selection list before the form can be submitted What is your favorite color?<select autofocus> <option value="red">Red</option> <option value="blue">Blue</option> <option value="green">Green</option> <option value="pink">Pink</option></select>

HTML5 <keygen> element

The HTML5 <keygen> element is used to generate a key pair to add security in an HTML form. These keys enable asymmetric (or public-key) cryptography to encrypt communications between the user and your server. The <keygen> element displays a key-pair generator field that creates two keys when the form is submitted: ►A private key — stored locally on the user's computer ►A public key — sent to the Web site's server to match the user's key The public key can also be used from the server to create client certificates that provide user authentication on future visits to the site. <form> User Name: <input type="text" name="username"> Encryption: <keygen name="encryption"> <input type="submit"> </form>

Graceful degradation

The backward-compatibility of code; its ability to render an acceptable substitute on the page when older or non-compatible browsers cannot support newer HTML features. . Graceful degradation is a term used to describe the backward-compatibility of code. Remember these two important points about form input elements: ►If the type attribute is omitted, then the browser will infer the default type of text. ►If the specified value of the type attribute is not supported, the browser will ignore the value and infer the default type of text.

Semantic inputs, elements and attributes

The word "semantic" can be defined as the study of meaning in words and language. So it follows that semantic elements and attributes in HTML are those that clearly describe their purpose to a human reading the code. For example, the output or content you can expect from elements such as <form>, <img> and <header> is clear. By contrast, elements such as <span> and <div> are not considered semantic elements because their purpose is not obvious in their names. HTML5 introduces many semantic elements and attributes to make code more straightforward. Examples include the HTML5 structure tags such as <section>, <aside> and <footer>.

HTML5 <output> element

When a Web page form performs a calculation for the user, the result (or output) of the calculation can be saved and reused with the HTML5 <output> element. Calculations are usually performed by a script

HTML5 Global Attributes for Form Elements

a global attribute is an attribute that can be used by various (and in some cases, all) HTML elements. Some of the global attributes most commonly used with forms. Many other global attributes exist that can be used with all HTML5 elements. ►autofocus Applies focus on the element when the page loads ►disabled Disables the element ►for Specifies the IDs of elements whose values were used ►form Specifies the form(s) on the page in which the element appears ►maxlength Specifies the maximum number of characters that can be entered in the field by the user ►name Specifies a name for the element that can be used to reference it ►placeholder Specifies a short description to provide the user with a hint about the expected input in the field The placeholder value appears before the user enters any input, and it disappears when the user enters a character in the field ►required Requires the user to select or enter a value before the form can be submitted ►wrap Specifies whether text submitted in a form field is to be wrapped Default is "soft" (not wrapped) Wrapped ("hard") text input will contain newlines (i.e., returns) when submitted

HTML5 attributes for the <textarea> element

the <textarea> element identifies a multi-line text input control The element allows an unlimited character length, but developers usually define the size by adding the rows and cols attributes The text that users enter typically defaults to Courier font with a fixed width. The HTML5 global attributes that can be used with the <textarea> element are: ►autofocus — applies focus on the textarea field when the page loads ►form — specifies the form(s) on the page in which the <textarea> element appears by binding the textarea field to the form (using the <form> element's id attribute) ►maxlength — specifies the maximum number of characters that can be entered in the textarea field by the user ►placeholder — specifies a short description for the expected user input in the textarea field ►required — requires the user to enter a value in the textarea field before the form can be submitted ►wrap — specifies whether text submitted in a textarea field is to be wrapped

HTML5 <keygen> Attribute

►autofocus ●attribute value=autofocus Applies focus on the <keygen> element when the page loads ►challenge ●attribute value=challenge Challenges the value of the <keygen> element when submitted ►disabled ●attribute value=disabled Disables the <keygen> element ►form ●attribute value=form_id Specifies the form(s) on the page in which the <keygen> element appears ►keytype ●attribute value=rsadsaec Specifies the security algorithm used for the keys (RSA, DSA or EC) The default algorithm is RSA Users may be asked to choose key size or strength for any of these algorithms ►name ●attribute value=text Specifies a name for the <keygen> element that can be used to reference it

New input types in HTML5

►color Allows the user to choose colors ►date Allows the user to enter a date (without time zone) using a drop-down date-picker calendar ►datetime Allows the user to choose a date and time with a GMT time zone ►datetime-local Allows the user to choose a date and time with a local time zone ►email Allows the user to enter one or more e-mail addresses ►month Allows the user to choose a date using the month and year (without time zone) ►number Allows the user to enter rational integers or float values ►range Allows the user to enter numbers using a slider control ►search Allows the user to enter text for a search query ►tel Allows the user to enter a phone number ►time Allows the user to enter a time (without time zone) ►url Allows the user to enter a URL, such as an http://, ftp:// or mailto: address ►week Allows the user to choose a date using the week and year (without time zone)