HTML5 атрибуты форм (часть 1)

HTML5 атрибуты форм

От автора: данная статья является выдержкой из книги HTML5 и CSS3 для реального мира, 2-е издание за авторством Алексиса Гольдштейна, Луи Лазариса и Эстель Вейль. Книгу можно найти в магазинах по всему миру, а также купить цифровую версию.

Атрибут required

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

Если обязательное поле пустое, форма не отправится. Opera, Firefox, Internet Explorer 10+ и Chrome выдают пользователю сообщение с ошибкой. Например, «пожалуйста, заполните это поле» или «необходимо указать значение».

Заметка: пора сосредоточиться

Пора освежить память: элемент формы получает фокус по клику на поле мышкой, касанию поля пальцем на устройстве с тачскрином, нажатию клавиши tab на клавиатуре, а также по клику или касанию на лейбл, привязанный к этому элементу формы. В полях input ввод с клавиатуры забивает данные в сам элемент.

По терминологии JS событие focus срабатывает на элементе, когда он получает фокус, а событие blur запускается при потере фокуса.

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

В CSS для стилизации элементов с фокусом можно использовать псевдокласс :focus.

Атрибут required подходит для любых типов полей кроме button, submit, image, range, color и hidden. У всех этих типов есть значение по умолчанию, поэтому данный атрибут здесь лишний. Как и с другими Булевыми атрибутами, синтаксис простой: required или required=»required» на XHTML.

Добавим атрибут required в форму регистрации. Сделаем обязательными поля имя, email, пароль и начальная дата оформления подписки:

<ul>
  <li>
 <label for="register-name">My name is:</label>
 <input type="text" id="register-name" name="name" required aria-required="true">
  </li>
  <li>
 <label for="email">My email address is:</label>
 <input type="text" id="email" name="email" required aria-required="true">
  </li>
  <li>
 <label for="url">My website is located at:</label>
 <input type="text" id="url" name="url">
  </li>
  <li> 
 <label for="password">I would like my password to be:</label>
 <p>(at least 6 characters, no spaces)</p>
 <input type="password" id="password" name="password" required aria-required="true">
  </li>
  <li>
 <label for="rating">On a scale of 1 to 10, my knowledge of HTML5 is:</label>
 <input type="text" name="rating" type="range">
  </li>
  <li>
 <label for="startdate">Please start my subscription on:</label>
 <input type="text" id="startdate" name="startdate" required aria-required="true">
  </li>
  <li>
 <label for="quantity">I would like to receive <input type="text" name="quantity" id="quantity"> copies of <cite> The HTML5 Herald</cite></label>
  </li>
  <li>
 <label for="upsell">Also sign me up for <cite>The CSS3 Chronicle</cite></label>
 <input type="checkbox" id="upsell" name="upsell" value="CSS Chronicle">
  </li>
  <li>
 <input type="submit" id="register-submit" value="Send Post Haste">
  </li>
</ul>

Заметка: улучшаем доступность

Для улучшения доступности можно добавить WAI-ARIA атрибут aria-required=»true». Большая часть браузеров и скрин ридеров уже имеют встроенную поддержку атрибута required, так что скоро WAI-ARIA атрибут станет не нужен. Краткое введение в WAI-ARIA смотрите в Приложении В.

На рисунках 4.1, 4.2 и 4.3 показано поведение атрибута required при попытке отправить форму.

HTML5 атрибуты форм

Рисунок 1 сообщение о проверке обязательного поля в Firefox

HTML5 атрибуты форм

Рисунок 2 сообщение в Opera

HTML5 атрибуты форм

Рисунок 3 и в Google Chrome

Стилизация обязательных полей формы

Обязательные поля формы можно стилизовать через псевдокласс required, необязательные поля через псевдокласс optional (или с помощью отрицательного псевдокласса :not(:required)). Также можно стилизовать валидные и невалидные поля с помощью :valid и :invalid. Эти псевдоклассы и немного CSS магии подскажут зрячим пользователям, какие поля обязательны, а также сообщат об успешном вводе данных:

input {
  background-position: 0% 50%;
  background-repeat: no-repeat;
  padding-left: 15px;
}
input:required {
  background-image: url('../images/required.png');
}
input:focus:invalid { 
  background-image: url('../images/invalid.png');
} 
input:focus:valid { 
  background-image: url('../images/valid.png');
}

