Required html что это

Как сделать поле обязательным в html

Обязательно поле ввода или required

Что такое required

Как переводится required

требуемый (necessary) требующийся->required->прил->[rɪˈkwaɪəd]

require->гл->[rɪˈkwaɪə]->требовать, нуждаться, потребоваться, потребовать, понадобиться, обязывать, запрашивать, запросить, затребовать

Синтаксис required

Значения required

Значение по умолчанию required

По умолчанию атрибут required выключен.

Пример использования required

Пример кода формы с использованием required

Выведем форму с обязательными полями с использованием required

Проверка полей на обязательное заполнение в php

Здесь и вообще. нужно сказать, что полагаться на атрибут required не следует! Если вы получаете данные через php, то вам нужна обязательная проверка на пустоту в php!

Дело в том, что в процессе строительства вы рано или поздно столкнетесь с негативом! Это как в жизни, есть плохие люди и хорошие!

Так и в интернете! Есть люди, у которых отклонение от общих стандартов поведения.

И в вашей форме(они) могут запросто удалить атрибут required и отправить данные на сайт.

Зачем это им надо!? Ну не знаю. видимо от этого им становится весело! -> альтернативно одаренные!

Сообщение системы комментирования :

Форма пока доступна только админу. скоро все заработает. надеюсь.

Источник

HTML attribute: required

The Boolean required attribute, if present, indicates that the user must specify a value for the input before the owning form can be submitted.

form control elements. If present on any of these input types and elements, the :required pseudo class will match. If the attribute is not included, the :optional pseudo class will match.

In the case of a same named group of radio buttons, if a single radio button in the group has the required attribute, a radio button in that group must be checked, although it doesn’t have to be the one with the attribute is applied. So to improve code maintenance, it is recommended to either include the required attribute in every same-named radio button in the group, or else in none.

In the case of a same named group of checkbox input types, only the checkboxes with the required attribute are required.

Note: Setting aria-required=»true» tells a screen reader that an element (any element) is required, but has no bearing on the optionality of the element.

Attribute interactions

Because a read-only field cannot have a value, required does not have any effect on inputs with the readonly attribute also specified.

Usability

is required. In addition, target required form controls with the :required pseudo-class, styling them in a way to indicate they are required. This improves usability for sighted users. Assistive technology should inform the user that the form control in mandatory based on the required attribute, but adding aria-required=»true» doesn’t hurt, in case the browser / screen reader combination does not support required yet.

Constraint validation

If the element is required and the element’s value is the empty string, then the element is suffering from valueMissing and the element will match the :invalid pseudo class.

Accessibility concerns

Provide an indication to users informing them the form control is required. Ensure the messaging is multi-faceted, such as through text, color, markings, and attribute, so that all users understand the requirements whether they have color blindness, cognitive differences, or are using a screen reader.

Источник

HTML5 атрибуты форм (часть 1)

Дата публикации: 2017-03-09

От автора: данная статья является выдержкой из книги HTML5 и CSS3 для реального мира, 2-е издание за авторством Алексиса Гольдштейна, Луи Лазариса и Эстель Вейль. Книгу можно найти в магазинах по всему миру, а также купить цифровую версию.

Атрибут required

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

Если обязательное поле пустое, форма не отправится. Opera, Firefox, Internet Explorer 10+ и Chrome выдают пользователю сообщение с ошибкой. Например, «пожалуйста, заполните это поле» или «необходимо указать значение».

Заметка: пора сосредоточиться

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

По терминологии JS событие focus срабатывает на элементе, когда он получает фокус, а событие blur запускается при потере фокуса.

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

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

В CSS для стилизации элементов с фокусом можно использовать псевдокласс :focus.

Атрибут required подходит для любых типов полей кроме button, submit, image, range, color и hidden. У всех этих типов есть значение по умолчанию, поэтому данный атрибут здесь лишний. Как и с другими Булевыми атрибутами, синтаксис простой: required или required=»required» на XHTML.

