Для указания обязательных полей используется атрибут – Как сделать валидацию на форме. HTML5 и его атрибуты для проверки формы. Что же мы будем делать

использование встроенных функций для проверки

От автора: валидация ввода формы в HTML5 — это то, к чему следует относиться серьезно. Без надлежащей валидации, если повезет, вы получите только много ненужных и несоответствующих вводимых данных. Однако существует также вероятность того, что хакеры смогут заполучить личные данные пользователей, которые доверили вам свою информацию.

Поскольку валидация важна, имеет смысл использовать инструменты и библиотек для проверки и очистки данных как для front-end, так и для back-end.

В этом руководстве основное внимание будет уделено использованию встроенных функций HTML5 для проверки различных типов ввода без каких-либо внешних библиотек. Очевидно, что вам не следует останавливаться только на проверке на основе HTML5, но это было бы хорошим началом для повышения безопасности форм на вашем веб-сайте.

Элемент ввода формы

Всякий раз, когда вы хотите получить какую-то информацию от своих пользователей, вы, скорее всего, будете использовать HTML-элемент input. Неважно, хотите ли вы получить имя пользователя, его фамилию, адрес электронной почты, город, в котором они в настоящее время живут, номер телефона или любимую спортивную команду. Элемент input является очень удобным способом получения информации от посетителей.

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

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

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

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

Обе эти проблемы можно легко решить, используя с элементами формы некоторые атрибуты HTML5.

Атрибут type

Атрибут type определяет, какой тип ввода считается действительным для данного элемента. Если для атрибута type не указано значение, по умолчанию устанавливается тип text. Это в основном означает, что все виды вводимого текста будут считаться действительными для этого конкретного элемента.

Это полезно, когда вы хотите, чтобы пользователи вводили свои имена. Однако, когда вы хотите, чтобы они ввели адрес электронной почты или числа, такие как их возраст и вес, гораздо лучше установить для атрибута type что-то подходящее. Вот несколько значений, которые вы можете выбрать:

email: Пользователю будет предложено ввести адрес электронной почты в корректном формате. Например, они не могут просто написать myemail.com или что-то@ или @кое-что. Им нужно будет ввести значение, аналогичное [email protected] Конечно, они все равно могут вводить несуществующие адреса электронной почты, но это другая проблема!

number: Позволяет обеспечить, чтобы допустимыми являлись только цифры. Например, когда вы в форме спрашиваете кого-то о его возрасте, он не сможет предоставить данные в формате «картофель» или «тридцать шесть». Ему нужно будет написать фактическое число, например, 36 или 15.

url: Вы можете установить для атрибута type url, чтобы пользователи вводили действительный URL-адрес. В этом случае они не смогут ввести что-то вроде tutsplus. Кроме того, tutsplus.com также будет считаться недействительным — пользователям необходимо будет ввести полный URL-адрес, например https://tutsplus.com.

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

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

Следующая демо-версия на CodePen показывает, как мы можем использовать атрибут type для управления тем, что разрешено для различных полей ввода.

Атрибуты минимальной и максимальной длины

Еще один способ ограничить то, что является валидным вводом для элемента — использовать атрибуты minlength и maxlength. Они устанавливают минимальное и максимальное количество символов, которые необходимо ввести в элемент ввода, чтобы сделать его действительным.

Необходимое значения для обоих этих атрибутов будут варьироваться в зависимости от конкретного случая. Например, некоторые веб-сайты могут требовать, чтобы имя пользователя было длиной от 4 до 15 символов, в то время как другие могут ограничивать максимальную длину до 12 символов. Аналогично, люди в некоторых странах будут иметь необычно короткие или длинные имена по сравнению с другими.

Использование регулярных выражений для валидации формы

Установка значения атрибута type, безусловно, помогает ограничить то, что считается допустимым вводом. Однако вы можете пойти еще дальше и указать шаблон, которому должны следовать имя пользователя или адрес электронной почты, чтобы считаться действительными.

