Enhancing Forms - HTML5 - page 172

You'll recall the input selector affects many different types of form controls from text fields to check-
boxes. You need to be careful when you create a CSS rule that targets all <input> tags that you don't
inadvertently affect a particular form control. To avoid this problem, you can specify the type of
form control with a more particular CSS selector with the attribute selector. Here's an example CSS
rule intended to modify the submit button:
input[type=”submit”] {
margin:0 0 0 120px;
}

The square brackets indicate an attribute selector that targets an attribute in the tag, here
type=”submit” . You can easily create selectors for checkboxes and radio buttons using
similar selectors.

undersTandinG addiTionaL HTML5 ForM enHanceMenTs

One of the major areas addressed in HTML5 is forms. In addition to the required , autocomplete ,
autofocus , and other attributes covered in Lesson 19, many — 13, in fact — new types have been
added to the <input> tag. Though there is not full cross-browser compatibility for these new types
yet, support is included in many of the latest browser versions with more on the way.

Perhaps best of all, all of these new type attributes degrade gracefully because the default type
value is text . In other words, if a browser does not recognize the new url type, it handles it as if it
were text. Here's a quick overview of the newly available types:

➤

: Displays a color picker. Unfortunately, as of this writing, no browser has implemented
the color type.

color

➤

: Displays a calendar and adds the selected date in the field as a text string. date

➤

: Displays a calendar as well as a time field with up and down arrows.

datetime

➤

: Displays a calendar as well as a time field with up and down arrows with- datetime-local

out a time zone.

➤

: Displays a time field with up and down arrows. time

➤

: Displays a calendar and, when a date is selected, inserts the number of the week (1 to 52)
as well as the year.

week

➤ ➤

: Displays a calendar and, when a date is selected, inserts the number of the month
(1 to 12) as well as the year.

month

➤

: Displays a stepper control (up and down arrows). Available attributes include min ,
max , step , and value .

number

➤ ➤

: Displays a slider control. Available attributes include min, max, step , and value.

range

➤

: Validates the entered value as an e-mail address.

email

➤

: Includes a clear search icon.

search