HTML5: Атрибут required и его возможности
Атрибут required — это одна из новых возможностей HTML5, направленная на выполнение простой, но очень важной цели. Если в определенной форме настроить required для элемента input или textarea, то это будет значить, что пользователям будет необходимо заполнить эти поля для того, чтобы отправить форму.
Если для правильного функционирования формы нужно, чтобы определенные поля не содержали пустых значений (к примеру, поле имени в форме создания учетной записи), то необходимо проверить содержимое полей формы и оповестить пользователя о том, что он пытается отправить форму с пустыми полями. Такая проверка сейчас может быть реализована двумя способами.
Первый — совершить проверку со стороны сервера после подтверждения формы пользователем; этот вариант условно оптимален, поскольку требует дополнительного сетевого обмена данными и времени ожидания пользователя.
Второй, более удачный способ — совершить проверку со стороны браузера перед тем, как он отошлет форму на сервер. Однако недостаток всего этого состоит в том, что разработчикам приходится совершать проверку при помощи JavaScript' кода или библиотеки JavaScript. И здесь в игру вступает атрибут required.
Преимущество атрибута required для вас как для разработчика состоит в том, что он освобождает вас от необходимости использования JavaScript-кода для проверки заполнения обязательных полей формы со стороны браузера. Вместо этого вы просто присваиваете нужным полям атрибут required, и браузер автоматически делает проверку.
Использование атрибута required помогает пользователям сэкономить время и нервы; кроме того, этот атрибут обеспечивает стабильное взаимодействие пользователя с формами, у которых отсутствуют значения в обязательных полях.
Он также позволяет пользователям получать локализованные сообщения «не заполнено обязательное поле формы» от их браузеров на предпочитаемом ими языке (вместо того, чтобы читать сообщения на языке, который конкретное сетевое приложение использует для своих сообщений об ошибках).
- ↑ Веб-дизайн
- ← HTML5: новые типы форм и их свойства
- → Фиксированные и «резиновые» макеты в веб дизайне