Допустим, вы хотите убедиться, что имена пользователей — это только буквенно-цифровые значения. Это можно легко реализовать с помощью атрибута pattern. Вам просто нужно установить для него регулярное выражение, которое будет действовать как ориентир, чтобы определить, какие входные данные будут действительными, а какие нет.

Вот несколько примеров использования регулярных выражений с атрибутом pattern.

<input type="text" name="uname" pattern="[a-zA-Z0-9]+" minlength="4" maxlength="10">

<input type="text" name="uname" pattern="[a-zA-Z0-9]+" minlength="4" maxlength="10">

Приведенный выше шаблон будет проверять, чтобы все имена пользователей содержали только символы от a до z, от A до Z или от 0 до 9. Например, monty42, 42monty, MON42ty и mon42ty являются допустимыми именами пользователей, а monty_42 — нет.

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

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

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

Атрибуты minlength и maxlength помогут убедиться, что имя пользователя не является слишком коротким или слишком длинным.

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

<input type="text" name="uname" pattern="_[a-zA-Z0-9]+" minlength="4" maxlength="10">

<input type="text" name="uname" pattern="_[a-zA-Z0-9]+" minlength="4" maxlength="10">

Теперь каждое имя пользователя, которое не начинается с _ и содержит какие-либо символы, кроме a-z, A-Z или 0-9, будет считаться недействительным.

Я надеюсь, теперь вы понимаете, как мы можем использовать атрибут pattern и регулярные выражения, чтобы ограничить то, что считается допустимым вводом, даже когда для атрибута type установлено значение text.

Расширенная валидация с помощью шаблонов регулярных выражений

Вы также можете использовать атрибут pattern вместе с другими типами элементов ввода, такими как email и url, чтобы ограничить то, что считается допустимым. Например, вы хотите, чтобы пользователи вводили только URL-адрес, который является поддоменом tutsplus.com. Вы можете просто установить для атрибута pattern значение https://.*\.tutsplus.com. Теперь любой ввод, такой как https://google.com или https://envato.com, будет считаться недействительным. Даже если вы используете URL-адрес tutsplus.com, начинающийся с http://, он будет недействительным, поскольку предполагается, что URL-адрес должен начинаться с https: //.

То же самое можно сделать с адресами электронной почты. Если вы хотите, чтобы они заканчивались чем-то конкретным, вы можете просто использовать для этого атрибут pattern. Например:

<input type="email" pattern="[email protected]\.com|[email protected]\.com">

<input type="email" pattern="[email protected]\.com|[email protected]\.com">

Если в форме используется вышеуказанный элемент ввода, пользователи смогут ввести только адрес электронной почты, который заканчивается на tutsplus.com или envato.com. Это означает, что [email protected] или [email protected] будут недействительными.

Обязательные поля и заполнитель текста

Хотя атрибуты required и placeholder не обязательно связаны с валидацией, они могут быть использованы для улучшения пользовательского опыта, когда кто — то заполняет форму.

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

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

Атрибут placeholder также весьма полезен, когда речь идет об удобстве формы. Например, если вы не укажете пользователям, что им нужно вводить URL-адреса, начинающиеся с https: // и являющиеся поддоменами tutsplus.com, они могут просто сдаться после неудачной попытки ввести в поде URL-адреса something.com или code.tutsplus.com.

В следующем примере мы использовали атрибуты pattern, required и placeholder для большего контроля над валидацией и улучшения взаимодействия с пользователем.

<form> <label for="name">Name: *</label> <input type="text" name="name" pattern="[a-zA-Z]+" placeholder="Monty" required> <br> <label for="name">Company Email Address: *</label> <input type="email" name="email" placeholder="[email protected]" pattern="[email protected]\.com" required> <br> <label for="name">Age: </label> <input type="number" name="age" min="10" max="80" placeholder="30"> <br> <label for="name">Favorite Tuts+ Website: *</label> <input type="url" name="website" pattern="https://.*\.tutsplus\.com" placeholder="https://code.tutsplus.com" required> </form>

