Как в форме называется радиокнопки html код

HTML: Радиокнопка

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

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

Для создания радиокнопки, так же, как и чекбокса, используются два тега:

с указанием type=»radio» . Обязательным атрибутом является name , значением которого является имя. Данное имя должно быть одинаковым у всей группы радиокнопок. Без этого атрибута будет возможно выбрать все значения сразу, так как браузер не будет видеть связи между ними
, в котором будет текст, связанный с нужной нам радиокнопкой

Связь с происходит уже по одному из двух знакомых нам сценариев:

Связь по id . Для этого необходимо задать уникальный id для , и связать с радиокнопкой с помощью атрибута for

   Да Нет

Вложить внутрь тега . При этом указание уникального id не требуется

    Да 
  Нет

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

   Да 
  Нет

Задание

Создайте форму, у которой файл с обработчиком данных лежит по адресу /people . Внутри формы создайте 2 радиокнопки. Свяжите их вложив внутри . Уникальное имя для радиокнопок delivery . Не забудьте добавить атрибут value

Упражнение не проходит проверку — что делать? ��

Если вы зашли в тупик, то самое время задать вопрос в «Обсуждениях». Как правильно задать вопрос:

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

В моей среде код работает, а здесь нет ��

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

Мой код отличается от решения учителя ��

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

В редких случаях бывает, что решение подогнано под тесты, но это видно сразу.

Прочитал урок — ничего не понятно ��

Создавать обучающие материалы, понятные для всех без исключения, довольно сложно. Мы очень стараемся, но всегда есть что улучшать. Если вы встретили материал, который вам непонятен, опишите проблему в «Обсуждениях». Идеально, если вы сформулируете непонятные моменты в виде вопросов. Обычно нам нужно несколько дней для внесения правок.

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

Переключатели

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

Атрибуты переключателей перечислены в табл. 1.

Табл. 1. Атрибуты переключателей

Атрибут	Описание
checked	Предварительное выделение переключателя. По определению, набор переключателей может иметь только один выделенный пункт, поэтому добавление checked сразу к нескольким полям не даст особого результата. В любом случае, будет отмечен элемент, находящийся в коде HTML последним.
name	Имя группы переключателей для идентификации поля. Поскольку переключатели являются групповыми элементами, то имя у всех элементов группы должно быть одинаковым.
value	Задаёт, какое значение будет отправлено на сервер. Здесь уже каждый элемент должен иметь свое уникальное значение, чтобы можно было идентифицировать, какой пункт был выбран пользователем.

Создание группы переключателей показано в примере 1.

Пример 1. Создание переключателей

HTML5 IE Cr Op Sa Fx

    Переключатели   Какое у вас состояние разума?
  Не дзен
  Дзен
  Полный дзен

В результате получим следующее (рис. 1).

Вид переключателей в браузере

Рис. 1. Вид переключателей в браузере

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

HTML: Формы

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

Как работают HTML формы

Формы состоят из двух частей: HTML разметка (то что отображается на веб-странице) и обработка данных на клиентской (проверка заполнения полей, проверка корректности введенной информации и т.д.) или серверной стороне (сохранение введенных данных, отправка электронных писем и т.д.). Обработка данных формы на сервере обычно написана на PHP, Ruby on Rails, Perl, Python, Node.js и Java.

Рассмотрим пошаговую работу формы:

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

HTML тег

Формально, все элементы формы должны находиться внутри элемента :

 . содержимое формы .

Атрибут action указывает путь к файлу, куда следует отправлять собранные данные. Если он не указан, данные отправляются на URL-адрес страницы, содержащей форму.
Атрибут method указывает метод передачи данных: get или post. (подробнее о методах передачи данных читайте описание тега в HTML справочнике)

Элементы

Наиболее часто используемым элементом в формах является . Он позволяет добавить в форму различные элементы для ввода данных. Какой именно элемент ввода данных будет отображен на экране определяется с помощью атрибута type:

type=»text» Значение text создает однострочное текстовое поле:

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

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

