Руководство по формам в HTML

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

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

Тег <form> используется для создания HTML-формы. Вот простой пример формы входа в систему:

<form>
    <label>Имя пользователя: <input type="text"></label>
    <label>Пароль: <input type="password"></label>
    <input type="submit" value="Submit">
</form>

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

Элемент <input>

Тег <input> — это наиболее часто используемый элемент в HTML-формах.

В зависимости от атрибута type тегу <input> можно назначить тип поля. Он может быть текстовым полем (text field), полем ввода пароля (password field), чекбоксом (checkbox), переключателем (radio button), кнопкой отправки (submit button), кнопкой сброса (reset button), полем выбора файла (file select box). В HTML5 выли введены еще несколько новых типов ввода.

Наиболее часто используемые типы ввода описаны ниже.

Поле Text Fields

Текстовые поля — это однострочные области, которые позволяют пользователю вводить текст.

Однострочные элементы управления вводом текста создаются с использованием элемента <input>, атрибут type которого имеет значение text. Вот пример однострочного ввода текста, используемого для ввода имени пользователя:

<form>
    <label for="username">Имя пользователя:</label>
    <input type="text" name="username" id="username">
</form>

Поле Password Field

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

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

Вот пример однострочного ввода пароля, используемого для получения пароля пользователя:

<form>
    <label for="user-pwd">Пароль:</label>
    <input type="password" name="user-password" id="user-pwd">
</form>

Поле Radio Buttons

Радиокнопки используются, чтобы позволить пользователю выбрать ровно одну опцию из предварительно определенного набора опций. Они создаются с использованием элемента <input>, атрибут type которого имеет значение radio.

Вот пример переключателей, которые можно использовать для сбора гендерной информации о пользователе:

<form>
    <input type="radio" name="gender" id="male">
    <label for="male">Мужской</label>
    <input type="radio" name="gender" id="female">
    <label for="female">Женский</label>
</form>

Поле Checkbox

Чекбоксы позволяют пользователю выбрать один или несколько вариантов из предварительно определенного набора параметров. Они создаются с использованием элемента <input>, атрибут type которого имеет значение checkbox.

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

<form>
    <input type="checkbox" name="sports" id="soccer">
    <label for="soccer">Soccer</label>
    <input type="checkbox" name="sports" id="cricket">
    <label for="cricket">Cricket</label>
    <input type="checkbox" name="sports" id="baseball">
    <label for="baseball">Baseball</label>
</form>

Поле File Select box

Поля ввода файла позволяют пользователю загрузить локальный файл и отправить его в виде вложения вместе с формой. Веб-браузеры, такие как Google Chrome и Firefox, отображают это поле с помощью кнопки «Обзор», которая позволяет пользователю перемещаться по локальному жесткому диску и выбирать файл.

Оно также создается с использованием элемента <input>, значение атрибута type которого установлено в file.

<form>
    <label for="file-select">Загрузить:</label>
    <input type="file" name="upload" id="file-select">
</form>

Элемент <textarea>

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

<form>
    <label for="address">Адрес:</label>
    <textarea rows="3" cols="30" name="address" id="address"></textarea>
</form>

Элемент <select>

Поле выбора (select) — это раскрывающийся список параметров, который позволяет пользователю выбрать один или несколько параметров из списка. Поле выбора создается с использованием элемента <select> и элемента <option>.

Элементы <option> в элементе <select> определяют каждый элемент списка.

<form>
    <label for="city">Город:</label>
    <select name="city" id="city">
        <option value="sydney">Москва</option>
        <option value="melbourne">Санкт-Петербург</option>
        <option value="cromwell">Новосибирск</option>
    </select>
</form>

Кнопки Submit и Reset

Кнопка отправки (submit button) используется для отправки данных формы на веб-сервер. При нажатии кнопки данные формы отправляются в файл, указанный в атрибуте action для обработки отправленных данных.

Кнопка сброса (reset button) сбрасывает все элементы управления до значений по умолчанию.

<form action="action.php" method="post">
    <label for="first-name">First Name:</label>
    <input type="text" name="first-name" id="first-name">
    <input type="submit" value="Submit">
    <input type="reset" value="Reset">
</form>

Группировка элементов управления формы

Вы можете сгруппировать логически связанные элементы управления и метки в веб-форме, используя элемент <fieldset> и <legend>. Группировка элементов управления формы по категориям упрощает поиск элементов управления, что делает форму более удобной для пользователя. Давайте посмотрим следующий пример:

<form>
    <fieldset>
        <legend>Контактная информация</legend>
        <label>Адрес электронной почты: <input type="email" name="email"></label>
        <label>Номер телефона: <input type="text" name="phone"></label>
    </fieldset>
</form>

Часто используемые атрибуты формы

В следующей таблице перечислены наиболее часто используемые атрибуты элемента формы:

Есть несколько других атрибутов, чтобы узнать о них, см. ссылку на тег <form>.