<form>   <label for="name">Name: *</label>   <input type="text" name="name" pattern="[a-zA-Z]+" placeholder="Monty" required>   <br>   <label for="name">Company Email Address: *</label>   <input type="email" name="email" placeholder="[email protected]" pattern="[email protected]\.com" required>   <br>   <label for="name">Age: </label>   <input type="number" name="age" min="10" max="80" placeholder="30">   <br>   <label for="name">Favorite Tuts+ Website: *</label>   <input type="url" name="website" pattern="https://.*\.tutsplus\.com" placeholder="https://code.tutsplus.com" required> </form>

Заключение

В этом руководстве мы узнали, как добавить базовую валидацию для форм, просто используя HTML и регулярные выражения. Использование правильного значения для атрибута type позволяет обеспечить, чтобы пользователи вводили информацию в поле ввода в определенном формате. Использование регулярных выражений с атрибутом pattern может помочь нам ограничить допустимый ввод.

Наконец, мы узнали, как использовать атрибут placeholder, чтобы обеспечить удобство форм, которые мы создаем, и чтобы люди, заполняющие информацию, не расстраивались, потому что они не знают формат ввода, который мы считаем допустимым.

Автор: Monty Shokeen

Источник: https://code.tutsplus.com

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

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

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

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

PSD to HTML

Верстка сайта на HTML5 и CSS3 с нуля

Смотреть

Валидация в HTML5 / Habr

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

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

Валидация в HTML5

До появления HTML5 фронт-энд разработчики были ограничены в проверке пользовательского ввода использованием JavaScript. Это был утомительным и подверженный ошибкам процесс. Для улучшения проверки на стороне клиента, HTML5 ввел алгоритм проверки ограничений, который работает в современных браузерах, и проверяет правильность пользовательского ввода.

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

Кроме тех типов входных данных, которые уже существовали до HTML5 (text, password, submit, reset, radio, checkbox, button, hidden), мы можем также использовать следующие смысловые HTML5 типы: email, tel, url, number, time, date, datetime, datetime-local, month, week, range, search, color.

Мы можем безопасно использовать типы входных данных в формате HTML5 со старыми браузерами, так как они будут вести себя как поле в браузерах, которые не поддерживают их.

Пара примеров атрибутов для валидации

Использование следующих семантических атрибутов для валидации может быть очень полезным и даже может помочь нам больше, чем мы думаем:

1) required
Required является самым известным атрибутом в валидации HTML. У него не может быть значения. Просто теги, которые использует этот атрибут, не должны быть пустыми.

 <input type="text" name="text" class=”mytext” required>

Он может быть использован в следующих инпутах: url, email, text, password, date, month, week, tel, search, select, textarea, file, checkbox, time, number. Например, пользователь может забыть ввести значение в поле ввода. В этом случае сообщение об ошибке будет высвечивается до тех пор, пока это поле не будет заполнено правильно. Поэтому важно всегда визуально обозначать для пользователя поля, обязательные для заполнения.

2) maxlength
Этот атрибут позволяет установить максимальную длину вводимого текста для текстового поля ввода. Maxlength может быть использован в следующих инпутах: textarea, password, url, tel, text и search.

В этом textarea лимит символов будет до 350.

<textarea name="message" cols="40" rows="6" maxlength="350"></textarea>

Maxlength не покажет ошибку, но браузер не позволит пользователю ввести больше указанного числа символов. Хорошим примером может быть тег tel — pole для телефонного номера, который не может иметь больше определенного количества символов, или формы обратной связи, где мы не хотим, чтобы пользователи писали сообщения больше определенной длины.

3) max, min
Атрибут min и max могут помочь указывать диапазон между минимальном и максимальном номером. Мы можем использовать эти атрибуты в следующих инпутах: date, time, week, range, number и month. В следующем примере мы можем видеть минимальную и максимальную разницу в возрасте от 18 до 65 лет.

