Table of Contents for

The Modern Web

The autofocus attribute, which is common to all input types, simply sets the focus on the specified element when the page is loaded. In a text input field, for example, the cursor would already be placed and ready for the user’s input. autofocus is a Boolean attribute, so the value to activate it can be either autofocus or just left out entirely, as shown here:

<input type="text" autofocus>

If multiple instances of autofocus are used on a page, the first (in DOM order) will be respected.

The placeholder attribute, which you can use on any text-like input element (the ones I’ve already introduced in this chapter, for example), takes a string of characters as its value; this string will be displayed inside the input when no value is present. Use the string for instructions on the type of value required; for example, in an email input you might include something like this:

<input type="email" placeholder="e.g. foo@bar.com">

Most browsers style the placeholder text lighter than the default color to show that it’s holding text rather than a value, but depending on your website’s color scheme that may not be ideal. Unfortunately, no standardized selector is available to change placeholder text properties, although some browsers have implemented their own proprietary pseudo-class (or pseudo-element):

input:-moz-placeholder {}
input:-ms-input-placeholder {}
input::-webkit-input-placeholder {}

The autocomplete attribute sets whether the browser should remember previous values entered into a field and offer them back to you in the future. The values are on and off; the default is on, but if you’re creating a site with confidential form information, you may want to set this to off to increase the user’s security by not offering suggestions to someone who may subsequently use the same device:

<input type="email" autocomplete="off">

Many browsers now offer native spellchecking facilities. These are usually applied, by default, to textarea elements only, but you can apply the spell-checker—if present—to any field by using the spellcheck attribute. This is a slightly strange attribute, as it’s Boolean but doesn’t behave like the other attributes of that type; it requires a value of true or false to enable or disable spellchecking:

<input type="text" spellcheck="true">

By default, the dictionary used will be in the language of the user’s browser, but you can change this with the lang attribute. If the user has the stated language dictionary installed (Spanish, in the following example), that dictionary will be used for spellchecking:

<input type="text" spellcheck lang="es">

The multiple attribute is for situations when the user can enter or submit more than one entry in a field. You can pair it with the file input to select multiple files from a user’s device or with the email input to enter more than one email address in the field. The attribute is a true Boolean, so only the attribute name is required:

<input type="file" multiple>

One of the limitations of forms in HTML 4.01 was that all form elements, including the submit button, had to be contained within the form element itself, meaning that, unless JavaScript were used, all the elements had to follow each other subsequently in the markup, limiting the ways they could be laid out on the page.

HTML5 has addressed this with the form attribute, which takes as a value the id of a form element, creating an association between the field and the form regardless of their position in the markup. The value of the element is then submitted along with the form. In this example, the input #bar will be submitted along with the form #foo:

<form id="foo">…</form>
<input type="text" id="bar" form="foo">