Оптимизируйте свои подборки Сохраняйте и классифицируйте контент в соответствии со своими настройками.
Чтобы сделать форму интерактивной, вам необходимо добавить элементы формы. Существуют элементы управления для ввода и выбора данных, элементы, описывающие элементы управления, элементы, группирующие поля, и кнопки для отправки формы.
Вы видите два элемента : и . Почему они выглядят по-другому?
В зависимости от имени элемента и атрибута type браузеры отображают разные пользовательские интерфейсы, используют разные правила проверки и предоставляют множество других функций. Использование соответствующего элемента управления формой помогает создавать более качественные формы.
Примечание. Стили элементов управления формой по умолчанию различаются в зависимости от браузера, операционной системы и платформы. В следующем модуле вы узнаете, как создавать кроссплатформенные формы .
Допустим, вы хотите добавить поле ввода, где пользователь может ввести свой любимый цвет. Для этого вам нужно добавить в форму элемент . Но как пользователь узнает, что ему следует закрасить свой любимый цвет?
Чтобы описать элементы управления формой, используйте для каждого элемента управления формой.
Атрибут for в элементе label соответствует атрибуту id на входе.
Примечание. Описывайте каждый элемент управления формы с помощью , а не с помощью какого-либо другого элемента HTML. Это делает элемент управления формой доступным для программ чтения с экрана и обеспечивает большую цель, поскольку вы можете коснуться или щелкнуть метку, чтобы установить фокус на элементе управления. Нажмите на ярлык в нашей демо-версии, чтобы попробовать это.
Как следует из названия, элемент используется для сбора данных от пользователей.
Как упоминалось ранее, атрибут id соединяет с . А как насчет атрибута имени и типа в этом примере?
Используйте атрибут name для идентификации данных, которые пользователь вводит с помощью элемента управления. Если вы отправите форму, это имя будет включено в запрос. Допустим, вы назвали элемент управления формой mountain , а пользователь ввел Gutenberg , запрос включает эту информацию как mountain=Gutenberg .
Попробуйте изменить имя элемента управления формы на hill . Если вы сделаете это правильно и отправите форму, в URL-адресе будет виден hill .
Существуют различные типы элементов управления формами , каждый из которых имеет полезные встроенные функции, которые работают в разных браузерах и на разных платформах. В зависимости от атрибута type браузер отображает разные пользовательские интерфейсы, отображает разные экранные клавиатуры, использует разные правила проверки и т. д. Давайте посмотрим, как изменить тип.
Используя type="checkbox" браузер теперь отображает флажок вместо текстового поля. Флажок также имеет дополнительные атрибуты. Вы можете установить атрибут checked , чтобы он отображался как отмеченный.
Примечание. Значением type по умолчанию является text . Это означает, что если вам просто нужен текстовый , вы можете не указывать атрибут type .
Есть и другие типы, которые вы можете выбрать. Мы подробно рассмотрим это в следующем модуле.
Допустим, вам нужно поле, где пользователь может написать комментарий. Для этого было бы здорово, если бы они могли вводить несколько строк текста? В этом и заключается цель элемента .
Как предоставить пользователям список опций для выбора? Для этого вы можете использовать элемент .
Примечание. Если вы хотите включить ввод текста с дополнительными предопределенными параметрами, вы также можете использовать элемент вместе с элементом списка данных . Вы можете попробовать примеры списков данных здесь .
Сначала вы добавляете элемент . Как и все другие элементы управления формой, вы подключаете его к с помощью атрибута id и присваиваете ему уникальное имя, используя атрибут name .
Между начальным и конечным тегом элемента вы можете добавить несколько элементов , каждый из которых представляет один выбор.
Каждая опция имеет уникальный атрибут value , поэтому вы можете различать их при обработке данных формы. Текст внутри элемента option представляет собой удобочитаемое значение.
Если вы отправите форму, используя этот , не меняя выбор, запрос будет включать color=orange . Но как браузер узнает, какой вариант следует использовать?
Браузер использует первый вариант в списке, если:
С помощью selected атрибута вы можете предварительно выбрать один вариант. Это становится значением по умолчанию, независимо от порядка определения элементов .
Иногда вам нужно сгруппировать элементы управления формой. Для этого вы можете использовать элемент .
CSS Вы заметили элемент
Если ваш ответ — «описать группу элементов управления формы», вы правы!
Каждому элементу требуется элемент , так же как каждому элементу управления формой необходим связанный элемент . также должен быть самым первым элементом в . После элемента вы можете определить элементы управления формой, которые должны быть частью группы.
Научившись добавлять элементы управления формы и группировать их, вы можете задаться вопросом, как пользователь может отправить форму?
Первый вариант — использовать элемент .
После того, как пользователь нажимает кнопку «Отправить» , браузер отправляет запрос на URL-адрес, указанный в атрибуте действия элемента , со всеми данными из элементов управления формы.
Внимание: каждый элемент внутри формы по умолчанию работает как кнопка «Отправить» . Иногда вам это не нужно: например, при использовании для переключения видимости поля пароля. Чтобы отключить поведение отправки по умолчанию, вы можете добавить type="button" к . Это сообщает браузеру, что не должен отправлять форму.
Вы также можете использовать элемент с type="submit" вместо элемента . Ввод выглядит и ведет себя так же, как . Вместо использования элемента для описания используйте атрибут value .
Кроме того, форму также можно отправить с помощью клавиши Enter , когда поле формы находится в фокусе.
Проверьте свои знания элементов формы
Как подключить к элементу управления формой?