<input type="age" name="age" min="18" max="65">

Если пользователь введет возраст до 17 лет или после 66 лет, то он получит сообщение об ошибке, при том что этот запрос не будет отправлен на сервер.

4) step
Атрибут step можно использовать для числового интервала. В следующем примере есть input number где мы указываем минимальный и максимальный год, но мы добавляем step=”4”. Это означает, что при каждом изменении значение будет меняться с шагом 4 года.

<input type="number" name="leapyear" min="1972" max="2016" step="4">

Пользователь может также ввести значение вручную в поле ввода, но в этом случае, если оно не соответствует ограничениям, браузер выдаст сообщение об ошибке.

5) pattern
Атрибут паттерн использует регулярное выражение для валидаций этого поля. Регулярное выражение представляет собой заранее определенный набор символов, которые образуют определенный шаблон. Мы можем использовать его либо для поиска строк, которые следуют шаблону, либо для обеспечения определенного формата, определенного шаблона.

Приведенный ниже пример требует от пользователей ввести пароль, который содержит минимально 8 символов, и включает по крайней мере одну букву и одну цифру:

<input type="password" name="password" required pattern="^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,}$">

Заключение

В этой статье мы рассмотрели то, как использовать предоставляемый браузером алгоритм проверки форм и ограничений в HTML5. Обычно мы можем это делать с помощью JavaScript или PHP, но для начала, чтобы оптимизировать обращение к базе данных или посторонним скриптам, мы можем использовать HTML5.

учимся любить формы / Habr

Примечание: ниже находится перевод тезисов доклада «Learning to Love Forms» с конференции «WebVisions 2007» (автор Aaron Gustafson). Докладчик рассказывает о верстке форм, используя корректный и эффективный XHTML/CSS-код.

• Формы — это необходимое зло. Людям свойственно усложнять формы, хотя они могут быть представлены весьма просто.
• Рассматривайте верстку форм как создание обычного XHTML-кода. Но будьте готовы к несоответствиям со стороны браузеров и применению хаков.
• Разбивайте сложные формы на несколько простых частей.
• Старайтесь обеспечивать максимальную семантическую ценность кода.
• Не усложняйте дизайн форм.

XHTML & CSS приемы