type=»submit» Создает кнопку, при нажатии на которую браузер отправляет форму на сервер:

Атрибут value задает текст, который будет отображен на кнопке, заменяя значение установленное по умолчанию. type=»radio» Создает элементы управления, позволяющие выбрать только один вариант из предложенных, то есть такие элементы управления являются взаимозаменяемыми. Они называются радио кнопками или переключателями:

 да 
нет

Все радио кнопки, связанные с заданными вариантами значений, должны иметь одинаковое значение атрибута name, но каждая отдельная радио кнопка должна иметь уникальное значение атрибута value.

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

type=»checkbox» Создает элементы управления, позволяющие пользователям отмечать любое количество вариантов или отменить выбор, не выбрав ни одно из предложенных значений. Такие элементы управления называют флажками.

 Соль
 Перец
 Чеснок

Все флажки, относящиеся к одной группе, должны иметь одинаковое значение атрибута name, но каждый отдельный вариант должен иметь уникальное значение атрибута value.

Примечание: все допустимые значения атрибута type смотрите в нашем HTML справочнике в описании элемента .

Элемент

 Комментарии оставлять тут!

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

Выпадающий список

Элементы и

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

 да 
нет Соль
 Перец
 Чеснок

 да 
нет Специи Соль
 Перец
 Чеснок

Элемент

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

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

Связать метку с элементом формы можно двумя способами: поместить весь элемент формы внутрь элемента или с помощью атрибута for, который в качестве значения принимает идентификатор элемента формы, с которым нужно связать метку:

 да
 нет
  Соль 
  Перец 
  Чеснок

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

Копирование материалов с данного сайта возможно только с разрешения администрации сайта
и при указании прямой активной ссылки на источник.
2011 – 2023 © puzzleweb.ru | razumnikum.ru

Формы¶

Большинство сайтов и приложений содержат веб-форму. Шуточные сайты, например DoWebsites Need To Look Exactly The Same In Every Browser.com, могут не иметь формы, но даже Machine Learning Workshop.com (MLW), возникший как шутка в День первоапрельского дурака, имеет форму, хотя и поддельную. Основным «призывом к действию» MLW является регистрационная форма для машин, позволяющая записаться на семинар. Эта форма содержится в элементе .

Элемент HTML идентифицирует документ landmark, содержащий интерактивные элементы управления для отправки информации. Во вложенном элементе находятся все интерактивные (и неинтерактивные) элементы управления формой, составляющие эту форму.

Мощные возможности HTML. Этот раздел посвящен возможностям HTML и рассказывает о том, что HTML может делать без добавления JavaScript. Использование данных формы на стороне клиента для обновления пользовательского интерфейса, как правило, предполагает использование CSS или JavaScript, что здесь не рассматривается. Существует целый курс «Изучаем формы» Learn Forms. Мы не будем дублировать этот раздел, но познакомим вас с несколькими элементами управления формами и HTML-атрибутами, которые позволяют их использовать.

С помощью форм вы можете предоставить пользователям возможность взаимодействовать с вашим сайтом или приложением, проверять введенную информацию и отправлять данные на сервер. Атрибуты HTML позволяют требовать от пользователя выбора элементов управления формы или ввода значения. HTML-атрибуты могут определять конкретные критерии, которым должно соответствовать значение, чтобы быть действительным. Когда пользователь пытается отправить форму, все значения элементов управления формы проходят проверку на стороне клиента и могут предотвратить отправку, пока данные не будут соответствовать требуемым критериям; все это без использования JavaScript. Эту возможность можно также отключить: установка атрибута novalidate на или, что чаще, formnovalidate на кнопке, сохраняющей данные формы для последующего заполнения, предотвращает валидацию.

Отправка форм¶

input type="submit" value="Submit Form" /> button type="submit">Submit Formbutton>

Для простой формы достаточно элемента , внутри которого находится несколько вводимых данных и кнопка отправки. Однако отправка формы — это еще не все.

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

