What you need to know about HTML5 forms

What would a website be without a form? Exactly! At a minimum, your users need a way to communicate with your organization, and you need a way to glean information from your users. Forms are the “de facto” and simplest way for organizations to obtain user information, the simplest being a rudimentary contact form. In addition, HTML5 forms are making it easier than ever to create highly stylized and browser-based validation with the new elements, attributes, input types, FormData Object, and CSS3 styling. HTML5 also introduced thirteen input types which automatically fall back to text inputs when viewed in unsupported browsers. I will list the new input types and review several of the new form elements, attributes, and input attributes. I will also present code snippet examples of several.

HTML5 Input Types

The thirteen new HTML5 input types are listed below along with a short description of each; if the browser cannot detect the input type, it automatically falls back to a regular text field.

Color: Allows you to select a color from a color picker dialog box or window.

Date: Allows the user to select a date and includes a dropdown calendar picker.

Datetime: The user can define a date and time with the time zone set to UTC.

Datetime-local: The user can enter a date and time with no time zone also provides a calendar dropdown.

Email: Enter either a single email address or a list of email addresses which is automatically validated.

Month: Allows entering a date with a month and a year, but no time zone, also provides a calendar dropdown.

Number: Used for input fields that should contain a numerical value.

Range: Allows the user to enter numerical input that should contain a value from a range of numbers.

Search: Defines a search field that the user can enter query text

Tel: Defines a field where a user can enter a telephone number.

Time: Allows the user to select a time value with hour, minute, seconds, and fractional seconds, but no time zone.

Url: Allows the user to enter a single URL address which is also automatically validated upon form submittal

Week: Allows the user to select a week and a year, but no time zone, also provides a calendar dropdown.

HTML5 Form

attributes

Two HTML5 form attributes are autocomplete and novalidate. The autocomplete attribute specifies if an input field will include an autocomplete value and is set as either “on” or “off.” Novalidate is a Boolean attribute, which when present, specifies that form data should not be validated upon submit. Code snippets of these HTML5 form attributes are displayed below first with the autocomplete utilized in two instances and then novalidate for telephone and e-mail: Autocomplete

0 replies

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Leave a Reply

Your email address will not be published. Required fields are marked *