Добавим атрибут required в форму регистрации. Сделаем обязательными поля имя, email, пароль и начальная дата оформления подписки:

Заметка: улучшаем доступность

Для улучшения доступности можно добавить WAI-ARIA атрибут aria-required=»true». Большая часть браузеров и скрин ридеров уже имеют встроенную поддержку атрибута required, так что скоро WAI-ARIA атрибут станет не нужен. Краткое введение в WAI-ARIA смотрите в Приложении В.

На рисунках 4.1, 4.2 и 4.3 показано поведение атрибута required при попытке отправить форму.

Рисунок 1 сообщение о проверке обязательного поля в Firefox

Рисунок 2 сообщение в Opera

Рисунок 3 и в Google Chrome

Стилизация обязательных полей формы

Обязательные поля формы можно стилизовать через псевдокласс required, необязательные поля через псевдокласс optional (или с помощью отрицательного псевдокласса :not(:required)). Также можно стилизовать валидные и невалидные поля с помощью :valid и :invalid. Эти псевдоклассы и немного CSS магии подскажут зрячим пользователям, какие поля обязательны, а также сообщат об успешном вводе данных:

Мы добавим фоновое изображение (звездочку) к обязательным полям формы. Использовать сгенерированный контент на полях input не получится, он заменяется на пустые элементы. Поэтому мы добавим фоновое изображение. Также добавим разные фоновые изображения для валидных и невалидных полей. Изменения будут видны только при получении элементом фокуса, чтобы не загромождать форму.

Предупреждение: Firefox применяет стили к невалидным элементам

Обратите внимание, что Firefox применяет свои стили к невалидным элементам (красная тень). Посмотреть пример можно на рисунке 1 выше. Возможно, вы захотите избавиться от нативной тени с помощью CSS:

Совет: таргетированные стили для старых браузеров

Старые браузеры типа IE8 и IE9 не поддерживают псевдокласс :required, но можно использовать таргетированные стили с помощью селектора с атрибутом:

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

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

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

Атрибут placeholder

Атрибут placeholder позволяет отображать небольшую подсказку (если таковая имеется) внутри поля формы, которая будет говорить пользователю, какой тип данных принимается данным полем. Текст плейсхолдера пропадает, когда поле получает фокус, и пользователь ввел хотя бы один символ. Подсказка появляется снова, когда значение становится null. Разработчики уже много лет пользовались похожим функционалом на JS. Добавлялось временное значение, которое по фокусу очищалось. Сейчас же HTML5 атрибут placeholder позволяет сделать это нативно без подключения JS. Текст остается виден до тех пор, пока не будет введено значение.

В форме регистрации на сайте The HTML5 Herald мы добавим атрибут placeholder к полю URL и стартовой дате подписки:

В IE поддержка атрибута placeholder появилась только с версии 10. Текст подсказки исчезает, как только пользователь ввел данные. Поэтому не стоит полагаться только на такой способ информирования пользователей. Если подсказка не помещается в поле, опишите требования в атрибуте title данного поля, лейбле или рядом с полем. Многие советуют добавлять «например» в подсказку, чтобы точно дать понять, что это плейсхолдер, а не заполненные данные.

Все браузеры с Safari 4, Chrome 10, Opera 11.1, Firefox 4, Android 2.3 и Internet Explorer 10 поддерживают атрибут placeholder, хотя начальная имплементация placeholder удаляла текст при получении фокуса, а не при вводе текста.

Поддержка полифилов на JS

Как и все остальное в этой главе, атрибут placeholder не будет лишним даже в старых браузерах без поддержки.

Как с атрибутом required, атрибут placeholder и его значение можно использовать в старых браузерах. Однако для этого понадобится небольшой JS полифил.

Что нужно сделать: сперва с помощью JS определите браузеры без поддержки. Затем с помощью функции создайте ложный плейсхолдер. Функция должна определить, в каких полях есть атрибут placeholder, после чего временно взять из них контент и вставить его в качестве значения в атрибут value.