1. Элемент FORM создает форму.
2. Единственным обязательным его атрибутом является ACTION, и он всегда должен быть URI.
3. По умолчанию METHOD выставляется в GET.
4. Атрибут NAME устарел, используйте вместо него ID.
5. Элемент FIELDSET используется для группировки связанных полей формы. Может быть вложенным.
6. Элемент LEGEND должен использоваться, чтобы обеспечить заголовок для FIELDSET.
7. Внутри формы можно использовать P или DIV. Если требуется обеспечить последовательность полей формы, можно воспользоваться OL (нумерованный список). Это поможет сохранить порядок расположения элементов.
8. Элемент INPUT является стандартным полем ввода.
9. NAME и ID. NAME используется для серверной части, ID — для клиентской. Чтобы избежать конфликтов ID, можно использовать для них значений «название формы-название поля».
10. TEXTAREA — поле ввода с несколькими строками. Обязательные атрибуты ROWS и COLS.
11. Элемент LABEL обеспечивает связь текста с полем ввода. Внутренняя связь подразумевает внесение поля ввода в LABEL (можно использовать для соответствующего оформления). Внешняя связь достигается назначением для атрибута FOR у LABEL значения, равного ID у соответствующего поля ввода.
12. Кнопки используются для обработки событий формы. Применяются элементы INPUT и BUTTON. Использование BUTTON более гибко и обеспечивает больше функций.
13. Выставление размера шрифта в 62.5% сбрасывает размер шрифта в 10 пикселей для всех браузеров.
14. Отображение LEGEND очень сильно варьируется от браузера к браузеру. Отступ снизу обрабатывается корректно, поля очень часто игнорируются.
15. Устанавливайте вид курсора в указатель (pointer, прим.: input.button {cursor:hand;cursor:pointer}), чтобы обозначить возможное действие для кнопок.
16. Вывод текста: можно использовать label:after для выставления типа после названий полей (прим. IE не поддерживает :after).
17. Кнопки: INPUT по умолчанию отображаются как системные элементы для текущей ОС. BUTTON достаточно хорошо отображается, как блочный элемент. С помощью стилей и картинок можно добиться любого оформления. BUTTON может содержать, практически, любой элемент: P, UL и т. д. В IE при использовании нескольких кнопок они все отправляют данные одновременно. В результате, для корректной обработки нужен JavaScript для нескольких BUTTON на странице.
18. SELECT позволяет выбрать один или несколько OPTION. Атрибут VALUE является опциональным (по умолчанию, отправляется содержание OPTION).
19. OPTGROUP может быть использовать для группировки OPTION в SELECT. Отображается как список с отступом. OPTGROUP не может быть вложенным.
20. Обычно ширина SELECT на 4 пикселя больше той, что вы определяете для этого элемента.
21. Для изменения оформления у элемента SELECT можно использовать замену списков (Select Replacement). Допускается также вставка фоновых картинок (для корректной работы потребуется включенный JavaScript).
22. FIELDSET будет хорошим решением для организации группы селективных кнопок или флажков. Используйте LEGEND для вывода вопроса или утверждения (как заголовка к такой группе). Списки UL также могут быть достойным решением. Для оформления в IE6 потребуются внутренние хаки.
23. Выставляйте прозрачный цвет фона для селективных кнопок, чтобы избежать бага в IE (отображается серый цвет фона).
24. Чтобы оформить названия к селективным кнопкам используйте относительное позиционирование (position:relative) и примерно 2 пикселя для верхнего отступа (padding-top:2px).
25. LEGEND игнорирует атрибут WIDTH. Для выставления правильного размера можно использовать вложенный элемент SPAN.
26. В формах поиска в методе лучше указывать GET, чтобы результата можно было добавить в закладки (bookmark).
27. При указании на более, чем одно поле можно использовать LEGEND вместо LABEL.
28. Можно убрать названия полей со страницы, сместив их сильно влево. Это позволит увеличить доступность страницы (прим.: для текстовых браузеров и других пользовательских агентов).
29. Используйте атрибут CLASS для определения связей между элементами формы.
30. LABEL может содержать более одного поля ввода.
31. Можно использовать DD для группировки элементов формы, когда одно из полей ввода используется, как селектор верхнего уровня.
32. Вложенные LABEL можно использовать для флажков и селективных кнопок. С помощью них можно выставить требуемую ширину.
33. Обязательные поля ввода. Можно использовать элемент ABBR для обозначения звездочки у обязательных полей. Можно использовать всплывающую подсказку через атрибут TITLE для пояснения полей формы. ABBR игнориуется в IE6.
34. Подсказки. Могут быть вложены в EM. С помощью CSS можно добиться перекрытия текстом подсказки поля ввода (прим.: это еще зачем? так же данные вводить неудобно).
35. Сообщения об ошибках. Лучше обеспечить их появление максимально быстро, чтобы пользователи их заметили. Можно использовать STRONG внутри LABEL. Сообщения должны быть оформлены в виде простого текста об ошибке и способах ее исправления. Также могут содержать ссылки на то место, где прозошла ошибка (прим.: наверное, имеется в виду, в частности, перевод фокуса сразу на поле ввода, которое требуется исправить).
36. Можно использовать JavaScript для скрытия сообщения об ошибке, как только она была исправлена.

Спасибо всем, кто ознакомился с переводом тезисов. Буду рад комментариям.

Web Optimizator: проверка скорости загрузки сайтов

Разметка форм в HTML5

Эта статья – первая из цикла статей об онлайн-формах HTML5, всего их будет 3. До перехода к стилевому оформлению и API проверке со стороны клиента в Java Script, в данной статье мы рассмотрим базовые понятия о разметке. Я советую вам прочитать об этом, даже если вы уже имеете представление о формах, так как в этой статье будут описаны многие новые атрибуты и подводные камни их использования.

