Filling out forms on the web has never been exactly fun, and it can be downright painful on a mobile device with its on-screen keyboard. But modern browsers help to make this much easier by providing new semantic input types and validation. There is even more up to date forms guidance on our new Web Fundamentals site.

HTML Forms

When used properly, these features make it significantly easier for users to provide the information needed, increasing completion rates, and improving accuracy. Currently support for the new form and input elements is widespread on modern browsers, though there is often some difference in the way some pickers are displayed on desktop. Mobile browsers are relatively consistent in showing the right keyboard depending on the input type selected.

For the most up to date information, check out the state of HTML5 Form Features on CanIUse.

HTML5 introduces a number of new input types. These new input types give hints to the browser about what type of keyboard layout to display for on-screen keyboards.

HTML5 forms input types | HTML5 Doctor

Many browsers provide built-in validation for some input types like email and url. On other elements, you can indicate a valid input format by providing a regular expression in the the pattern attribute. For more information, be sure to read the section on Validation. For example, datalists can provide auto-complete in text boxes suggesting options to the user. Even with client side input validation, it is always important to validate data on the server to ensure consistency and security in your data.

The pattern attribute specifies a regular expression used to validate an input field. For the purpose of the example, let's say a part number consists of three uppercase letters followed by four digits. The use of pattern ensure that the field value matches the correct format for a part number. If the required attribute is present, then the field must contain a value before the form can be submitted.

You can also use the min and max attributes on any of the date type inputs. The maxlength attribute can be used to specify the maximum length of an input or textbox and is useful when you want to limit the length of information that the user can provide.

For example, if you want to limit a filename to 12 characters, you can use the following. In some cases, you may want to allow the user to submit the form even if it contains invalid input.

To do this, add the novalidate attribute to the form element. In this case, all pseudo classes and JavaScript APIs will still allow you to check if the form validates. The constraint validation API gives you powerful tools for handling custom validation.

html5 - HTML Form: Select-Option vs Datalist-Option - Stack Overflow

The API allows you to do things like set a custom error, check whether an element is valid, and determine the reason that an element is invalid. The table below lists the new JavaScript APIs and properties that are available on input elements. For example, in the blur event for the second input, you would call the following check function:.

See the article on Constraint Validation for further details and additional uses. In addition to the JavaScript APIs, the invalid event is fired when checkValidity returns false, allowing you to provide custom messages. For example you could set the innerText of a sibling element to the validationMessage , providing users with more information about why the input validation failed. The datalist element isn't an input type, but a list of suggested input values to associated with a form field. It lets the browser suggest autocomplete options as the user types.

Several other common form features are provided by new attributes that would have previously required additional code. You may want to use this in fields like one-time passwords, pin numbers or password hints.

On some forms, like the Google home page for example, you want the focus to immediately jump to a specific input so that the user can quickly begin using the form. Instead, you can use the autofocus attribute on an input element to specify that element as the primary form element. The browser automatically handles blank values, dirty inputs and other input states that would previously have to be special cased in JavaScript.

The example below sets the outline of the box to be red when the user has provided invalid input, and to attract their attention, makes the text bold when the field has focus. To prevent this, you can set the style to something else, like the example below.

Beyond the constraint validation API, there are a few other new functions and properties that are helpful for input elements. One of the enhancements to XMLHttpRequest is the introduction of the FormData object. FormData gives you a way to create HTML forms on-the-fly using JavaScript, and then submit them using XMLHttpRequest.

Here's a simple example:. You can also use FormData to add additional data to an existing form before submitting it. With a trivial amount of additional work today, we can significantly reduce the amount of pain your users feel when filling out web forms. Please enable JavaScript to view the comments powered by Disqus. Grab the RSS feed and stay up-to-date. Except as otherwise noted , the content of this page is licensed under the Creative Commons Attribution 3.

By Pete LePage and Jan Kleinert. June 2nd, Updated: November 19th, Comments: Your browser may not support the functionality in this article. Next steps Share aside. For entering a URL.

It must start with a valid URI scheme, for example http: For entering phone numbers. It does not enforce a particular syntax for validation, so if you want to ensure a particular format, you can use pattern.

For entering email addresses. By default it will only take one, but if the multiple attribute is provided, a comma separated list of email addresses is valid.

A text input field styled in a way that is consistent with the platform's search field. For number input, but unlike the number input type, the value is less important. It is displayed to the user as a slider control. For entering a date and time value where the time zone provided is the local time zone. For entering a date that consists of a week-year number and a week number, but no time zone.

Property that returns a ValidityState object representing the validity states of the element. Property that returns a string with the reason the object failed the validation test. Sets a custom validation message and the customError property of the ValidityState object to true.

For numeric and date inputs, you can use the stepUp and stepDown functions to adjust the value to its next logical step. Property that returns the value as a number, useful for numeric inputs instead of having to do parseInt element. Property that returns the value as a Date object, useful for date inputs instead of having to manually parse them.