Enhancing Your Web Forms with HTML5 - HTML5 Foundations - page 137

The datetime-local type is used to collect a date and time from users in a format that is consistent with their
local time zone. It is usually best to collect date and time combinations from the users using this type; otherwise, the
users would have to do the time conversion themselves (which is a pain and could lead to incorrect data).
Here is an example of a <input> element with the type datetime-local .
<input type="datetime-local" name="localDT" id="localDT">
HTML5 Input Attributes
As well as new input types, HTML5 also introduces a number of new attributes that can be used to make it
easier for users to fill in your web forms. In this section you learn how you can use these attributes to improve your
forms.
AutoComplete
Many web browsers have a feature called auto-complete that will fill in common form fields for you based on values
that you have used in the past, such as username, password, name, and telephone. The autocomplete attribute
enables you to control whether the browser should use its auto-complete feature for a certain field. The attribute has
three possible values: on , off, and default .
Setting the autocomplete value to default will inherit the browser's auto-completion setting. This is import-
ant because some users like to turn this feature off. Often, this can be done in the web browser's settings menu.
It sometimes can be useful to explicitly turn off auto-completion. For example, you might want to force users to in-
put their password into a log-in form rather than let the browser fill this field in for them.
Here is an example of how you could turn off auto-completion for the phone input in your form using the auto-
complete attribute.
<input type="tel" name="phone" id="phone" placeholder="e.g. 000-
000-0000" autocomplete="off" >
AutoFocus
The autofocus attribute can make it easier for users to start filling in a form because it will put the cursor into the
<input> element when the page loads. This prevents the need for the users to select the element with their mouse.
This might seem like a small optimization, but it can have a big impact on making your web pages easier to use.
You should apply the autofocus attribute only to one element on your page. If you apply it to more than one, the
browser will autofocus the last element that has the attribute in your HTML.
You used the autofocus attribute on the name input in your form.
<input type="text" name="name" id="name" placeholder="e.g. Joe
Balochio" autofocus >
Min and Max
The min and max attributes can be used to limit the range of valid entries for an <input> element. You don't have
to use both of these attributes together; you can specify a min but no max and vice versa.