Чтобы сделать форму интерактивной, необходимо добавить элементы формы. Это элементы управления для ввода и выбора данных, элементы описания элементов управления, элементы группировки полей и кнопки отправки формы.
Что такое элементы формы?
Вы видите два элемента <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 и type в этом примере?
Атрибут имени
Используйте атрибут name для идентификации данных, которые пользователь вводит с помощью элемента управления. При отправке формы это имя будет включено в запрос. Допустим, вы назвали элемент управления формой mountain , а пользователь ввёл Gutenberg , запрос включит эту информацию в виде mountain=Gutenberg .
Попробуйте изменить имя элемента управления формы на hill . Если вы сделаете это правильно и отправите форму, hill будет отображаться в URL.
Тип ввода
Существуют различные типы элементов управления формами , каждый из которых обладает полезными встроенными функциями, работающими в разных браузерах и на разных платформах. В зависимости от атрибута 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-адрес, указанный в атрибуте action элемента <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' .