Формы в HTML5

HTML5 привносит много новых возможностей и совершенствований в технологию веб-форм.

С целью повышения удобства просмотра веб-страниц были разработаны и добавлены новые атрибуты и способы ввода данных.

Синтаксис веб-форм в HTML5 такой же, какой был и в HTML4:

Используйте атрибут novalidate в теге формы, чтобы избежать её проверки браузером при отправке.

Новые атрибуты

В HTML5 появился новый атрибут заполнителя placeholder. В элементах <input> и <textarea> этот атрибут содержит подсказку для пользователя о том, какая информация может быть введена в данное поле.

<form>
<label for="email">Ваш электронный адрес:</label>
<input type="text" name="email" placeholder="email@example.com">
</form>

Атрибут autofocus ставит курсор в нужное поле ввода, когда форма загрузится:

<form>
<label for="email">
Ваш электронный адрес:
</label>
<input type="text" name="email" autofocus>
</form>

Атрибут required указывает браузеру, что заполнение формы необходимо:

<form autocomplete="off">
<label for="email">
Ваш электронный адрес:
</label>
<input name="Email" type="text" required>
<input type="submit" value="Отправить">
</form>

Атрибут autocomplete используется для автозаполнения формы браузером в зависимости от последних введённых пользователем данных.

Новые типы ввода в HTML5

В HTML5 добавлены новые поля ввода input type:

date
time
datetime
datetime-local
month
week
number
range
search
email
url
tel
color

Новые атрибуты полей ввода в HTML5:

placeholder
autofocus
required
min и max
pattern
multiple
step
form
formaction
formenctype
formmethod
formnovalidate
formtarget

Поля ввода, не поддерживаемые старыми браузерами, будут восприниматься ими как поля ввода text.