YouTip

HTML5 introduces several new form input types. These new features provide better input control and validation. This chapter provides a comprehensive introduction to these new input types: * color * date * datetime * datetime-local * email * month * number * range * search * tel * time * url * week **Note:** Not all mainstream browsers support the new input types, but you can already use them in all major browsers. Even if they're not supported, they'll still render as regular text fields. * * * ## Input Type: color The color type is used in input fields primarily for selecting colors, as shown below: . : Birthday (date and time): [Try it out »]( * * * ## Input Type: datetime-local The datetime-local type allows you to select a date and time (no timezone). : Birthday (date and time): [Try it out »]( * * * ## Input Type: email The email type is used for input fields that should contain an email address. . * * * ## Input Type: month The month type allows you to select a month. : Birthday (month and year): [Try it out »]( * * * ## Input Type: number The number type is used for input fields that should contain numeric values. You can also set limits on the numbers accepted: : Quantity (between 1 and 5): [Try it out »]( Use the following attributes to specify limits for numeric types: | Attribute | Description | | --- | --- | | disabled | Specifies that the input field is disabled | | max | Specifies the maximum allowed value | | maxlength | Specifies the maximum number of characters allowed in the input field | | min | Specifies the minimum allowed value | | pattern | Specifies the pattern used to validate the input field | | readonly | Specifies that the value of the input field cannot be modified | | required | Specifies that the input field's value is required | | size | Specifies the number of visible characters in the input field | | step | Specifies the legal interval between numbers in the input field | | value | Specifies the default value of the input field | Try an example with all limiting attributes ( * * * ## Input Type: range The range type is used for input fields that should contain numeric values within a certain range. The range type is displayed as a slider. : [Try it out »]( Please use the following attributes to specify limits for numeric types: * max - Specifies the maximum allowed value * min - Specifies the minimum allowed value * step - Specifies the legal interval between numbers * value - Specifies the default value * * * ## Input Type: search The search type is used for search fields, such as site searches or Google searches. ![Image 41: Opera](