HTML5 формы: типы тега input (часть 1)

HTML5 формы: типы тега input

От автора: вы должны знать про атрибут type в поле input. Этот атрибут задает тип инпута в форме, который будет видеть пользователь. Если атрибут пропущен, или используется новое значение в старом браузере, тег все равно будет работать. Будет задан тип по умолчанию type=”text”. Это основной момент, который позволяет использовать HTML5 формы уже сегодня, даже если вы поддерживаете старые браузеры. Если у вас есть новые типы, например, email или search, то в старых браузерах отобразится простое текстовое поле.

В нашей форме регистрации используется 4 из 10 типов, которые вы все знаете: checkbox, text, password и submit. Ниже приведен полный список доступных в HTML5 типов поля input:

button

checkbox

file


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

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

hidden

image

password

radio

reset

submit

text

В спецификации HTML5 говорится про еще 9 дополнительных типов, с помощью которых можно создавать специфичные UI-элементы, а также проводить нативную валидацию данных:

search

email

url

tel

date

time

number

range

color

В HTML5.1 и WHATWG HTML Living Standard включены еще четыре типа, связанных с датой, три из которых довольно хорошо поддерживаются в современных браузерах:

datetime-local

month

week

datetime (не поддерживается ни в одном браузере)

Давайте детально разберем каждый новый тип, а также посмотрим, как их можно использовать.

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

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

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

Search

Тип инпута search (type=”search”) – это поисковое поле, однострочный инпут для ввода одной или более поисковых фраз. Из спецификации:

«Разница между текстовым типом и типом поиска чисто стилистическая: на платформах, где поля поиска отличаются от обычных текстовых полей, поисковой тип приведет input в соответствие со стилями платформы.»

Множество браузеров стилизуют поисковые поля под манер браузерных или поисковых блоков операционной системы. Chrome, Safari, Opera и IE добавили функцию удаления текста по клику на иконку «х», которая появляется, как только начинается ввод текста (см. на Рисунке 4.5). В Chrome и Opera также очищаются поля даты/времени, а IE11 добавляет иконку «х» почти ко всем типам, в том числе и к текстовым.

HTML5 формы: типы тега input

Рисунок 4.5. поле типа search стилизовано под поисковые поля операционной системы

На устройствах кампании Apple поисковые поля имеют скругленные углы по умолчанию в Chrome, Safari и Opera, что дублирует внешний вид поисковых полей в самой операционной системе. На планшетах с динамической клавиатурой кнопка «Перейти» отображается в виде иконки поиска или слова «искать». Все зависит от устройства. Если добавить нестандартный атрибут, то в Chrome и Opera появится иконка лупы.

Можно по-старому использовать type=”text”, однако новый тип search – это визуальная подсказка пользователям, куда им нужно нажать, чтобы найти сайт. Кроме того, новый тип очень похож на стандартные поля поиска, к которым привыкли пользователи. На сайте The HTML5 Herald нет поиска, но он мог быть таким:

<form id="search" method="get"> 
  <label for="s">Search</label> 
  <input type="search" id="s" name="s"/> 
  <input type="submit" value="Search"/> 
</form>

В браузерах без поддержки тип search отображается в виде обычного текстового поля, поэтому нет причин не использовать его там, где это подходит.

Email адреса

Не удивительно, но тип email (type=”email”) используется для установки одного или нескольких email адресов. Он поддерживает Булев атрибут multiple, с помощью которого через запятую (с пробелом) можно указать несколько адресов.

Давайте изменим нашу форму, поставим type=”email” на поля с электронной почтой:

<label for="email">My email address is</label> 
<input type="email" id="email" name="email"/>

Если поменять тип с text на email, не произойдет никаких визуальных изменений. Input все так же выглядит, как обычное текстовое поле. Однако они отличаются.

Изменения можно посмотреть на сенсорном устройстве. Когда поле email получает фокус, на большинстве сенсорных устройств (например, iPad или Android телефон с Chromium) отобразится клавиатура, оптимизированная для ввода адреса электронной почты. На клавиатуре появится символ @, точка, пробел, но не будет запятой, как показано на Рисунке 4.6.

HTML5 формы: типы тега input

Рисунок 4.6. поле типа email с пользовательской клавиатурой на устройстве под управлением iOS

В браузерах Firefox, Chrome, Opera и Internet Explorer 10 при неправильном вводе почты выскакивает сообщение об ошибке. Это происходит, когда вы пытаетесь отправить форму с текстом, который не распознался как один или несколько адресов. Стандартное сообщение об ошибке показано на Рисунке 4.7.

HTML5 формы: типы тега input

Рисунок 4.7. сообщение об ошибке о неправильном вводе адреса электронной почты в браузере Opera (слева) и Firefox (справа)

Заметка: пользовательские сообщения о проверке

Не нравится стандартное сообщение об ошибке в браузере? Установите свое с помощью .setCustomValidity(errorMsg). SetCustomValidity принимает лишь один параметр – сообщение об ошибке. Если установлено свое сообщение о проверке, то после правильного ввода необходимо очистить строку с сообщением (значение false), чтобы форма отправилась:

function setErrorMessages(formControl) {
  var validityState_object = formControl.validity;
  if (validityState_object.valueMissing) {
 formControl.setCustomValidity('Please set an age (required)'); 
  } else if (validityState_object.rangeUnderflow) {
 formControl.setCustomValidity('You\'re too young');
  } else if (validityState_object.rangeOverflow) {
 formControl.setCustomValidity('You\'re too old');
  } else if (validityState_object.stepMismatch) {
 formControl.setCustomValidity('Counting half birthdays?');
  } else {
 //если ввод валидный, должно быть false, или будет ошибка 
 formControl.setCustomValidity('');
  }
}

К сожалению, изменить можно только само сообщение, а не его внешний вид. По крайней мере, пока.

URL

Тип url (type=”url”) используется для установки веб-адресов. Как и email, поле не отличается от текстового. На большинстве сенсорных устройств клавиатура будет оптимизирована под ввод веб-адресов (будет слэш / и сокращение .com).

Обновим нашу форму регистрации, добавим поля типа url:

<label for="url">My website is located at:</label> 
<input type="url" id="url" name="url"/>

Валидация URL

С IE10 все современные браузеры поддерживают тип url и не пропускают значение, если оно началось не с протокола. Подходит только общий формат протокола URL, поэтому, например, запись q://example.xyz будет валидна, несмотря на то, что q:// не является реальным протоколом, а .xyz не домен верхнего уровня. Если необходимо, чтобы вводимое значение соответствовало какому-то более конкретному формату, добавьте эту информацию в лейбл (или плейсхолдер). Используйте атрибут pattern для проверки.

Телефонные номера

Для телефонных номеров используйте тип tel (type=”tel”). В отличие от url и email тип tel не использует четкий синтаксис или шаблон. Буквы и цифры, валидны любые символы кроме символа новой строки и возврата каретки. Такой подход был выбран не просто так: по всему мир в разных странах телефонные номера имеют разную длину и пунктуацию, просто невозможно определить единый стандарт. Например, в США +1(415)555-1212 то же самое, что 415.555.1212. Однако кампании могут использовать буквы в телефонных номерах, например, (800)CALL-NOW.

Можно установить определенный формат, добавив правильный синтаксис в плейсхолдер или после поля. Также формат можно прописать в атрибуте pattern. Добавьте заголовок с атрибутом pattern, так появится всплывающая подсказка. Это улучшает UX нативного сообщения об ошибке.

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

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

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

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


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

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

Самые свежие новости 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