Значения атрибутов action и method элемента определяют URL, который обрабатывает данные формы, и HTTP-метод, используемый для отправки данных, соответственно. По умолчанию данные формы отправляются на текущую страницу. В противном случае установите атрибут action в значение URL, куда должны быть отправлены данные.

Отправляемые данные состоят из пар имя/значение различных элементов управления формы. По умолчанию сюда входят все элементы управления формы, вложенные в форму и имеющие name . Однако с помощью атрибута form можно включить элементы управления формы за пределами и опустить элементы управления формы, вложенные в . Поддерживаемый для элементов управления формы и , атрибут form принимает в качестве своего значения id формы, с которой связан элемент управления, а не обязательно формы, в которую он вложен. Это означает, что элементы управления формы не обязательно должны быть физически вложены в .

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

Атрибут method определяет HTTP-протокол запроса: обычно GET или POST . При использовании GET данные формы передаются в виде строки параметров, состоящей из пар имя=значение и добавляемой к URL action .

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

Существует также метод DIALOG . Если находится внутри , то отправка формы приведет к закрытию диалога; при этом происходит событие submit, хотя данные не очищаются и не отправляются. Опять же, без использования JavaScript. Это рассматривается в разделе Диалог. Обратите внимание, что поскольку в этом случае форма не отправляется, вам, вероятно, следует включить в кнопку отправки и formmethod=»dialog» , и formnovalidate .

Кнопки формы могут иметь не только атрибуты, описанные в начале этого раздела. Если кнопка содержит атрибуты formaction , formenctype , formmethod , formnovalidate или formtarget , то значения, установленные на кнопке, активирующей отправку формы, имеют приоритет над значениями action , enctype , method и target , установленными на . Проверка ограничений происходит до отправки формы, но только в том случае, если на активированной кнопке отправки нет ни formnovalidate , ни novalidate на .

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

После отправки формы¶

Когда пользователь отправляет заполненную интерактивную форму, ему передаются имена и значения соответствующих элементов управления формы. Имя — это значение атрибута name . Значения формируются из содержимого атрибута value или из значения, введенного или выбранного пользователем. Значением является его внутренний текст. Значение — это value выбранного или, если не содержит атрибута value , значение — это внутренний текст выбранного варианта.

1 2 3 4 5 6 7 8 9

form method="GET"> label for="student">Pick a student:label> select name="student" id="student"> option value="hoover">Hoover Sukhdeepoption> option>Blendan Smoothoption> option value="toasty">Toasty McToastfaceoption> select> input type="submit" value="Submit Form" /> form>

Если выбрать «Hoover Sukhdeep» (или ничего не делать, так как браузер по умолчанию отображает и, следовательно, выбирает первое значение опции), а затем нажать кнопку отправки, то эта страница будет перезагружена, установив URL:

https://web.dev/learn/html/forms?student=hoover

Поскольку второй вариант не имеет атрибута value , в качестве значения передается внутренний текст. Если выбрать «Blendan Smooth» и нажать кнопку submit, то эта страница перезагрузится, установив URL-адрес:

https://web.dev/learn/html/forms?student=Blendan+Smooth

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

Существует 22 типа ввода, поэтому мы не можем охватить их все. Отметим лишь, что включение значения необязательно и часто является плохой идеей, если вы хотите, чтобы пользователь ввел информацию. Для элементов , где пользователь не может редактировать значение, необходимо всегда включать значение, в том числе для элементов ввода с типом hidden , radio , checkbox , submit , button и reset .

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

Радиокнопки¶

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

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

Вместе с формой передается name и value выбранной радиокнопки. Убедитесь, что каждая радиокнопка имеет соответствующее (и, как правило, уникальное) value . Значения невыбранных радиокнопок не передаются.

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

Если вы хотите загрузить страницу с выбранной одной из радиокнопок одноименной группы, включите атрибут checked . Эта радиокнопка будет соответствовать CSS-псевдоклассу :default , даже если пользователь выберет другую радиокнопку. Выбранная в данный момент радиокнопка соответствует псевдоклассу :checked .

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

