HTML5 New Form Attributes

Contact Us or call 1-877-932-8228
HTML5 New Form Attributes

HTML5 New Form Attributes

HTML5 introduces two new attributes of the form element:

  1. autocomplete - "on" or "off". When set to "off" the browser should not use built-in features to help a user auto-fill the form.
  2. novalidate - Boolean. If included, the form should not validate on submission.

autocomplete

Browsers have different ways of choosing data to use for autocomplete. For example, Chrome does it based on previous form entries, while Opera uses its built-in contact list. Users can manage autocomplete in their browser's settings. When autocomplete is on, you see something like the behavior shown below in Firefox 4: Autocomplete in FF4 When autocomplete is off, that behavior is blocked.

You can set autocomplete on the form and/or on individual fields - setting, for instance, the form to have autocomplete="on" but a specific field to have autocomplete="off".

novalidate

The purpose of the novalidate attribute is to allow users to submit their forms even if the form data is invalid. For example, perhaps they're filling out an online application and you want to allow them to save the current state of their application even though some fields might not be valid.

Take a look at the following code.

Code Sample:

html5-forms/Demos/form-attributes.html
<!DOCTYPE HTML>
---- C O D E   O M I T T E D ----
<form method="post" action="" autocomplete="on">
	<!--novalidate attribute not included-->
	<label for="fullname">Name: </label>
	<input type="text" name="fullname" id="fullname" required>
	<label for="email">Email: </label>
	<input type="email" name="email" id="email">
	<input type="submit">
</form>
---- C O D E   O M I T T E D ----

The screen shot below shows this page in Opera. Notice that the fullname field is required, but left empty, and the email field is of the email type, but is not a valid email. So, both fields are currently invalid. When submitting this form in Opera, you get the following results: If we were to include the novalidate attribute, the form would submit without erroring.

Next