New Form Attributes and Functions - PART 1

First, we’ll consider new attributes, functions, and a few elements that did not previously exist in earlier versions of HTML. Like the new input types, it is generally safe to use these attributes today, whether or not your target browser supports them. This is because the attributes will be safely ignored by any browser on the market today if the browser does not understand them.

The placeholder Attribute

The placeholder attribute gives input controls an easy way to provide descriptive, alternate hint text which is shown only when the user has not yet entered any values.

This is common in many modern user interface frameworks, and popular JavaScript frameworks have also provided emulation of this feature. However, modern browsers have it built-in.

To use this attribute, simply add it to an input with a text representation. This includes the basic text type, as well as the semantic types such as email, number, url, etc.

<label>Runner: <input name="name" placeholder="First and last name" required></label>

The autocomplete Attribute

The autocomplete attribute tells the browser whether or not the value of this input should be saved for future.

<input type="text" name="creditcard" autocomplete="off">

The autocomplete attribute should be used to protect sensitive user data from insecure storage in the local browser files.

The autofocus Attribute

The autofocus attribute lets a developer specify that a given form element should take input focus immediately when the page loads. Only one attribute per page should specify the autofocus attribute.

Behaviour is undefined if more than one control is set to autofocus.

To set the focus automatically to a control such as a search text field, simply set the autofocus attribute on that element alone:

<input type="search" name="criteria" autofocus>

Like other Boolean attributes, no value needs to be specified for the true case.

Note Autofocus can annoy users if they are not expecting a focus change. Many users utilize keystrokes for navigation, and switching focus to a form control subverts that ability. Use it only when it is a given that a form control should take all default keys.

#Next PART 2