Помогите при вводе данных¶

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

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

Что такое элементы формы?¶

Вы видите два элемента <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>, а не с помощью другого элемента HTML. Это делает элемент управления формой доступным для устройств чтения с экрана, а также обеспечивает большую цель, поскольку для установки фокуса на элемент управления можно коснуться или щелкнуть по метке.

В нашем демонстрационном примере щелкните по метке, чтобы опробовать это.

Перехват пользовательского ввода¶

Как следует из названия, элемент <input> используется для сбора данных от пользователей.

<label for="color">What is your favorite color</label>
<input type="text" id="color" name="color" />

Как уже говорилось, атрибут id связывает <input> с <label>. А как насчет атрибутов name и type в этом примере?

Атрибут name¶

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

Попробуйте изменить имя элемента управления формы на hill. Если это сделать правильно и отправить форму, то hill будет виден в URL.

Тип ввода¶

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

При использовании type="checkbox" браузер теперь отображает не текстовое поле, а флажок. Флажок также имеет дополнительные атрибуты. Можно установить атрибут checked, чтобы показывать его как отмеченный.

По умолчанию для type используется значение text. Это означает, что если вам нужен просто текстовый <input>, то атрибут type можно не указывать.

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

Разрешить несколько строк текста¶

Допустим, вам нужно поле, в котором пользователь может написать комментарий. Для этого было бы замечательно, если бы пользователь мог вводить несколько строк текста. Именно для этого предназначен элемент <textarea>.

<label for="comment">Comment</label>
<textarea id="comment" name="comment"></textarea>

Выбор из списка опций¶

Как предоставить пользователю список вариантов для выбора? Для этого можно использовать элемент <select>.

Если необходимо обеспечить ввод текста с дополнительными предопределенными опциями, можно также использовать элемент <input> вместе с элементом datalist. Примеры datalist можно посмотреть здесь.

<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, что позволяет различать их при обработке данных формы. Текст внутри элемента опции является человекочитаемым значением.

Если отправить форму с помощью этого <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>

После нажатия пользователем кнопки Submit браузер делает запрос на URL, указанный в атрибуте action элемента <form> , со всеми данными из элементов управления формы.

Каждый элемент <button> внутри формы по умолчанию работает как кнопка Submit.

Иногда это нежелательно: например, при использовании <button> для переключения видимости поля пароля. Чтобы отключить стандартное поведение Submit, можно добавить type="button" к <button>. Это указывает браузеру, что <button> не должна отправлять форму.

Вместо элемента <button> можно также использовать элемент <input> с type="submit". The input выглядит и ведет себя так же, как <button>. Вместо того чтобы использовать элемент <label> для описания <input>, используйте атрибут value.

<input type="submit" value="Submit" />

Кроме того, форма может быть отправлена с помощью клавиши Enter, когда поле формы имеет фокус.

Ресурсы¶

Источник — Help users enter data in forms