Some Other New Form Field Attributes

Contact Us or call 1-877-932-8228
Some Other New Form Field Attributes

Some Other New Form Field Attributes

required

The required attribute is used to indicate that a form field must contain data. It is supported by recent versions of all browsers except Safari.

Code Sample:

html5-forms/Demos/required.html
<!DOCTYPE HTML>
---- C O D E   O M I T T E D ----
	<label for="fullname">Name: </label>
	<input type="text" name="fullname" id="fullname" required>
---- C O D E   O M I T T E D ----

placeholder

The placeholder attribute is used to add placeholder text to the form field. It is only supported by recent versions of all browsers.

Code Sample:

html5-forms/Demos/placeholder.html
<!DOCTYPE HTML
---- C O D E   O M I T T E D ----
	<label for="fullname">Name: </label>
	<input type="text" name="fullname" id="fullname" placeholder="Enter Firstname">
	<input type="submit">
---- C O D E   O M I T T E D ----

Here's what it looks like in Firefox:

autofocus

The autofocus attribute can only go in one field on the page. It instructs the browser to place focus on that field allowing the user to begin typing as soon as the page loads.

Code Sample:

html5-forms/Demos/autofocus.html
<!DOCTYPE HTML>
---- C O D E   O M I T T E D ----
	<label for="fullname">Name: </label>
	<input type="text" name="fullname" id="fullname" autofocus>
	<label for="email">Email: </label>
	<input type="email" name="email" id="email">
	<input type="submit">
---- C O D E   O M I T T E D ----

We used to accomplish this by adding onload="document.getElementById('fullname').focus();" to the <body> tag or some other similar scripting method. The HTML5 way is easier and comes with at least two added benefits:

  1. It works when scripting is turned off.
  2. Browser makers could potentially provide a preference setting for disabling autofocus.

HTML5 autofocus is supported in Internet Explorer from version 10 and modern version of all other browsers. Note that use of autofocus in earlier versions of Google Chrome led to some errors with form valiation and some other aspects of forms; the issue has since been fixed.

Autofocusing on a form element (the HTML5 way or through script) can cause problems for people using screen readers. For sighted people, it's generally okay if we provide one focus point for the keyboard (i.e., autofocus) and another one for the eyes (e.g., instructions for filling out the form), but for people using screen readers, there is only one focus point. So be careful not to skip over important contextual content when directing focus to the first form field.

autocomplete

The autocomplete attribute is used to override the browser's or form element's autocomplete behavior on a field by field basis. It is widely supported by HTML5-compliant browsers.

form

The form attribute is used to associate a form element with a form (by the form's id) in which it is not nested. This would typically be used for styling purposes; for example, if you wanted to have one or more form elements appear separately from the main form.

Note that the form attribute can be used with the label and fieldset elements as well as all the form fields (e.g., input, textarea, select,...). Unfortunately, only Opera supports it.

pattern

The pattern attribute is used to force a specific pattern (via a regular expression) within a form field. It is only supported by recent versions of all browsers except Safari.

Code Sample:

html5-forms/Demos/pattern.html
<!DOCTYPE HTML>
---- C O D E   O M I T T E D ----
	<label for="telephone">Telephone: </label>
	<input type="tel" name="telephone" id="telephone" pattern="^\(?([2-9]\d\d)\)?[\-\. ]?([2-9]\d\d)[\-\. ]?(\d{4})$">
---- C O D E   O M I T T E D ----

Open this file in one of the supporting browsers and enter data in the field. It should remain red until the value is a valid 10-digit U.S.-style phone number. It will allow for parentheses around the area code and for dashes, spaces, and dots as separators.

Next