Флажки¶

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

Если не указать value в чекбоксе, то значение выбранного чекбокса по умолчанию будет равно on , что, вероятно, не очень полезно. Если у вас есть три флажка с именем chk и все они отмечены, то отправка формы не будет расшифрована:

https://web.dev/learn/html/forms?chk=on&chk=on&chk=on

Чтобы сделать флажок обязательным, добавьте атрибут required . Всегда сообщайте пользователю, когда необходимо установить флажок, или когда любой элемент управления формой является обязательным. Добавление атрибута required к флажку делает обязательным только этот флажок; это не влияет на другие флажки с тем же именем.

Метки и наборы полей¶

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

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

Чтобы явно связать элемент управления формы с , включите атрибут for на : его значение — id элемента управления формы, с которым он связан.

label for="full_name">Your namelabel> input type="text" id="full_name" name="name" />

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

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

1 2 3 4

label >Your name input type="text" name="name" /> label>

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

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

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

 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35

fieldset> legend>Who is your favorite student?legend> ul> li> label> input type="radio" value="blendan" name="machine" /> Blendan Smooth label> li> li> label> input type="radio" value="hoover" name="machine" /> Hoover Sukhdeep label> li> li> label> input type="radio" value="toasty" name="machine" /> Toasty McToastface label> li> ul> fieldset>

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

 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

fieldset> legend>Your favorites:legend> ul start="6"> li> fieldset> legend> Who is your favorite student? legend> ul> li> li> ul> fieldset> li> ul> fieldset>

Стандартный вид этих элементов привел к их недостаточному использованию, однако и могут быть стилизованы с помощью CSS. Помимо всех глобальных атрибутов, также поддерживает атрибуты name , disabled и form . При отключении набора полей отключаются все вложенные элементы управления формой. Ни атрибуты name , ни form не имеют особого смысла для . Атрибут name может быть использован для доступа к набору полей с помощью JavaScript, но сам набор полей не включается в отправляемые данные (включаются именованные элементы управления формы, вложенные в него).

Подробнее о формах и доступности можно узнать в модуле forms of Learn Accessibility.

Типы ввода и динамическая клавиатура¶

Как отмечалось ранее, существует 22 различных типа ввода. В некоторых случаях, когда пользователь находится на устройстве с динамической клавиатурой, которая отображается только по мере необходимости, например, на телефоне, используемый тип ввода определяет тип отображаемой клавиатуры. Отображаемая по умолчанию клавиатура может быть оптимизирована под требуемый тип ввода. Например, при наборе tel отображается клавиатура, оптимизированная для ввода телефонных номеров; email включает символы @ и . ; а динамическая клавиатура для url включает двоеточие и символ косой черты. К сожалению, iPhone по-прежнему не включает : в динамическую клавиатуру по умолчанию для типов ввода url .

Клавиатуры для на iPhone и двух разных телефонах Android:

iPhone Android Android

Клавиатура iPhone показывает тип ввода=tel.

Клавиатура Android показывает тип ввода=tel.

Клавиатуры для на iPhone и двух разных телефонах Android:

iPhone Android Android

Клавиатура iPhone показывает тип ввода=email.

Клавиатура Android показывает тип ввода=email.

Доступ к микрофону и камере¶

