Skip to content

Неделя HTML5 - Формы - Часть 2

Привет, друзья! Добро пожаловать обратно в серию «Неделя HTML5». В прошлом уроке мы рассматривали новые поля ввода в HTML5, сегодня продолжим улучшать формы. Вы узнаете о новых атрибутах, которые позволят свести ваш JavaScript-код к минимуму.

Вот те атрибуты, которые мы рассмотрим за сегодня:

  • placeholder
  • autofocus
  • autocomplete
  • required
  • pattern
  • list
  • novalidate и formnovalidate

placeholder

В этом атрибуте прописывается замещающий текст, который виден только тогда, когда данное поле пустое и без фокуса. Если же поле получает фокус текст пропадает. Думаю многие использовали для такого фокуса JavaScript и атрибут value, когда стандартное значение пропадает при фокусирование на поле. Теперь все это сделает атрибут placeholder. Давайте взглянем как это работает. Вот такой код:

<input type="text" name="user-name" id="user-name" placeholder="at least 3 characters">

Сделает вот такое:

Атрибут placeholder без фокуса и с фокусом
Атрибут placeholder без фокуса и с фокусом

Старые браузеры без поддержки placeholder попросту игнорируют данный атрибут.

autofocus

Думаю из названия понятно для чего служит данный атрибут, конечно же, для автоматической фокусировки. То есть когда страница будет загружена, то поле с таким атрибутом автоматически получит фокус. Раньше такой эффект делали на JavaScript, но тот способ был несколько корявым для юзабилити. Так как если страница будет долго загружаться, но пользователь уже видит некоторое содержание, то если он начнет заполнять форму и в этот неловкий момент страница загрузится до конца, то его перебросит на поле, установленное в JavaScript. Это, безусловно, будет раздражать. Такого бага нет с autofocus. Вот пример кода для данного атрибута:

<input type="text" name="first-name" id="first-name" autofocus>

Но здесь небольшая оговорка: если вы будете использовать HTML5, то для автоматической фокусировке на поле ввода можно использовать такие варианты атрибутов:

autofocus
autofocus=""
autofocus="autofocus"

Но ежели вы будете использовать XHTML5, то здесь использовать можно только autofocus="autofocus"

autocomplete

Вы часто пишите комментарии на других блогах. Тогда вспомните как вы заполняете поля формы комментариев. Думаю чаще всего вы фокусируете поле ввода а потом кликаете по нему еще раз, чтобы увидеть как раньше вы заполняли данное поле. Это вполне полезно, но иногда надо запретить такую возможность, например, для формы авторизации. Так вот это делается через атрибут autocomplete, по умолчанию он находится в значении on, поэтому вы и можете быстро заполнить такие поля комментария, как «Имя», «E-mail» и «Сайт». А следующий пример, наоборот, запретит автоматическое заполнение:

<input type="text" name="tracking-code" id="tracking-code" autocomplete="off">

required

Благодаря данному атрибуту «умные» браузеры будут требовать от пользователя заполнения поля, к которому добавлен атрибут required, благодаря чему форма не пройдет не заполненной. Давайте посмотрим на него в действии.

<input type="text" id="given-name" name="given-name" required="">

Сейчас данный атрибут поддерживается браузерами Opera 9.5 +, Firefox 4 +, Safari 5 +, Internet Explorer 10 и Chrome 5 +. Если обязательное поле не будет заполнено и пользователь попытается отправить форму, тогда поле получит фокус и в брауерах Opera, Chrome, Firefox появится предупреждающее сообщение о том, что поле необходимо заполнить:

Сообщение, что поле обязательно к заполнению
Сообщение, что поле обязательно к заполнению

pattern

Атрибут pattern позволяет нам задать, какому регулярному выражению должно соответствовать, введенное в поле, значение. Очень полезно будет использовать его с полем email для проверки эл.почты по своему регулярному выражению. Потому что стандартно e-mail считается правильным, если он состоит из двух частей разделенных знаком @. К примеру так за e-mail сойдет и следующая запись [email protected], но она не будет являться адресом, т.к. не указан домен. Вот такое поле для ввода email будет более удобным:

<input type="email" pattern="([email protected][a-zA-Z_]+?.[a-zA-Z]{2,6})">

Как видите в атрибут pattern вписывается регулярное выражение, но без слешов перед и после регулярным выражением (как это делается в JavaScript).

Атрибут list и элемент datalist

Атрибут list позволяет нам связать какое-либо поле с каким-нибудь списком вариантов значений, которые задаются через тег <datalist>. Данный атрибут list принимает в качестве значения индификатор элемента datalist.

<datalist> — это новый тег HTML5, значения в который заносятся также, как для простого <select>, через теги <option>. Теперь как его использовать, вот код:

<label>Your favorite fruit:
<datalist id="fruits">
<option value="Blackberry">Blackberry</option>
<option value="Blackcurrant">Blackcurrant</option>
<option value="Blueberry">Blueberry</option>
<!-- … -->
</datalist>
If other, please specify:
<input type="text" name="fruit" list="fruits">
</label>

Вот что мы из этого получим:

Использование Datalist
Использование Datalist

Поддерживается браузерами Opera 9.5+, Chrome 20+, Internet Explorer 10 и Firefox 4+

novalidate и formnovalidate

Данные атрибуты говорят браузеру, что нет необходимости в проверки формы. Из-за этого поля не будут проверяться на правильность заполнения (см. required и pattern).

Например, данные атрибуты можно использовать для сохранения черновика. Но атрибут formnovalidate используется для кнопки отправки, а атрибут novalidate используется для элемента формы.

Пример для запрета проверки формы (через атрибут кнопки formnovalidate):

<form action="process.php">
<label for="email">Email:</label>
<input type="text" name="email"value="[email protected]">
<input type="submit" formnovalidate value="Submit">
</form>

Второй пример с использованием атрибута формы novalidate:

<form action="process.php" novalidate>
<label for="email">Email:</label>
<input type="text" name="email"value="[email protected]">
<input type="submit" value="Submit">
</form>

Заключение

Мы рассмотрели несколько новых атрибутов формы, которые помогут улучшить пользовательский опыт и сэкономить время разработки.

Данная запись является частью серии "Неделя HTML5".

Неделя HTML5 - Формы - Часть 1

Неделя HTML5 - Специальные приемы