использование встроенных функций для проверки
От автора: валидация ввода формы в 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 (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 приемы
- Элемент
FORMсоздает форму. - Единственным обязательным его атрибутом является
ACTION, и он всегда должен быть URI. - По умолчанию
METHODвыставляется вGET. - Атрибут
NAMEустарел, используйте вместо негоID. - Элемент
FIELDSETиспользуется для группировки связанных полей формы. Может быть вложенным. - Элемент
LEGENDдолжен использоваться, чтобы обеспечить заголовок дляFIELDSET. - Внутри формы можно использовать
PилиDIV. Если требуется обеспечить последовательность полей формы, можно воспользоватьсяOL(нумерованный список). Это поможет сохранить порядок расположения элементов. - Элемент
INPUTявляется стандартным полем ввода. NAMEиID.NAMEиспользуется для серверной части,ID— для клиентской. Чтобы избежать конфликтовID, можно использовать для них значений «название формы-название поля».TEXTAREA— поле ввода с несколькими строками. Обязательные атрибутыROWSиCOLS.- Элемент
LABELобеспечивает связь текста с полем ввода. Внутренняя связь подразумевает внесение поля ввода вLABEL(можно использовать для соответствующего оформления). Внешняя связь достигается назначением для атрибутаFORуLABELзначения, равногоIDу соответствующего поля ввода. - Кнопки используются для обработки событий формы. Применяются элементы
INPUTиBUTTON. ИспользованиеBUTTONболее гибко и обеспечивает больше функций. - Выставление размера шрифта в
62.5%сбрасывает размер шрифта в 10 пикселей для всех браузеров. - Отображение
LEGENDочень сильно варьируется от браузера к браузеру. Отступ снизу обрабатывается корректно, поля очень часто игнорируются. - Устанавливайте вид курсора в указатель (pointer, прим.:
input.button {cursor:hand;cursor:pointer}), чтобы обозначить возможное действие для кнопок. - Вывод текста: можно использовать
label:afterдля выставления типа после названий полей (прим. IE не поддерживает:after). - Кнопки:
INPUTпо умолчанию отображаются как системные элементы для текущей ОС.BUTTONдостаточно хорошо отображается, как блочный элемент. С помощью стилей и картинок можно добиться любого оформления.BUTTONможет содержать, практически, любой элемент:P,ULи т. д. В IE при использовании нескольких кнопок они все отправляют данные одновременно. В результате, для корректной обработки нужен JavaScript для несколькихBUTTONна странице. SELECTпозволяет выбрать один или несколькоOPTION. АтрибутVALUEявляется опциональным (по умолчанию, отправляется содержаниеOPTION).OPTGROUPможет быть использовать для группировкиOPTIONвSELECT. Отображается как список с отступом.OPTGROUPне может быть вложенным.- Обычно ширина
SELECTна 4 пикселя больше той, что вы определяете для этого элемента. - Для изменения оформления у элемента
SELECTможно использовать замену списков (Select Replacement). Допускается также вставка фоновых картинок (для корректной работы потребуется включенный JavaScript). FIELDSETбудет хорошим решением для организации группы селективных кнопок или флажков. ИспользуйтеLEGENDдля вывода вопроса или утверждения (как заголовка к такой группе). СпискиULтакже могут быть достойным решением. Для оформления в IE6 потребуются внутренние хаки.- Выставляйте прозрачный цвет фона для селективных кнопок, чтобы избежать бага в IE (отображается серый цвет фона).
- Чтобы оформить названия к селективным кнопкам используйте относительное позиционирование (
position:relative) и примерно 2 пикселя для верхнего отступа (padding-top:2px). LEGENDигнорирует атрибутWIDTH. Для выставления правильного размера можно использовать вложенный элементSPAN.- В формах поиска в методе лучше указывать
GET, чтобы результата можно было добавить в закладки (bookmark). - При указании на более, чем одно поле можно использовать
LEGENDвместоLABEL. - Можно убрать названия полей со страницы, сместив их сильно влево. Это позволит увеличить доступность страницы (прим.: для текстовых браузеров и других пользовательских агентов).
- Используйте атрибут
CLASSдля определения связей между элементами формы. LABELможет содержать более одного поля ввода.- Можно использовать
DDдля группировки элементов формы, когда одно из полей ввода используется, как селектор верхнего уровня. - Вложенные
LABELможно использовать для флажков и селективных кнопок. С помощью них можно выставить требуемую ширину. - Обязательные поля ввода. Можно использовать элемент
ABBRдля обозначения звездочки у обязательных полей. Можно использовать всплывающую подсказку через атрибутTITLEдля пояснения полей формы.ABBRигнориуется в IE6. - Подсказки. Могут быть вложены в
EM. С помощью CSS можно добиться перекрытия текстом подсказки поля ввода (прим.: это еще зачем? так же данные вводить неудобно). - Сообщения об ошибках. Лучше обеспечить их появление максимально быстро, чтобы пользователи их заметили. Можно использовать
STRONGвнутриLABEL. Сообщения должны быть оформлены в виде простого текста об ошибке и способах ее исправления. Также могут содержать ссылки на то место, где прозошла ошибка (прим.: наверное, имеется в виду, в частности, перевод фокуса сразу на поле ввода, которое требуется исправить). - Можно использовать 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…
| вид поля | применение |
| для ввода электронного адреса | |
| 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 |
определяет метод ввода данных. Наиболее важными являются следующие методы:
|
| 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, которые относятся к формам.