Servage Magazine

Have you already checked out the new input elements in HTML?

For many years developers have been forced to be creative when using input elements in forms. Creating a special input element might have involved the use of multiple other elements. For example a date and time or credit card field would contain multiple input fields or dropdowns.

In HTML5 some new input elements have been introduced, which standardizes and makes it easier to implement such inputs.

New available input types

• color
• date
• datetime
• datetime-local
• email
• month
• number
• range
• search
• tel
• time
• url
• week

It’s very easy to use these types. It’s just like the old “text” or other types.

Example:

<input type="color" name="favcolor" />

The advantage of this is that supporting browsers will render the proper element, while older browsers will simply consider this a regular input element, and treat it like a text field. You can apply JavaScript and CSS as you see fit, to handle such situations.