Далее необходимо настроить два обработчика событий: первый для очистки значения поля по фокусу, второй для замены значения placeholder по событию blur, если значение поля осталось пустым. Если хотите воспользоваться этим трюком, проверьте, чтобы значение атрибута placeholder не совпало с тем, что может вбить пользователь. Можете использовать приставку «например», чтобы дать понять, что плейсхолдер это просто пример, а не правильное значение. Не забудьте очистить ложный плейсхолдер при отправке формы. Или вы получите много “(XXX) XXX-XXXX подписок!

Рассмотрим пример кода на JS, который с помощью техники прогрессивного улучшения работает с элементами формы, у которых есть атрибут placeholder.

Первое, на что следует обратить внимание в этом скрипте – это то, что для определения поддержки атрибута placeholder мы используем JS библиотеку Modernizr. В Приложении А Modernizr описана более подробно. Сейчас же достаточно знать, что эта библиотека дает нам целый набор свойств с true и false для определенных HTML5 и CSS3 нововведений. Свойство, которое мы будем использовать, говорит само за себя. Modernizr.input.placeholder будет true, если браузер поддерживает placeholder, и false, если нет.

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

Перед отправкой формы необходимо проверить все поля формы на совпадение значения с атрибутом placeholder. Также можно было бы проверить, остался ли класс placeholder на обязательных полях при отправке формы. Если в форме нужно что-то исправить, мы формируем сообщение об ошибке и запрещаем отправку. Если форма валидна, очищаем значения плейсхолдеров. Очищаем только плейсхолдеры обязательных полей.

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

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

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

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

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

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

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

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

Источник

Валидация форм на стороне клиента

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

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

Однако, не следует рассматривать валидацию на стороне клиента как достаточную меру безопасности! Любые данные, отправляемые через форму, необходимо дополнительно проверять на безопасность и на стороне сервера, поскольку валидацию на стороне клиента достаточно просто обойти и она может не остановить злоумышленников. Чтобы лучше понимать потенциальные угрозы, рекомендуем ознакомиться с разделом Безопасность вебсайтов; валидация на стороне сервера выходит за рамки этого модуля, но о ней следует помнить.

Что такое валидация формы?

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

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

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

Мы хотим максимально упростить заполнение веб-форм. Тогда почему мы настаиваем валидации данных? На это есть три основные причины:

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

Типы валидации на стороне клиента

Существует два типа валидации на стороне клиента, с которыми вы столкнётесь в Интернете:

Использование встроенной валидации форм

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

Если данные, введённые в поле формы, соответствуют правилам перечисленных выше атрибутов, они считаются валидными, если нет — не валидными

Когда элемент валиден, справедливы следующие утверждения:

Когда элемент не валиден, справедливы следующие утверждения:

Примеры встроенной валидации форм

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

Простой начальный файл

Для начала скопируйте файл fruit-start.html в новую папку на вашем жёстком диске.

Атрибут required

Обратите внимание на CSS, который включён в файл примера:

Данный CSS задаёт полю красную пунктирную рамку, когда оно не валидно, а когда валидно — сплошную чёрную. Мы также добавили фоновый градиент для обязательных не валидных полей. Проверьте новое поведение в примере ниже:

Примечание: Рабочий пример можно найти на GitHub по адресу fruit-validation.html (отдельно можно найти исходный код.)

Попробуйте отправить форму без введения значения. Обратите внимание, что не валидное поле получает фокус, появляется сообщение об ошибке («Заполните это поле») и блокируется отправка формы.

Примечание: Для повышения удобства взаимодействия указывайте пользователям, какие поля являются обязательными. К тому же, этого требует руководство по обеспечению доступности WCAG. Требуйте обязательного ввода только тех данных, которые вам действительно нужны: например, так ли важно знать пол или должность пользователя?

Валидация с помощью регулярного выражения

Регулярные выражения достаточно сложны и мы не подем подробно рассматривать эту тему в данной статье. Ниже приведены несколько примеров, чтобы дать вам представление о том, как они работают.

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