Мы добавим фоновое изображение (звездочку) к обязательным полям формы. Использовать сгенерированный контент на полях input не получится, он заменяется на пустые элементы. Поэтому мы добавим фоновое изображение. Также добавим разные фоновые изображения для валидных и невалидных полей. Изменения будут видны только при получении элементом фокуса, чтобы не загромождать форму.

Предупреждение: Firefox применяет стили к невалидным элементам

Обратите внимание, что Firefox применяет свои стили к невалидным элементам (красная тень). Посмотреть пример можно на рисунке 1 выше. Возможно, вы захотите избавиться от нативной тени с помощью CSS:

:invalid { box-shadow: none; }

Совет: таргетированные стили для старых браузеров

Старые браузеры типа IE8 и IE9 не поддерживают псевдокласс :required, но можно использовать таргетированные стили с помощью селектора с атрибутом:

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее
input:required,
input[required] {
  background-image: url('../images/required.png');
}

Этот атрибут можно использовать как хук для валидации форм в браузерах без поддержки HTML5 валидации форм. JS код может проверять инпуты без значений на наличие атрибута required и не отправлять форму, если таковой найден.

Атрибут placeholder

Атрибут placeholder позволяет отображать небольшую подсказку (если таковая имеется) внутри поля формы, которая будет говорить пользователю, какой тип данных принимается данным полем. Текст плейсхолдера пропадает, когда поле получает фокус, и пользователь ввел хотя бы один символ. Подсказка появляется снова, когда значение становится null. Разработчики уже много лет пользовались похожим функционалом на JS. Добавлялось временное значение, которое по фокусу очищалось. Сейчас же HTML5 атрибут placeholder позволяет сделать это нативно без подключения JS. Текст остается виден до тех пор, пока не будет введено значение.

В форме регистрации на сайте The HTML5 Herald мы добавим атрибут placeholder к полю URL и стартовой дате подписки:

<li>
  <label for="url">My website is located at:</label>
  <input type="text" id="url" name="url" placeholder="e.g. http://example.com">
</li>
…
<li>
  <label for="startdate">Please start my subscription on:</label>
  <input type="text" id="startdate" name="startdate" required aria-required="true" >
</li>

В IE поддержка атрибута placeholder появилась только с версии 10. Текст подсказки исчезает, как только пользователь ввел данные. Поэтому не стоит полагаться только на такой способ информирования пользователей. Если подсказка не помещается в поле, опишите требования в атрибуте title данного поля, лейбле или рядом с полем. Многие советуют добавлять «например» в подсказку, чтобы точно дать понять, что это плейсхолдер, а не заполненные данные.

Все браузеры с Safari 4, Chrome 10, Opera 11.1, Firefox 4, Android 2.3 и Internet Explorer 10 поддерживают атрибут placeholder, хотя начальная имплементация placeholder удаляла текст при получении фокуса, а не при вводе текста.

Поддержка полифилов на JS

Как и все остальное в этой главе, атрибут placeholder не будет лишним даже в старых браузерах без поддержки.

Как с атрибутом required, атрибут placeholder и его значение можно использовать в старых браузерах. Однако для этого понадобится небольшой JS полифил.

Что нужно сделать: сперва с помощью JS определите браузеры без поддержки. Затем с помощью функции создайте ложный плейсхолдер. Функция должна определить, в каких полях есть атрибут placeholder, после чего временно взять из них контент и вставить его в качестве значения в атрибут value.

Далее необходимо настроить два обработчика событий: первый для очистки значения поля по фокусу, второй для замены значения placeholder по событию blur, если значение поля осталось пустым. Если хотите воспользоваться этим трюком, проверьте, чтобы значение атрибута placeholder не совпало с тем, что может вбить пользователь. Можете использовать приставку «например», чтобы дать понять, что плейсхолдер это просто пример, а не правильное значение. Не забудьте очистить ложный плейсхолдер при отправке формы. Или вы получите много “(XXX) XXX-XXXX подписок!

Рассмотрим пример кода на JS, который с помощью техники прогрессивного улучшения работает с элементами формы, у которых есть атрибут placeholder.

Полифил плейсхолдера:

<script>
  // проверка на поддержку
  if(!Modernizr.input.placeholder) {
  // get all the form controls with the placeholder attribute
  var fcToCheck = document.querySelectorAll("*[placeholder]"),
 frmsToCheck = document.querySelectorAll('form'),
 i, count;

  // прогоняем в цикле элементы формы с атрибутом placeholder,
  // копируем значение плейсхолдера в value, очищаем по фокусу и
  // сбрасываем значение по событию blur, если поле осталось пустым
  for(var i = 0, count = fcToCheck.length; i < count; i++) {
 if(fcToCheck.value == "") {
 fcToCheck.value = fcToCheck.getAttribute("placeholder");
 fcToCheck.classList.add('placeholder');
 fcToCheck.addEventListener('focus', function() {
 if (this.value==this.getAttribute("placeholder")) {
 this.value = '';
 this.classList.remove('placeholder');
 }
 });
 fcToCheck.addEventListener('blur', function() {
 if (this.value == '') {
 this.value = this.getAttribute("placeholder");
 this.classList.add('placeholder');
 }
 });
 }
  }

  for(i = 0, count = frmsToCheck.length; i < count; i++) {

 frmsToCheck.addEventListener('submit', function(e) {
 var i, count, plcHld;

 // сперва делаем все проверки по обязательным
 // элемента и валидации формы.
 // удаляем плейсхолдер только перед отправкой формы
 plcHld = this.querySelectorAll('[placeholder]');
 for(i = 0, count = plcHld.length; i < count; i++){
 //если плейсхолдер все еще равен value
 if(plcHld.value == plcHld.getAttribute('placeholder')){
 // не отправляем, если есть required
 if(plcHld.hasAttribute('required')) {
 // создаем сообщение с ошибкой
 plcHld.classList.add('error');
 e.preventDefault();
 } else {
 // если нет required, очищаем value перед отправкой.
 plcHld.value = '';
 }
 } else {
 // удаляем устаревшее сообщение об ошибке
 plcHld.classList.remove('error');
 }
 }
 });
  }
</script>

Первое, на что следует обратить внимание в этом скрипте – это то, что для определения поддержки атрибута placeholder мы используем JS библиотеку Modernizr. В Приложении А Modernizr описана более подробно. Сейчас же достаточно знать, что эта библиотека дает нам целый набор свойств с true и false для определенных HTML5 и CSS3 нововведений. Свойство, которое мы будем использовать, говорит само за себя. Modernizr.input.placeholder будет true, если браузер поддерживает placeholder, и false, если нет.

Если мы определили, что placeholder поддерживается, необходимо взять все элементы на странице с атрибутом placeholder. Далее у всех полей проверяется значение на пустоту, после чего значение заменяется на значение атрибута placeholder. В процессе всего этого элементу добавляется класс placeholder, через который можно осветлить цвет шрифта через CSS или сделать его наоборот больше похожим на родной. Когда пользователь фокусируется на поле с ложным плейсхолдером, скрипт очищает значение и удаляет класс. Когда пользователь смещает фокус, скрипт проверяет поле на значение. Если оно пусто, текст плейсхолдера и класс возвращаются.

Перед отправкой формы необходимо проверить все поля формы на совпадение значения с атрибутом placeholder. Также можно было бы проверить, остался ли класс placeholder на обязательных полях при отправке формы. Если в форме нужно что-то исправить, мы формируем сообщение об ошибке и запрещаем отправку. Если форма валидна, очищаем значения плейсхолдеров. Очищаем только плейсхолдеры обязательных полей.

Перед добавлением кнопки сброса формы подумайте, а захотят ли ваши пользователи стереть все данные. Если ответ да, и вы добавите кнопку сброса, учтите, что после нажатия на reset ложные плейсхолдеры исчезнут, а класс placeholder останется, так как он используется в полифиле.

Это хороший пример HTML5 полифила: с помощью JS мы добавляем поддержку только в те браузеры, в которых ее нет. И делаем это мы с помощью HTML5 элементов и атрибутов, которые уже есть в разметке, не прибегая к дополнительным классам и жестким значениям в JS коде.

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

Автор: Alexis Goldstein, Estelle Weyl, Louis Lazaris

Источник: https://www.sitepoint.com/

Редакция: Команда webformyself.

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее
Самые свежие новости IT и веб-разработки на нашем Telegram-канале

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Получить

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree