Сайт о телевидении

Последнее обновление: 08.04.2016

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

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

Для создания валидации у элементов форм HTML5 используется ряд атрибутов:

required : требует обязательного ввода значения. Для элементов textarea, select, input (с типом text, password, checkbox, radio, file, datetime-local, date, month, time, week, number, email, url, search, tel)

min и max : минимально и максимально допустимые значения. Для элемента input с типом datetime-local, date, month, time, week, number, range

pattern : задает шаблон, которому должны соответствовать вводимые данные. Для элемента input с типом text, password, email, url, search, tel

Атрибут required

Атрибут required требует обязательного наличия значения:

Логин:

Пароль:

Если мы не введем в эти поля никаких данных, оставив их пустыми, и нажмем на кнопку отправки, то браузер высветит нам сообщения об ошибке, а данные не будут отправлены на сервер:

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

Атрибуты max и min

Для ограничения диапазона вводимых значений применяются атрибуты max и min:

Возраст:

Атрибут pattern

Атрибут pattern задает шаблон, которому должны соответствовать данные. Для определения шаблона используется язык так называемых . Рассмотрим самые простейшие примеры:

Телефон:

Здесь для ввода номера телефона используется регулярное выражение \+\d-\d{3}-\d{3}-\d{4} . Оно означает, что первым элементом в номере должен идти знак плюс +. Выражение \d представляет любую цифру от 0 до 9. Выражение \d{3} означает три подряд идущих цифры, а \d{4} - четыре цифры подряд. То есть это выражение будет соответствовать номеру телефона в формате "+1-234-567-8901".

Если мы введем данные, которые не соответствуют этому шаблону, и нажмем на отправку, то браузер отобразит ошибку:

Отключение валидации

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

Телефон:

Свойства HTMLInputElement.value в JavaScript.

Let theText = myTextInput.value;

Если для ввода нет ограничений проверки (см. « для получения более подробной информации»), это может быть пустая строка ("").

Использование текстовых входов

элементы text типа создают базовые однострочные входы. Вы должны использовать их везде, где вы хотите, чтобы пользователь вводил однострочное значение, и для сбора этого значения не существует более конкретного типа ввода (например, если это date , URL , email или поисковый запрос , у вас есть лучшие варианты).

Основной пример

Choose a username:

Submit

Это делает так:

При отправке пары имени / значения данных, отправленной на сервер, будет uname=Chris (если «Крис» был введен как входное значение перед отправкой). Не забывайте включать атрибут name в элемент , иначе значение текстового поля не будет включено в данные.

Установка заполнителей

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

Choose a username:

Submit

Вы можете увидеть, как создается заполнитель:

Заполнитель обычно отображается в более светлом цвете, чем цвет переднего плана элемента, и автоматически исчезает, когда пользователь начинает вводить текст в поле (или всякий раз, когда поле имеет значение, установленное программно, путем установки его атрибута value .

Размер физического ввода

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

Choose a username:

Submit

Проверка

Элементы text типа не имеют автоматической проверки, применяемой к ним (поскольку базовый ввод текста должен быть способен принимать любую произвольную строку), но есть некоторые варианты проверки на стороне клиента, которые мы обсудим ниже.

Примечание . Проверка HTML-формы не является заменой серверных скриптов, которые гарантируют, что введенные данные находятся в правильном формате. Для кого-то слишком легко внести коррективы в HTML, которые позволяют им обойти проверку или полностью удалить ее. Также возможно, чтобы кто-то просто полностью обходил ваш HTML-код и отправлял данные прямо на ваш сервер. Если ваш серверный код не может проверить данные, которые он получает, может произойти катастрофа, если в вашу базу данных будут введены неверно отформатированные данные (или слишком большие данные, неправильный тип и т. Д.).

Заметка о стилизации

Существуют полезные псевдоклассы, доступные для элементов формы стилей, чтобы помочь пользователю увидеть, когда их значения действительны или недействительны. Они :valid и :invalid . В этом разделе мы будем использовать следующий CSS, который поместит метку проверки (отметки) рядом с входами, содержащими допустимые значения, и крестик (X) рядом с входами, содержащими недопустимые значения.

Div { margin-bottom: 10px; position: relative; } input + span { padding-right: 30px; } input:invalid+span:after { position: absolute; content: "✖"; padding-left: 5px; } input:valid+span:after { position: absolute; content: "✓"; padding-left: 5px; }

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

Требуется ввод данных

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

Choose a username:

Submit

Это делает так:

Если вы попытаетесь отправить форму без ввода поискового запроса, браузер отобразит сообщение об ошибке.

Длина входного значения

Вы можете указать минимальную длину (в символах) для введенного значения с использованием атрибута minlength ; аналогично, используйте maxlength для установки максимальной длины введенного значения в символах.

В приведенном ниже примере требуется, чтобы введенное значение составляло 4-8 символов.

Choose a username:

Submit

Это делает так:

Если вы попытаетесь отправить форму с менее чем 4 символами, вам будет предоставлено соответствующее сообщение об ошибке (которое отличается между браузерами). Если вы попытаетесь ввести более 8 символов, браузер не позволит вам.

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

Указание шаблона

Вы можете использовать атрибут pattern чтобы указать регулярное выражение, которое должно соответствовать введенному значению, чтобы оно считалось действительным (см. Проверка на регулярное выражение для простого курса сбоя при использовании регулярных выражений для проверки ввода).

Приведенный ниже пример ограничивает значение 4-8 символов и требует, чтобы он содержал только строчные буквы.

Choose a username:

Usernames must be lowercase and 4-8 characters in length.

Submit

Это делает так:

Примеры

Вы можете увидеть хорошие примеры текстовых входов, используемых в контексте в нашей

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

Автозаполнение в текстовых полях

Используя HTML5-элемент datalist вы можете создать текстовое поле с автозаполнением. Очень удобно!

Поля ввода email, url и tel

В HTML5 появилось множество новых типов для полей ввода, и среди них email , url и tel . Они позволяют писать более красивый код, делают за вас всю работу по валидации контента, а так же заставляют мобильные браузеры отображать сенсорную клавиатуру со специальными кнопками (вроде @ и.com) при заполнении этих полей.

Шаблоны на соответствие полей формы регулярному выражению

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

Кастомное контекстное меню

HTML5 позволяет добавлять элементы в контекстное меню (это то самое меню, которое появляется, если кликнуть правой кнопкой мыши где-нибудь на вашей странице).
На момент написания статьи, элемент ContextMenu совместим только с Firefox, но можно надеяться, что другие браузеры добавят его поддержку в самое ближайшее время.

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

Видео на HTML5, с резервным Flash-проигрывателем.

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

Скрытые элементы в HTML5

В HTML5 появился атрибут hidden , который можно применить к любому элементу. Его действие аналогично CSS-свойству display:none .

Автофокус для текстовых полей

Аттрибут autofocus позволяет вам установить фокус на определенный элемент при загрузке страницы. Полезно, например, для страниц поиска, авторизации или регистрации.

Предварительная загрузка в HTML5

Jean-Baptiste Jung написал о предварительной загрузке в HTML5. Если в кратце - то это простой способ уведомить браузер о том, какие ресурсы скоро могут понадобиться, чтобы он загрузил их заранее (например картинки, подгружаемые аяксом). В приведенном ниже коде реализуется предварительная загрузка изображения.

Воспроизведение аудиофайлов на HTML5

HTML5 может воспроизводить видео и, конечно, он также может воспроизводить аудиофайлы, например, в формате mp3 . В коде ниже реализуется минималистичный но функциональный аудиоплеер.