C777 Chapter 8
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.
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 introduces many semantic elements and attributes
<section>, <aside> and <footer>
New HTML5 Form Element <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
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
month
Allows the user to choose a date using the month and year (without time zone)
week
Allows the user to choose a date using the week and year (without time zone)
url
Allows the user to enter a URL, such as an http://, ftp:// or mailto: address
date
Allows the user to enter a date (without time zone) using a drop-down date-picker calendar
time
Allows the user to enter a time (without time zone)
range
Allows the user to enter numbers using a slider control
number
Allows the user to enter rational integers or float values
autofocus
Applies focus on the element when the page loads
CSS
Border and spacing in a fieldset group can be controlled using _________.
<select>
Creates a drop-down selection list.
disabled
Disables the element
New HTML5 Form Element <output>
Displays the result when a calculation is performed
Wufoo.com hosts an
HTML5 Browser Support page
HTML5 Global Attribute required
Requires the user to select or enter a value before the form can be submitted
New HTML5 Form Element <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
HTML5 Global Attribute name
Specifies a name for the element that can be used to reference it
HTML5 Global Attribute 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
HTML5 Global Attribute for
Specifies the IDs of elements whose values were used
HTML5 Global Attribute form
Specifies the form(s) on the page in which the element appears
HTML5 Global Attribute maxlength
Specifies the maximum number of characters that can be entered in the field by the user
HTML5 Global Attribute 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
autocomplete
The <datalist> element provides pre-defined options that sort and complete themselves as users type into the field.
type attribute
The <input> element uses the _____________ to identify the input control for users.
The <label> element enables you to add
a label to an input element in a form. Users can click the label text to toggle between the controls, such as selected and not selected. This improves usability in the form.
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 HTML <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. This type of caption makes a form easier for users to understand, navigate and reference.
HTML5 min and max attributes
an be used with various input types to set limits on number ranges.
semantic elements and attributes
clearly describe their purpose to a human reading the code.
The <input> tag is still used to
create many types of form fields
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 <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.
CanIUse.com site hosts a page
includes the latest status of HTML5 and CSS3 browser support.
Graceful degradation
is a term used to describe the backward-compatibility of code.
The autofocus attribute
selects the specified field so that when a user starts typing, the text enters into the field identified with the autofocus attribute.
The <label> element is especially useful for
semantics and accessibility, which are current concerns in Web page design.
To use the <datalist> element, you must use
the <input> element's list attribute to bind it to the input field. The datalist does not work unless you bind these two elements together.