Продолжение: Обзор форм HTML5: CSS (вторая статья)
Продолжение: Формы HTML5: Java Script и проверка с Constraint Validation API (третья статья)

Формы HTML могут показаться обычным делом, но они имеют большое значение при разработке как веб-сайтов, так и приложений. В версии HTML4 список доступных полей ввода включал только следующие виды:

• input type="text"
• input type="checkbox"
• input type="radio"
• input type="password"
• input type="hidden" — для ввода данных, которые не видны юзеру
• input type="file" — для загрузки
• textarea — для ввода объемных текстов
• select — для выпадающих списков
• button — как правило применяется для отправки формы, как альтернативу можно применять и input type="submit" и input type="image".

Другие ограничения:

• - ограничены возможности стилевого оформления при помощи CSS,
• - специализированные элементы управления, включая выбор даты и цветовой палитры, нужно разрабатывать с помощью кода, и
• - для проверки со стороны клиента нужен JavaScript.

Новые виды полей ввода в HTML5

В арсенале HTML5 появился целый ряд новых видов полей ввода. Они сами по себе помогают при вводе данных и обеспечивают валидацию без кода Java Script…

вид поля	применение
email	для ввода электронного адреса
tel	для ввода номера телефона – строгий порядок написания необязателен, но переносы строк будут удалены
url	для ввода URL
search	поисковое поле с автоматически удаляющимися переносами строк
number	для ввода чисел с плавающей точкой
range	для создания элемента управления, позволяющего вводить примерные значения, обычно для этого используется слайдер
date	для ввода даты (день, месяц и год)
datetime	для ввода даты (день, месяц, год) и времени (час, минута, секунда, микросекунда) в соответствии с текущим часовым поясом UTC.
datetime-local	для ввода даты и времени без учета местного времени
month	для ввода месяца и года без учета местного времени
week	для ввода порядкового номера недели без учета местного времени
time	для ввода времени без учета местного времени
color	задать цвет

Атрибуты полей ввода

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

<input type="email" name="email" required />

Хотя вы можете и добавить значения, если предпочитаете более строгий порядок как в XHTML. Например:

<input type="email" name="email" required="required" />

атрибут	применение
name	название поля ввода
value	исходное значение
checked	Выделяет флажок или переключатель
maxlength	Максимально возможная длина строки для ввода. Также можно применять с текстовыми областями в HTML5
minlength	минимально возможная длина строки для ввода. Хотя возможность использования данного атрибута прописана, во время ввода символов поддержка браузера недостаточна, и происходит так, что система проверки достоверности в HTML выдает ошибку.Как альтернативу можно использовать pattern=".{3,}", который обеспечит наличие по крайней мере трех символов.
placeholder	подсказка с бледным шрифтом внутри окна для ввода.
autofocus	установка фокуса на данное видимое поле ввода во время загрузки страницы
required	показывает, что необходимо ввести значение
pattern	удостоверяет, что значение и регулярное выражение соответствуют
min	Минимальное установленное значение (для чисел и дат)
max	Максимальное установленное значение (для чисел и дат)
step	Степень дробления значения. Например, код input type="number" min="10" max="19" step="2" сделает возможными следующие значения: 10, 12, 14, 16 or 18.
autocomplete	обеспечивает подсказку для браузера о возможности авто-заполнения, например, «e-mail» для расчетов, или может быть переведен в положение «on» или «off» для того, чтобы, соответственно, активировать или дезактивировать эту функцию
inputmode	определяет метод ввода данных. Наиболее важными являются следующие методы: verbatim — не текстовый контент, например, имя юзера latin — латинский шрифт, такой как поля поиска latin-name — имена собственные, т.е. первая буква является заглавной latin-prose — обычный текстовый контент, например, сообщения, твиты и так далее numeric — ввод числовых значений, к которым не подходят атрибуты number или range, например, для ввода номеров кредитных карт
size	размер символов вводимого текста или пароля или число пикселей для полей ввода e-mail, телефона или поля поиска. Вероятно, не стоит его использовать , если вы используете CSS для оформления стилей полей ввода.
rows	число строк текста (только для текстовых областей)
cols	число колонок текста (только для текстовых областей)
list	Указывает на установленный список опций
spellcheck	Может принимать значения «true» или «false», чтобы активировать или дезактивировать функцию проверки орфографии вводимого текста
form	Идентификационный номер формы, к которой относится указанное поле ввода. Как правило, поля ввода должны находиться внутри формы, но данный атрибут разрешает определить местоположение поля ввода в любой части страницы
formaction	определяет URI, заменяющее действие формы при отправке (только для кнопок или изображений подтверждения отправки)
formmethod	Определяет GET и POST, заменяющие метод формы при отправке (только для кнопок или изображений подтверждения отправки)
formenctype	Определяет вид контента при отправке формы (text/plain, multipart/form-data или application/x-www-form-urlencoded, только для кнопок или изображений подтверждения отправки)
formtarget	Устанавливает  целевое окно или фрейм, заменяющие атрибут form target при отправке (только для кнопок или изображений подтверждения отправки)
readonly	Вводимые данные невозможно изменить, хотя они и будут проверены и отправлены
disabled	Блокирует поле ввода, в этом случае не будет произведена валидации не будет и не будут отправлены данные.

Учитывайте, что тип поля date всегда использует формат ГГГГ-ММ-ДД для атрибутов value, min и max.
В примере, указанном ниже, мы видим поле для ввода обязательного e-mail с окончанием @mysite.com с фокусировкой на нем при первой загрузке страницы:

<input
  type="email"
  name="login"
  pattern="@mysite\.com$"
  autocomplete="email"
  autofocus
  required />

Datalist

datalist содержится набор подходящих опций для любого вида поля. Например:

<input type="text" name="browser" list="browsers" />
 
<datalist>
  <option value="Chrome" />
  <option value="Firefox" />
  <option value="Internet Explorer" />
  <option value="Safari" />
  <option value="Opera" />
</datalist>

Если datalist поддерживается, браузер выводит список возможных значений на выбор для автозаполнения, когда пользователь начинает печатать текст. Целый список выводится при двойном клике мышкой на элемент управления или при нажатии на стрелку «вниз»  (если она отображается). Если сравнивать с выпадающим списком с атрибутом select, в этом случае пользователь может ввести собственный вариант.

Можно устанавливать значения и текстовые описания подобно стандартным опциям выбора, например:

<option value="IE">Internet Explorer</option>

Но имейте в виду, что реализаций отличаются в зависимости от браузеров. 

Списки значений могут заполняться и с помощью Java Script, если вы хотели бы выбирать опции через Ajax.

Остановка валидации

Остановить проверку всей формы можно, если установить для элемента form атрибут novalidate. Как альтернативный способ, можно установить атрибут formnovalidate для кнопки или изображения подтверждения отправки.

Также помнете, что установление атрибута disabled для поля ввода отменит проверку данного поля.

Поля вывода

До этого мы рассматривали виды полей ввода, но в арсенале HTML5 также есть поля для вывода:

• output — результат вычисления или последствия действия юзера
• progress — индикатор процесса выполнения операции (состояние определяют атрибуты value и max)
• meter — поле вывода в виде шкалы, цвет которой может становиться красным, желтым или зеленым в зависимости от значений, установленных для атрибутов value, low, high, min, max и optimum.

Отделение и маркировка полей

Спецификация формы на сайте whatwg.org form specification устанавливает, что

Каждая часть формы считается абзацем и, как правило, отделяется от других частей при помощи тега <p>.

Интересно. В основном я использую для этого div, хотя не думаю, что есть какая-либо разница в значении. Тэг <p> более короткий, хотя в этом случае вам возможно будет нужно применить класс, чтобы изменить поля.