Тип файлового ввода позволяет загружать файлы через формы. Файлы могут быть любого типа, определяемого и ограничиваемого атрибутом accept . Список допустимых типов файлов может представлять собой список расширений файлов, разделенных запятыми, глобальный тип или комбинацию глобальных типов и расширений. Например, accept=»video/*, .gif» принимает любые видеофайлы или анимированные gif-файлы. Для звуковых файлов используйте » audio/* «, для видеофайлов — » video/* «, для файлов изображений — » image/* «.

Перечисляемый атрибут capture , определенный в спецификации media capture specification, может использоваться, если новый медиафайл должен быть создан с помощью камеры или микрофона пользователя. Вы можете установить значение user для устройств ввода, обращенных к пользователю, или environment для задней камеры или микрофона телефона. Как правило, использование capture без значения работает, поскольку пользователь сам выбирает, какое устройство ввода ему использовать.

1 2 3 4 5 6 7 8

label for="avatar">A recent photo of yourself:label> input type="file" capture="user" accept="image/*" name="avatar" id="avatar" />

Встроенная валидация¶

Опять же, не используя JavaScript, HTML может предотвратить отправку форм с недопустимыми значениями.

Существует несколько CSS-селекторов, которые подбирают элементы управления формами по наличию HTML-атрибутов, включая :required и :optional , если установлен или нет логический ключ required ; :default , если checked жестко закодирован; и :enabled или :disabled , в зависимости от того, является ли элемент интерактивным и присутствует ли атрибут disabled . Псевдокласс :read-write соответствует элементам с набором contenteditable и элементам управления формы, которые по умолчанию являются редактируемыми, например, типам ввода number , password , text (но не checkbox, radio buttons, тип hidden и др.). Если у элемента, обычно доступного для записи, установлен атрибут readonly , то вместо него будет использоваться :read-only .

При вводе пользователем информации в элементы управления формы селекторы CSS UI, включая :valid , :invalid , :in-range и :out-of-range , будут включаться и выключаться в зависимости от состояния. При выходе пользователя из элемента управления формой будет использоваться псевдокласс :user-invalid или :user-valid , который пока еще не полностью поддерживается.

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

1 2 3 4

form:invalid [type='submit']  opacity: 50%; pointer-events: none; >

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

Прикладной CSS постоянно обновляется в зависимости от текущего состояния пользовательского интерфейса. Например, при включении типов ввода с ограничениями, таких как email , number , url и date , если значение не является null (не пустое) и текущее значение не является допустимым email , number , url , date или time , то :invalid CSS pseudo-class будет соответствовать. Это постоянное обновление отличается от встроенной проверки HTML-ограничений, которая происходит только при попытке пользователя отправить форму.

Встроенная проверка ограничений относится только к ограничениям, заданным с помощью HTML-атрибутов. Хотя вы можете стилизовать элемент на основе псевдоклассов :required и :valid / :invalid , сообщения об ошибках, возникающих из-за ошибок на основе атрибутов required , pattern , min , max и даже type , выдаются браузером при отправке формы.

An error message indicating that a multi-choice field is required.

Когда мы пытаемся отправить форму, не выбрав требуемого студента-фаворита, валидация ограничений не позволяет отправить форму из-за ошибки validityState.valueMissing .

Если любое из свойств validityState возвращает значение true , отправка формы блокируется, и браузер выводит сообщение об ошибке в первом неправильном элементе управления формы, передавая ему фокус. Если пользователь активизирует отправку формы и в ней присутствуют недопустимые значения, то первый недопустимый элемент управления формы отобразит сообщение об ошибке и получит фокус. Если для элемента управления required не задано значение, если числовое значение выходит за пределы диапазона или если значение не соответствует типу, требуемому атрибутом type , форма не пройдет проверку, не будет отправлена, и появится сообщение об ошибке.

Если значение number , даты или времени меньше минимального значения min или больше максимального значения max , то элемент управления будет :out-of-range (и :invalid ), а пользователю при попытке отправить форму будет сообщено об ошибке valididityState.rangeUnderflow , validityState.rangeOverflow . Если значение не соответствует значению step , заданному явно или по умолчанию равному 1 , то элемент управления будет иметь значение :out-of-range (и :invalid ) и будет выдана ошибка validityState.stepMismatch . Ошибка отображается в виде пузырька и по умолчанию содержит полезную информацию о том, как исправить ошибку.

Аналогичные атрибуты существуют и для длины значений: атрибуты minlength и maxlength при отправке предупредят пользователя об ошибке с помощью атрибутов validityState.tooLong или validityState.tooShort . Параметр maxlength также предотвращает ввод пользователем слишком большого количества символов.

Некоторые типы ввода, как кажется, имеют ограничения по умолчанию, но это не так. Например, тип ввода tel обеспечивает цифровую телефонную клавиатуру на устройствах с динамическими клавиатурами, но не ограничивает допустимые значения. Для этого и других типов ввода существует атрибут pattern . Вы можете указать регулярное выражение, которому должно соответствовать значение, чтобы считаться допустимым. Если значение представляет собой пустую строку и не является обязательным, то оно не вызовет ошибки validityState.patternMismatch . Если значение required и пустое, то пользователю будет показано стандартное сообщение об ошибке validityState.valueMissing , а не patternMismatch .

Для электронной почты атрибут validityState.typeMismatch , вероятно, является слишком щадящим для ваших нужд. Скорее всего, необходимо включить атрибут pattern , чтобы адреса электронной почты интрасети без TLD не принимались за действительные. Атрибут pattern позволяет указать регулярное выражение, которому должно соответствовать значение. При требовании соответствия шаблону необходимо четко указать пользователю, что от него требуется.

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

Пример¶

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

Первая кнопка отправки закрывает диалог. Используйте formmethod=»dialog» , чтобы переопределить метод формы по умолчанию и закрыть без отправки данных или их стирания. Вы также должны включить formnovalidate , иначе браузер попытается выполнить валидацию, проверяя, что все обязательные поля имеют значение. Пользователь может захотеть закрыть диалог и форму, не вводя никаких данных; валидация не позволит этого сделать. Включите aria-label=»close» , поскольку «X» является известной визуальной подсказкой, но не является описательной меткой.

Все элементы управления формы имеют неявные метки, поэтому включать атрибуты id или for не нужно. Оба элемента ввода имеют атрибут required, что делает их обязательными. У элемента ввода числа явно задан step , чтобы продемонстрировать, как включается step . Поскольку step по умолчанию равен 1 , этот атрибут можно не указывать.

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

Кнопка submit в конце устанавливает метод формы на POST. При нажатии на кнопку происходит проверка валидности каждого значения. Если все значения действительны, то данные формы будут отправлены, диалог закроется, а страница может быть перенаправлена на thankyou.php , который является URL действия. Если какие-либо значения отсутствуют, или числовое значение имеет несоответствие шагу, или выходит за пределы диапазона, то появится соответствующее сообщение об ошибке, определяемое браузером, форма не будет отправлена, а диалог не закроется. Сообщения об ошибках по умолчанию можно настроить с помощью метода validityState.setCustomValidity(‘message here’) . Обратите внимание, что если вы задаете пользовательское сообщение, то оно должно быть явно установлено в пустую строку, когда все валидно, иначе форма не будет отправлена.

Эти элементы включают в себя косую черту в конце, которую также называют «самозакрывающимся тегом», что является ошибочным термином. Косая черта на элементах void является особенностью XML, включая SVG и XHTML, но не HTML. Браузеры игнорируют ее, Prettier требует ее, а HTML Validator выдает предупреждение при ее наличии.

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

При изучении HTML полезно писать код как можно более разборчиво, что включает в себя «закрытие» всех тегов и цитирование всех атрибутов. По мере освоения всех тонкостей HTML и повышения уровня комфорта вы можете изменить свои привычки и больше не добавлять косую черту к элементам void, опускать необязательные закрывающие теги, а то и вовсе отказаться от неявных тегов и не заключать в кавычки атрибуты, которые это позволяют. Главное, независимо от того, на каком языке вы кодируете — CSS, HTML, JavaScript или другом, — быть последовательным в своем стиле кодирования.

Другие соображения¶

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

При проектировании форм важно учитывать, что не все люди похожи на вас. У кого-то может быть одна буква в качестве фамилии (или вообще нет фамилии), у кого-то может не быть почтового индекса, у кого-то может быть трехстрочный адрес улицы, у кого-то может не быть адреса улицы. Возможно, они просматривают переведенную версию вашей формы.

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

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