Давайте рассмотрим пример. Добавьте в атрибут pattern следующий шаблон:

Это даёт нам следующее обновление — опробуйте его:

Примечание: Рабочий пример можно найти на GitHub по адресу fruit-pattern.html (исходный код.)

В этом примере элемент принимает одно из четырёх возможных значений: строку «banana», «Banana», «cherry», или «Cherry». Регулярные выражения чувствительны к регистру, но с помощью шаблона «Aa», вложенного в квадратные скобки, мы сделали поддержку написания слова как с большой, так и с маленькой буквы.

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

Примечание: Элемент

Ограничение длины вводимых значений

Можно ограничить максимально допустимое количество символов для текстовых полей или

Ограничение допустимых значений

Давайте рассмотрим другой пример. Создайте новую копию файла fruit-start.html.

Содержимое элемента замените на:

Примечание: Рабочий пример можно найти на GitHub по адресу fruit-length.html (исходный код.)

Полный пример

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

И немного CSS для стилизации HTML:

Примечание: Рабочий пример можно найти на GitHub по адресу full-example.html (исходный код.)

Валидация форм с помощью JavaScript

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

Constraint Validation API

Большинство браузеров поддерживают Constraint Validation API, который состоит из набора свойств и методов, доступных на DOM-интерфейсах следующих элементов форм:

Для перечисленных выше элементов Constraint Validation API делает доступными следующие свойства.

Также для перечисленных выше элементов Constraint Validation API делает доступными следующие методы.

Реализация кастомного сообщения об ошибке

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

У этих автоматических сообщений есть два недостатка:

Настройка таких сообщений об ошибках является одной из наиболее распространённых причин использования Constraint Validation API. Давайте рассмотрим простой пример, как это делается.

Начнём с простого HTML (Не стесняйтесь поместить это в пустой HTML-файл. Вы можете взять за основу свежую копию fruit-start.html, если хотите):

Добавьте на страницу следующий JavaScript:

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

Попробовать пример можно ниже:

Примечание:: Данный пример можно найти на GitHub по адресу custom-error-message.html (отдельно можно найти исходный код.)

Более подробный пример

Теперь, когда мы разобрали простой пример, давайте посмотрим, как можно использовать данный API для создания более сложной валидацию.

Во-первых, HTML. Опять же, не стесняйтесь писать его вместе с нами:

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

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

Теперь давайте рассмотрим JavaScript, который реализует кастомную валидацию.

Комментарии объясняют логику хорошо, но кратко:

Примечание: Рабочий пример можно найти на GitHub по адресу detailed-custom-validation.html (отдельно можно найти исходный код.)

Constraint Validation API явяется мощным инструментом валидации форм, позволяющим получить контроль над пользовательским интерфейсом, существенно превосходящий возможности HTML и CSS.

Примечание: Для получения дополнительной информации смотрите руководства Constraint validation guide и Constraint Validation API.

Проверка форм без встроенного API

В некоторых случаях, например, при необходимости поддержки устаревших браузеров или кастомных элементов формы, вы не сможете или не захотите использовать Constraint Validation API. Вы по-прежнему сможете использовать JavaScript для валидации форм, но для этого всё нужно будет писать самостоятельно.

Для создания своего валидатора формы, задайте себе несколько вопросов:

Пример без использования Constraint Validation API

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

HTML почти тот такой же; мы только удалили функционал валидации HTML5.

CSS также не требует особых изменений; мы только заменили CSS-псевдокласс :invalid на реальный класс и не использовали селектор по атрибутам, так как он не работает в Internet Explorer 6.

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

Результат выглядит следующим образом:

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

Проверьте свои навыки!

Вы дошли до конца этой статьи, но можете ли вы вспомнить самую важную информацию? Вы можете найти дополнительные тесты, чтобы убедиться, что вы сохранили эту информацию, прежде чем двигаться дальше — Test your skills: Form validation.

Заключение

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

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

Источник