Учтите, что маркировки следует устанавливать или вокруг, или рядом с самим полем ввода с атрибутом for, который идентифицирует поле ввода, например:

<p>
  <p>
  <label for="firstname">First name</label>
  <input type="text" name="firstname" placeholder="first name" required maxlength="20" />
</p>
  
<p>
  <label for="lastname">Last name</label>
  <input type="text" name="lastname" placeholder="last name" required maxlength="20" />
</p>
  
<p>
  <label for="email">Email address</label>
  <input type="email" name="email" placeholder="[email protected]" required maxlength="50" />
</p>
  
<p>
  <label>
    <input type="checkbox" name="newsletter" />
    Sign up for our newsletter
  </label>
</p>

Нестандартные элементы управления

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

Поддержка браузерами

Далеко не все поля ввода данных и их атрибуты поддерживаются всеми браузерами. Как правило, основная часть современных браузеров начиная с IE10+ предоставляют возможность создания полей для ввода e-mail и чисел. Однако на момент написания этой статьи виды полей для ввода времени и дат были доступны только в браузерах Webkit и Blink.

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

Всегда нужно использовать правильный вид поля!

Ключевое значение имеет использование правильного вида поля для тех данных, которые вы ожидаете получить. Данное утверждение выглядит очевидным, но у вас еще будут ситуации, когда вас будет тянуть использовать стандартное поле для ввода текста.

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

1 - Стандартное поле для ввода дат всегда преобразовывает вводимые значения в формат ГГГГ-ММ-ДД вне зависимости от принятого формата даты принят в вашей местности.

2 - Firefox и IE вернутся к стандартному текстовому полю, а юзерам возможно нужно ввести даты в формате ММ-ДД-ГГГГ, принятом в США, или формате ДД-ММ-ГГГГ, принятом в европейских странах.

3 - Инструмент для выбора даты в Java Script и в jQuery UI дает возможность установить персонализованный формат вводимой даты – или даже ГГГГ-ММ-ДД для корректности – но нет гарантии, что на устройстве пользователя будет доступен Java Script.

Самое простое решение в этом случае – отказаться от применения поля ввода date в HTML5, возвратиться к текстовому полю и создать собственное управление датой. Не стоит этого делать. Вряд ли вы когда-нибудь сможете создать собственный элемент управления датой, который будет действовать на любых устройствах и со всеми экранными разрешениями, будет совместим с клавиатурой, мышью и сенсорами и будет продолжать работать при отсутствии Java Script. Так, в частности, браузеры для мобильных телефонов часто опережают обычные браузеры по набору доступных инструментов и обладают отличными элементами для сенсорного управления.

Виды полей HTML5 – это будущее в сайтостроении. Применяйте их и при необходимости добавляйте полизаполнители Java Script в случаях, когда вам требуется надежная кроссбраузерная поддержка. Но обратите внимание, что будет требоваться…

Проверка со стороны сервера

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

• баги браузера или ошибки Java Script, которые будут разрешать недействительные данные
• случаев, когда пользователь изменит ваш HTML, и когда скрипты будут использовать инструменты браузера
• переписывание данных из систем, находящихся вне контроля
• перехват данных во время их перемещения между браузером и сервером (как это бывает по HTTP)

Проверка со стороны клиента не заменяет и никогда не заменит проверку со стороны сервера. Проверка данных пользователя со стороны сервера является существенным условием, а со стороны клиента – желательным.

И, последнее, знайте, что даты можно получить в формате ГГГГ-ММ-ДД или в ином формате, который вы установили для пользователя (ММ-ДД-ГГГГ, ДД-ММ-ГГГГ и так далее) Проверяйте цифры в первых 4 символах или, в случае необходимости, используйте собственные методы анализа языка и оболочки даты.

В данной статье мы охватили большой объем материала. Следующая статья будет посвящена свойствам CSS, которые относятся к формам.