The placeholder attribute looks like this:

placeholder="e.g. King Kong"

Placeholder text within form fields is such a common requirement that the folks creating HTML5 decided it should be a standard feature of HTML. Simply include the placeholder attribute within your input and the value will be displayed by default until the field gains focus. When it loses focus, if a value has not been entered it will re-display the placeholder text.

input:placeholder-shown {
  color: #333;
}

The required attribute looks like this:

required

In supporting HTML5 capable browsers, by adding the Boolean (meaning you simply include the attribute or not) attribute required within the input element, it indicates that a value is required. If the form is submitted without the field containing the requisite information, a warning message should be displayed. The message displayed is specific (both in content and styling) to both the browser and the input type used.

We've already seen what the required field browser message looks like in Chrome. The following screenshot shows the same message in Firefox:

The required value can be used alongside many input types to ensure a value is entered. Notable exceptions are the range, color, button, and hidden input types as they almost always have a default value.

The HTML5 autofocus attribute allows a form to have a field already focused, ready for user input. The following code is an example of an input field wrapped in a div with the autofocus attribute added at the end:

<div>
  <label for="search">Search the site...</label>
  <input id="search" name="search" type="search" placeholder="Wyatt Earp" autofocus>
</div>

Be careful when using this attribute. Cross browser confusion can reign if multiple fields have the autofocus attribute added. For example, if multiple fields have autofocus added, in Safari, the last field with the autofocus attributed is focused on page load. However, Firefox and Chrome do the opposite with the first autofocus field selected.

It's also worth considering that some users use the spacebar to quickly skip down the content of a web page once it's loaded. On a page where a form has an autofocused input field, it prevents this capability; instead it adds a space into the focused input field. It's easy to see how that could be a source of frustration for users.

If using the autofocus attribute, be certain it's only used once in a form and be sure you understand the implications for those who scroll with the spacebar.

By default, most browsers aid user input by auto-completing the value of form fields where possible. While the user can turn this preference on and off within the browser, we can now also indicate to the browser when we don't want a form or field to allow auto-completion. This is useful not just for sensitive data (bank account numbers for example) but also if you want to ensure users pay attention and enter something by hand. For example, for many forms I complete, if a telephone number is required, I enter a 'spoof' telephone number. I know I'm not the only one that does that (doesn't everyone?) but I can ensure that users don't enter an autocompleted spoof number by setting the autocomplete attribute to off on the relevant input field. The following is a code example of a field with the autocomplete attribute set to off:

<div>
  <label for="tel">Telephone (so we can berate you if you're wrong)</label>
  <input id="tel" name="tel" type="tel" placeholder="1-234-546758" autocomplete="off" required>
</div>

We can also set entire forms (but not fieldsets) to not autocomplete by using the attribute on the form itself. The following is a code example:

<form id="redemption" method="post" autocomplete="off">

This list attribute and the associated datalist element allow a number of selections to be presented to a user once they start entering a value in the field. The following is a code example of the list attribute in use with an associated datalist, all wrapped in a div:

<div>
  <label for="awardWon">Award Won</label>
  <input id="awardWon" name="awardWon" type="text" list="awards">
  <datalist id="awards">
    <select>
      <option value="Best Picture"></option>
      <option value="Best Director"></option>
      <option value="Best Adapted Screenplay"></option>
      <option value="Best Original Screenplay"></option>
    </select>
  </datalist>
</div>

The value given in the list attribute (awards) refers to the ID of the datalist. Doing this associates the datalist with the input field. Although wrapping the options with a <select> element isn't strictly necessary, it helps when applying polyfills for browsers that haven't implemented the feature.

While the input field seems to be just a normal text input field, when typing in the field, a selection box appears below it (in supporting browsers) with matching results from the datalist. In the following screenshot, we can see the list in action (Firefox). In this instance, as B is present in all options within the datalist, all the values are shown for the user to select from:

However, when typing D instead, only the matching suggestions appear as shown in the following screenshot:

The list and datalist don't prevent a user entering different text in the input box but they do provide another great way of adding common functionality and user enhancement through HTML5 markup alone.