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>

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

Поле 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>

Если вы хотите установить переключатель или флажок по умолчанию, вы можете добавить атрибут checked, например так <input type="checkbox" checked>.

Поле 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>

Вы также можете создавать кнопки, используя элемент <button>. Кнопки, созданные с помощью элемента <button>, аналогичны кнопкам, созданным с помощью элемента <input>, но они предоставляют более широкие возможности рендеринга, позволяя встраивать другие HTML-элементы.

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

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

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

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

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

Атрибут Описание
name Определяет название формы.
action Указывает URL-адрес программы или скрипта на веб-сервере, который будет использоваться для обработки информации, отправленной через форму.
method Определяет HTTP-метод, используемый браузером для отправки данных на веб-сервер. Значение может быть либо get (по умолчанию), либо post.
target Указывает, где отображать ответ, полученный после отправки формы. Возможные значения: _blank, _self, _parent и _top.
enctype Указывает, как данные формы должны быть закодированы при отправке формы на сервер. Применимо только в том случае, если значение атрибута method равно post.

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

Атрибут name представляет имя формы в коллекции форм. Оно не должно быть пустым и его значение должно быть уникальным среди форм в документе.

Все данные, отправленные методом get, отображаются в адресной строке браузера. Но данные, отправленные методом post, не видны пользователю. См. Руководство по GET и POST запросам, чтобы узнать подробнее о разнице между этими двумя HTTP-методами.

Насколько публикация полезна?

Нажмите на звезду, чтобы оценить!

Средняя оценка 5 / 5. Количество оценок: 1

Оценок пока нет. Поставьте оценку первым.