Чтобы сделать форму интерактивной, вам необходимо добавить элементы формы. Существуют элементы управления для ввода и выбора данных, элементы, описывающие элементы управления, элементы, группирующие поля, и кнопки для отправки формы.
Что такое элементы формы?
Вы видите два элемента <input> : <input type="text"> и <input type="file"> . Почему они выглядят по-другому?
В зависимости от имени элемента и атрибута type браузеры отображают разные пользовательские интерфейсы, используют разные правила проверки и предоставляют множество других функций. Использование соответствующего элемента управления формой помогает создавать более качественные формы.
Ярлыки для элементов формы
Допустим, вы хотите добавить поле ввода, где пользователь может ввести свой любимый цвет. Для этого вам нужно добавить в форму элемент <input> . Но как пользователь узнает, что ему следует закрасить свой любимый цвет?
Чтобы описать элементы управления формой, используйте <label> для каждого элемента управления формой.
<label for="color">What is your favorite color?</label>
<input type="text" id="color" name="color">
Атрибут for в элементе label соответствует атрибуту id на входе.
Захват пользовательского ввода
Как следует из названия, элемент <input> используется для сбора данных от пользователей.
<label for="color">What is your favorite color</label>
<input type="text" id="color" name="color">
Как упоминалось ранее, атрибут id соединяет <input> с <label> . А как насчет атрибута имени и типа в этом примере?
Атрибут имени
Используйте атрибут name для идентификации данных, которые пользователь вводит с помощью элемента управления. Если вы отправите форму, это имя будет включено в запрос. Допустим, вы назвали элемент управления формой mountain , а пользователь ввел Gutenberg , запрос включает эту информацию как mountain=Gutenberg .
Попробуйте изменить имя элемента управления формы на hill . Если вы сделаете это правильно и отправите форму, в URL-адресе будет виден hill .
Тип ввода
Существуют различные типы элементов управления формами , каждый из которых имеет полезные встроенные функции, которые работают в разных браузерах и на разных платформах. В зависимости от атрибута type браузер отображает разные пользовательские интерфейсы, отображает разные экранные клавиатуры, использует разные правила проверки и т. д. Давайте посмотрим, как изменить тип.
Используя type="checkbox" браузер теперь отображает флажок вместо текстового поля. Флажок также имеет дополнительные атрибуты. Вы можете установить атрибут checked , чтобы он отображался как отмеченный.
Есть и другие типы, которые вы можете выбрать. Мы подробно рассмотрим это в следующем модуле.
Разрешить несколько строк текста
Допустим, вам нужно поле, где пользователь может написать комментарий. Для этого было бы здорово, если бы они могли вводить несколько строк текста? В этом и заключается цель элемента <textarea> .
<label for="comment">Comment</label>
<textarea id="comment" name="comment"></textarea>
Выберите из списка вариантов
Как предоставить пользователям список опций для выбора? Для этого вы можете использовать элемент <select> .
<label for="color">Color</label>
<select id="color" name="color">
<option value="orange">Orange</option>
<option value="pink">Pink</option>
</select>
Сначала вы добавляете элемент <select> . Как и все другие элементы управления формой, вы подключаете его к <label> с помощью атрибута id и присваиваете ему уникальное имя, используя атрибут name .
Между начальным и конечным тегом элемента <select> вы можете добавить несколько элементов <option> , каждый из которых представляет один выбор.
Каждая опция имеет уникальный атрибут value , поэтому вы можете различать их при обработке данных формы. Текст внутри элемента option представляет собой удобочитаемое значение.
Если вы отправите форму, используя этот <select> не меняя выбор, запрос будет включать color=orange . Но как браузер узнает, какой вариант следует использовать?
Браузер использует первый вариант в списке, если:
- Один элемент
<option>имеетselectedатрибут. - Пользователь выбирает другой вариант.
Предварительно выберите вариант
С помощью selected атрибута вы можете предварительно выбрать один вариант. Это становится значением по умолчанию, независимо от порядка определения элементов <option> .
Группировка элементов управления формой
Иногда вам нужно сгруппировать элементы управления формой. Для этого вы можете использовать элемент <fieldset> .
<fieldset>
<legend>What is your favorite web technology</legend>
<label for="html">HTML</label>
<input type="radio" name="webfeature" value="html" id="html">
<label for="css">CSS</label>
<input type="radio" name="webfeature" value="css" id="css">
</fieldset>
Вы заметили элемент <legend> внутри элемента <fieldset> ? Как вы думаете, для чего он используется?
Если ваш ответ — «описать группу элементов управления формы», вы правы!
Каждому элементу <fieldset> требуется элемент <legend> , так же как каждому элементу управления формой необходим связанный элемент <label> . <legend> также должен быть самым первым элементом в <fieldset> . После элемента <legend> вы можете определить элементы управления формой, которые должны быть частью группы.
Отправка формы
Научившись добавлять элементы управления формы и группировать их, вы можете задаться вопросом, как пользователь может отправить форму?
Первый вариант — использовать элемент <button> .
<button>Submit</button>
После того, как пользователь нажимает кнопку «Отправить» , браузер отправляет запрос по URL-адресу, указанному в атрибуте действия элемента <form> , со всеми данными из элементов управления формы.
Вы также можете использовать элемент <input> с type="submit" вместо элемента <button> . Ввод выглядит и ведет себя так же, как <button> . Вместо использования элемента <label> для описания <input> используйте атрибут value .
<input type="submit" value="Submit">
Кроме того, форму также можно отправить с помощью клавиши Enter , когда поле формы находится в фокусе.
Проверьте свое понимание
Проверьте свои знания элементов формы
Как подключить <label> к элементу управления формой?
for='color' в <label> и name='color' в <input> .for='color' в <label> и id='color' в <input> .id='color' в <label> и for='color' в <input> .name='color' в <label> и for='color в <input> .Что вы используете для управления многострочной формой?
<input> с type='multi-line' .<text> .<textarea> .<input> с type='long' .Как вы можете отправить форму?
<button> .Enter .<input> с type='submit' .Ресурсы
- Элемент метки
- Входной элемент
- Элемент текстовой области
- Элемент выбора
- Элемент набора полей
- Элемент кнопки
Чтобы сделать форму интерактивной, вам необходимо добавить элементы формы. Существуют элементы управления для ввода и выбора данных, элементы, описывающие элементы управления, элементы, группирующие поля, и кнопки для отправки формы.
Что такое элементы формы?
Вы видите два элемента <input> : <input type="text"> и <input type="file"> . Почему они выглядят по-другому?
В зависимости от имени элемента и атрибута type браузеры отображают разные пользовательские интерфейсы, используют разные правила проверки и предоставляют множество других функций. Использование соответствующего элемента управления формой помогает создавать более качественные формы.
Метки для элементов формы
Допустим, вы хотите добавить поле ввода, где пользователь может ввести свой любимый цвет. Для этого вам нужно добавить в форму элемент <input> . Но как пользователь узнает, что ему следует закрасить свой любимый цвет?
Чтобы описать элементы управления формой, используйте <label> для каждого элемента управления формой.
<label for="color">What is your favorite color?</label>
<input type="text" id="color" name="color">
Атрибут for в элементе label соответствует атрибуту id на входе.
Захват пользовательского ввода
Как следует из названия, элемент <input> используется для сбора данных от пользователей.
<label for="color">What is your favorite color</label>
<input type="text" id="color" name="color">
Как упоминалось ранее, атрибут id соединяет <input> с <label> . А как насчет атрибута имени и типа в этом примере?
Атрибут имени
Используйте атрибут name для идентификации данных, которые пользователь вводит с помощью элемента управления. Если вы отправите форму, это имя будет включено в запрос. Допустим, вы назвали элемент управления формой mountain , а пользователь ввел Gutenberg , запрос включает эту информацию как mountain=Gutenberg .
Попробуйте изменить имя элемента управления формы на hill . Если вы сделаете это правильно и отправите форму, в URL-адресе будет виден hill .
Тип ввода
Существуют различные типы элементов управления формами , каждый из которых имеет полезные встроенные функции, которые работают в разных браузерах и платформах. В зависимости от атрибута type браузер отображает разные пользовательские интерфейсы, отображает разные экранные клавиатуры, использует разные правила проверки и т. д. Давайте посмотрим, как изменить тип.
Используя type="checkbox" браузер теперь отображает флажок вместо текстового поля. Флажок также имеет дополнительные атрибуты. Вы можете установить атрибут checked , чтобы он отображался как отмеченный.
Есть и другие типы, которые вы можете выбрать. Подробный обзор мы рассмотрим в следующем модуле.
Разрешить несколько строк текста
Допустим, вам нужно поле, где пользователь может написать комментарий. Для этого было бы здорово, если бы они могли вводить несколько строк текста? В этом и заключается цель элемента <textarea> .
<label for="comment">Comment</label>
<textarea id="comment" name="comment"></textarea>
Выберите из списка вариантов
Как предоставить пользователям список опций для выбора? Для этого вы можете использовать элемент <select> .
<label for="color">Color</label>
<select id="color" name="color">
<option value="orange">Orange</option>
<option value="pink">Pink</option>
</select>
Сначала вы добавляете элемент <select> . Как и все другие элементы управления формой, вы подключаете его к <label> с помощью атрибута id и присваиваете ему уникальное имя, используя атрибут name .
Между начальным и конечным тегом элемента <select> вы можете добавить несколько элементов <option> , каждый из которых представляет один выбор.
Каждая опция имеет уникальный атрибут value , поэтому вы можете различать их при обработке данных формы. Текст внутри элемента option представляет собой удобочитаемое значение.
Если вы отправите форму, используя этот <select> не меняя выбор, запрос будет включать color=orange . Но как браузер узнает, какой вариант следует использовать?
Браузер использует первый вариант в списке, если:
- Один элемент
<option>имеетselectedатрибут. - Пользователь выбирает другой вариант.
Предварительно выберите вариант
С помощью selected атрибута вы можете предварительно выбрать один вариант. Это становится значением по умолчанию, независимо от порядка определения элементов <option> .
Группировка элементов управления формой
Иногда вам нужно сгруппировать элементы управления формой. Для этого вы можете использовать элемент <fieldset> .
<fieldset>
<legend>What is your favorite web technology</legend>
<label for="html">HTML</label>
<input type="radio" name="webfeature" value="html" id="html">
<label for="css">CSS</label>
<input type="radio" name="webfeature" value="css" id="css">
</fieldset>
Вы заметили элемент <legend> внутри элемента <fieldset> ? Как вы думаете, для чего он используется?
Если ваш ответ — «описать группу элементов управления формы», вы правы!
Каждому элементу <fieldset> требуется элемент <legend> , так же, как каждому элементу управления формой необходим связанный элемент <label> . <legend> также должен быть самым первым элементом в <fieldset> . После элемента <legend> вы можете определить элементы управления формой, которые должны быть частью группы.
Отправка формы
Научившись добавлять элементы управления формы и группировать их, вы можете задаться вопросом, как пользователь может отправить форму?
Первый вариант — использовать элемент <button> .
<button>Submit</button>
После того, как пользователь нажимает кнопку «Отправить» , браузер отправляет запрос по URL-адресу, указанному в атрибуте действия элемента <form> , со всеми данными из элементов управления формы.
Вы также можете использовать элемент <input> с type="submit" вместо элемента <button> . Ввод выглядит и ведет себя так же, как <button> . Вместо использования элемента <label> для описания <input> используйте атрибут value .
<input type="submit" value="Submit">
Кроме того, форму также можно отправить с помощью клавиши Enter , когда поле формы находится в фокусе.
Проверьте свое понимание
Проверьте свои знания элементов формы
Как подключить <label> к элементу управления формой?
for='color' в <label> и name='color' в <input> .for='color' в <label> и id='color' в <input> .id='color' в <label> и for='color' в <input> .name='color' в <label> и for='color в <input> .Что вы используете для управления многострочной формой?
<input> с type='multi-line' .<text> .<textarea> .<input> с type='long' .Как вы можете отправить форму?
<button> .Enter .<input> с type='submit' .