От автора: несомненно, вы каждый день взаимодействуете в Сети по меньшей мере с одной формой. Занимаетесь ли вы поиском контента, или входите в свой аккаунт на странице Facebook’а* – в вебе применение онлайн-форм является одной из самых обычных задач. Для дизайнеров и разработчиков создание форм отличается некоторым однообразием, особенно написание для них скриптов валидации данных. HTML5 представляет множество новых атрибутов, типов input и прочих элементов инструментария разметки.
В этой статье мы сосредоточимся на изучении новых атрибутов, а в следующей рассмотрим типы ввода данных.
Станет видно, что новые свойства значительно облегчат нам жизнь при произведении впечатления на пользователей. Что тут самое привлекательное? Применять их можно уже сейчас. Мы начнем с очень краткой истории форм HTML5.
Эта статья – отрывок из Главы 6 книги Начинаем изучать HTML5 и CSS3: Эволюция Сети (Beginning HTML5 and CSS3: The Web Evolved) Кристофера Мерфи, Оли Стадхольма, Ричарда Кларка и Дивья Маньяна (Christopher Murphy, Oli Studholme, Richard Clark и Divya Manian), опубликованной издательством Apress.
Примечание: Так как эта статья является отрывком из книги, с момента создания скриншотов выполнение браузером атрибутов и типов ввода данных могло измениться. К тому же с момента публикации могла расшириться браузерная поддержка, поэтому по вопросу ее текущего состояния, пожалуйста, обратитесь к приведенным в конце статьи ссылкам.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Узнать подробнееИстория форм HTML5
Раздел форм в HTML5 изначально был спецификацией под названием Web Forms 2.0, где добавлялись новые типы инструментов управления формами. Начатая в Opera и редактировавшаяся тогдашним сотрудником Opera Айэном Хиксоном (Ian Hickson), она была утверждена W3C в начале 2005г. Работа изначально проводилась W3C. Затем ее объединили со спецификацией Web Applications 1.0 с целью создания основы спецификации HTML5 отколовшейся рабочей группы Web Hypertext Application Technology Working Group (WHATWG).
Применение принципов дизайна HTML5
Одна из лучших характеристик форм HTML5 – то, что сразу же можно применять почти все новые типы ввода данных и атрибуты. Им не требуются никаких дополнительных фишек, хаков и прочих заплаток. Не то, чтобы они все уже «поддерживались», но в современных браузерах, которые по-настоящему их поддерживают, они способны проделывать классные вещи – и красиво деградировать в тех браузерах, которые их не понимают. Все это – благодаря дизайнерским принципам HTML5. В данном случае мы особо ссылаемся на принцип красивой деградации. В целом, непростительно не начать сразу применять эти функции. Фактически это будет значить, что вы находитесь впереди планеты всей.
Атрибуты форм HTML5
В этой статье мы рассмотрим 14 следующих новых атрибутов.
placeholder
Первым идет атрибут placeholder, который позволяет нам установить текст-заполнитель, что до последнего времени делалось в HTML4 с помощью атрибута value. Его можно применять только для коротких описаний. Для более длинных применяйте атрибут title. Различие с HTML4 состоит в том, что текст показывается, только когда поле пустое и не в фокусе. Как только поле попадает в фокус (например, при щелчке мышью или указании на поле), и вы начинаете печатать, текст просто исчезает. Очень похоже на поле поиска в Safari.
Давайте разберемся, как выполнять атрибут placeholder.
|
1 |
<input type="text" name="user-name" id="user-name" placeholder="at least 3 characters"> |
Вот так! Я слышу, как вы думаете: «Что такого в нем примечательного? Я всю жизнь делал это в JavaScript’е». Да, верно. Однако с HTML5 он становится частью браузера, означая, что требуется писать меньше скрипта для достижения более доступного кроссбраузерного решения (даже при отключенном JavaScript’е). На рисунке показана работа атрибута текста-заполнителя в Chrome’е.
Браузеры, не поддерживающие атрибут placeholder, игнорируют его, поэтому он не станет выполняться. Однако включив его, вы улучшаете впечатление тех пользователей, чьи браузеры обеспечивают его поддержку, а также гарантируете своему сайту перспективность. Все современные браузеры поддерживают текст-заполнитель.
Примечание: Для назначения стилей тексту-заполнителю не существует официального псевдокласса, но и Mozilla (создатели Firefox), и WebKit предлагают для свойств стилей вендорные префиксы (-mozplaceholder и –webkit-input-placeholder). Можно с уверенностью предполагать, что псевдокласс станет стандартом стилей текста-заполнителя. Подробности можно узнать из тематической дискуссии по этому вопросу в списке рассылки WHATWG.
autofocus
Автофокус делает в точности то, что означает. Добавлении его к input автоматически фокусирует поле при отображении страницы. Как и в случае с placeholder’ом, в прошлом для autofocus’а мы применяли JavaScript.
Однако у традиционных методов JavaScript’а имеются серьезные проблемы юзабилити. Например, если пользователь начинает заполнять форму до полной загрузки скрипта, он будет (неприятно) возвращен после загрузки к первому полю формы. Атрибут autofocus в HTML5 обходит эту проблему, фокусируясь по мере загрузки документа, при этом не нужно ждать загрузки JavaScript’а. Однако мы рекомендуем применять его для предотвращения проблем с юзабилити только для тех страниц, чья единственная цель – форма (типа Google’а).
Это – булев атрибут (за исключением случаев, когда вы пишете XHTML5; смотрите примечание) и выполняется как здесь:
|
1 |
<input type="text" name="first-name" id="first-name" autofocus> |
Его поддерживают все современные браузеры и, как placeholder, не выполняющие autofocus браузеры просто игнорируют его.
Примечание: Некоторые новые атрибуты формы HTML5 –булевы. Это просто означает, что они устанавливаются, если имеются, и не устанавливаются, если отсутствуют. В HTML5 их можно записать несколькими различными способами.
|
1 2 3 |
autofocus autofocus="" autofocus="autofocus" |
Однако при написании XHTML5 вам следует применять стиль autofocus=»autofocus».
autocomplete
Атрибут autocomplete помогает пользователям заполнять формы на основе предыдущего введения данных. Атрибут употребляется со времен IE5.5, но окончательно был стандартизирован как часть HTML5. По умолчанию он активен. Это значит, что в основном нам не придется его применять. Однако, если хотите настоять на введении в поле формы каждый раз после ее заполнении (в противоположность автозаполнения поля браузером), то выполните его следующим образом:
|
1 |
<input type="text" name="tracking-code" id="tracking-code" autocomplete="off"> |
Состояние автозаполнения поля отменяет любое состояние autocomplete, установленное на содержащем элементе формы.
required
Атрибут required не требует представления; как и autofocus, он делает именно то, что вы от него ожидаете. При добавлении его в поле формы браузер требует от пользователя ввести данные в это поле до отправки формы. Он заменяет базовую валидацию формы, в данное время выполняемую с помощью JavaScript’а, делая все более удобным и экономя нам еще немножко времени разработки. required – это булев атрибут, как autofocus. Давайте посмотрим его в действии.
|
1 |
<input type="text" id="given-name" name="given-name" required> |
В настоящее время required реализован только в Opera 9.5+, Firefox 4+, Safari 5+, Internet Explorer 10 и Chrome 5+, так что до поры до времени вам придется продолжить писать скрипты проверки заполнения полей на клиентской стороне прочих браузеров (*кхе-кхе* IE!). Opera, Chrome и Firefox показывают пользователю при отправке формы сообщение об ошибке. В большинстве браузеров ошибки затем локализуются на основе задекларированного языка. Safari не показывает сообщение об ошибке при отправке, а вместо этого помещает это поле в фокус.
Отображение по умолчанию сообщения об ошибке «required» зависит от отдельного браузера; в настоящее время «пузырю» с сообщением об ошибке во всех браузерах нельзя назначать стили CSS. У Chrome’а, тем не менее, имеется собственное свойство, которое можно применять для назначения стилей сообщению об ошибке. Питер Гастон (Peter Gasston) написал статью о синтаксисе. Также можно назначить стили вводу данных с помощью псевдокласса :required. Альтернатива состоит в отмене формулировки и стилей в JavaScript’е с помощью метода setCustomValidity(). Также очень важно не забывать, что такая браузерная валидация не заменяет валидацию серверную.
pattern
Атрибут pattern обычно сильно волнует многих разработчиков (ну, настолько волнует, как любой атрибут формы). Он определяет JavaScript регулярное выражение для поля, значение которого нужно проверить. Pattern облегчает нам применение отдельной проверки кодов, номеров счетов и так далее. Возможности pattern обширны, и вот всего лишь один простой пример с использованием номера продукта.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Узнать подробнее|
1 2 3 |
<label>Product Number: <input pattern="[0-9][A-Z]{3}" name="product" type="text" title="Single digit followed by three uppercase letters."/> </label> |
Этот шаблон предписывает, что номер продукта должен быть одной цифрой [0-9], за которой следуют три заглавные буквы [A-Z]{3}. Посмотреть еще шаблоны можно на вебсайте шаблонов HTML5, где имеется перечень обычных регулярных выражений шаблонов стиля для того, чтобы помочь вам начать с ними работать.
Как и в случае с required, Opera 9.5+, Firefox 4+, Safari 5+, Internet Explorer 10 и Chrome 5+ — единственные браузеры, поддерживающие в настоящее время шаблоны. Однако остальные скоро их нагонят по причине быстрого продвижения рынка браузеров.
Элементы list и datalist
Атрибут list дает пользователю возможность ассоциировать список опций с отдельным полем. Значение атрибута списка list должно быть таким же, как ID элемента datalist, находящегося в том же документе. Элемент datalist для HTML5 является новым и представляет предопределенный список опций элементов управления формы. Он работает аналогично внутрибраузерным полям поиска, автоматически дополняющим слова при введении текста.
Следующий пример показывает, как сочетаются list и datalist.
|
1 2 3 4 5 6 7 8 9 10 |
<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> |
Добавив элемент select в datalist, можно обеспечить отличную деградацию, просто применив элемент option. Вот шаблон элегантной разметки, созданной Джереми Кейтом (Jeremy Keith), идеально подходящий принципам постепенной деградации HTML5.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<label>Your favorite fruit: <datalist id="fruits"> <select name="fruits"> <option value="Blackberry">Blackberry</option> <option value="Blackcurrant">Blackcurrant</option> <option value="Blueberry">Blueberry</option> <!-- … --> </select> If other, please specify: </datalist> <input type="text" name="fruit" list="fruits"> </label> |
Браузерная поддержка list и datalist в настоящее время ограничена Opera 9.5+, Chrome 20+, Internet Explorer 10 и Firefox 4+.
multiple
На шаг вперед можно продвинуть свои list и datalist, применив булев атрибут multiple, чтобы можно было ввести из перечня данных более одного значения. Вот пример.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<label>Your favorite fruit: <datalist id="fruits"> <select name="fruits"> <option value="Blackberry">Blackberry</option> <option value="Blackcurrant">Blackcurrant</option> <option value="Blueberry">Blueberry</option> <!-- … --> </select> If other, please specify: </datalist> <input type="text" name="fruit" list="fruits" multiple> </label> |
Однако multiple не применяется исключительно с datalist. Дальнейшим примером употребления multiple могут быть адреса электронной почты при пересылке элементов другу или вложении файлов, как показано здесь:
|
1 2 |
<label>Upload files: <input type="file" multiple name="upload"></label> |
multiple поддерживается в Firefox 3.6+, Safari 4+, Opera 11.5+, Internet Explorer 10 и Chrome 4+.
novalidate и formnovalidate
Атрибуты novalidate и formnovalidate обозначают, что при отправке формы не нужно проводить проверку правильности данных. Они оба – булевы атрибуты. formnovalidate может быть применен к input-ам с типом submit или image. Атрибут novalidate можно установить только к элементу form.
Пример использования атрибута formnovalidate может быть приведен на кнопке «сохранить черновик», где у формы есть поля, нужные для отправки черновика, но не требующиеся для сохранения черновика. novalidate будет применяться в тех случаях, когда вам не нужно делать валидацию формы, но требуется добиться преимуществ более удобного пользовательского интерфейса, предлагаемых новыми типами ввода данных.
Применение formnovalidate видно на следующем примере:
|
1 2 3 4 5 |
<form action="process.php"> <label for="email">Email:</label> <input type="text" name="email" value="gordo@example.com"> <input type="submit" formnovalidate value="Submit"> </form> |
А этот пример показывает применение novalidate:
|
1 2 3 4 5 |
<form action="process.php" novalidate> <label for="email">Email:</label> <input type="text" name="email" value="gordo@example.com"> <input type="submit" value="Submit"> </form> |
form
Атрибут form используется для соединения элементов input, select или textarea с формой (известных как владельцы формы). Применение form означает, что элементу не нужно быть дочерним по отношению к связанной форме и его можно оттуда убрать в исходниках. Основной случай его применения состоит в том, что кнопки, размещенные в таблицах, теперь можно привязать к форме.
|
1 |
<input type="button" name="sort-l-h" form="sort"> |
formaction, formenctype, formmethod и formtarget
Каждый из атрибутов formaction, formenctype, formmethod и formtarget имеет соответствующий атрибут к элементу form, с чем вы познакомитесь в HTML4, так что давайте пройдемся по ним вкратце. Эти новые атрибуты были представлены главным образом потому, что вам могут потребоваться альтернативные действия для различных кнопок отправки, в противоположность нескольким формам в документе.
formaction
formaction определяет файл или приложение, которое будет отправлять форма. Он действует так же, как атрибут action на элемент form, и может применяться только с кнопкой отправки или изображения (type=»submit» или type=»image»). При отправке формы браузер сначала проверяет наличие атрибута formaction; если тот отсутствует, он продолжает искать в форме атрибут action.
|
1 |
<input type="submit" value="Submit" formaction="process.php"> |
formenctype
formenctype подробно описывает, как данные формы кодируются методом POST. Он действует так же, как атрибут enctype на элемент формы, и может применяться с кнопкой отправки или изображения (type=»submit»или type=»image»). Значение по умолчанию, если не включено – application/x-www-formurlencoded.
|
1 |
<input type="submit" value="Submit" formenctype="application/x-www-form-urlencoded"> |
formmethod
formmethod определяет, который из методов HTTP (GET, POST, PUT, DELETE) будет применяться для отправки данных формы. Действует так же, как атрибут метода на элемент формы, и используется только с кнопкой отправки или изображения (type=»submit» или type=»image»).
|
1 |
<input type="submit" value="Submit" formmethod="POST"> |
formtarget
formtarget определяет target window для результатов формы. Действует так же, как атрибут target на элемент form, и может применяться только с кнопкой отправки или изображения (type=»submit» or type=»image»).
|
1 |
<input type="submit" value="Submit" formtarget="_self"> |
Резюме атрибутов формы
Мы рассмотрели несколько новых атрибутов формы, помогающих улучшить пользовательское впечатление и сэкономить вам время разработки. Можно обсудить еще некоторые новые атрибуты, которые раскрываются вместе с новыми типами ввода данных HTML5 в следующей статье этой серии.
Форму-модель, в которой применяются некоторые из приведенных в этой статье примеров, можно найти на демо-странице форм HTML5.
В статье мы дали понять, которые из браузеров имеют поддержку типов ввода данных и атрибутов форм HTML5. При условии постоянного выхода новых версий браузеров может быть сложно уследить за тем, что поддерживается, а что нет. Если хотите быть в курсе текущего прогресса, мы предлагаем посещать canius или FindMeByIP или изучение форм HTML5 с Wufoo.
Автор: Richard Clark
Источник: //html5doctor.com/
Редакция: Команда webformyself.
* Признана экстремистской организацией и запрещена в Российской Федерации.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Узнать подробнее
Комментарии (1)