Как добавить форму на сайт. Тег <form>
- 25 января 2023
Тег <form>
используется для создания HTML-формы, в которой пользователь может ввести данные. Этот тег определяет область, в которой содержится контент формы, а также указывает на сервер, куда отправлять данные формы.
Синтаксис тега <form>
<form action="url-обработчика" method="метод">
<!-- контент формы -->
</form>
Здесь action
определяет URL, куда будут отправлены данные формы, а method
указывает метод отправки данных: GET
или POST
.
Спецификация HTML
Тег является частью спецификации HTML Living Standard.
Семантический или нет
Тег <form>
считается семантическим, поскольку несёт в себе смысл и точно передаёт назначение своего содержимого. Он определяет область, которая предназначена для ввода данных пользователем, и указывает на сервер, куда отправить эти данные.
Примеры использования
Форма для входа на сайт:
<form action="/login" method="POST">
<label for="username">Имя пользователя:</label>
<input type="text" id="username" name="username">><br>
<label for="password">Пароль:</label>
<input type="password" id="password" name="password">><br>
<input type="submit" value="Войти">
</form>
Этот код создаёт форму для входа на сайт с полями для ввода имени пользователя и пароля. Данные будут отправлены на сервер по адресу /login
методом POST
.
Форма обратной связи:
<form action="/feedback" method="POST">
<label for="name">Ваше имя:</label>
<input type="text" id="name" name="name">><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email">><br>
<label for="message">Сообщение:</label>
<textarea id="message" name="message">></textarea><br>
<input type="submit" value="Отправить">
</form>
Здесь мы создаём форму обратной связи с полями для ввода имени, электронной почты и сообщения. Данные будут отправлены на сервер по адресу /feedback
методом POST
.
Форма с выбором опции:
<form action="/options" method="GET">
<label for="color">Выберите цвет:</label>
<select id="color" name="color">>
<option value="red">Красный</option>
<option value="green">Зелёный</option>
<option value="blue">Синий</option>
</select><br>
<label for="size">Выберите размер:</label>
<input type="radio" id="size-small" name="size" value="small">>
<label for="size-small">Маленький</label>
<input type="radio" id="size-medium" name="size" value="medium">>
<label for="size-medium">Средний</label>
<input type="radio" id="size-large" name="size" value="large">>
<label for="size-large">Большой</label><br>
<input type="submit" value="Выбрать">
</form>
Этот пример создаёт форму с выпадающим списком цветов и группой радиокнопок для выбора размера. Данные будут отправлены на сервер по адресу /options
методом GET
.
Для чего использовать тег <form>
- Для формы обратной связи, в которой пользователь может оставить контактные данные и сообщение.
- Для формы поиска на сайте.
- Для формы регистрации — формы, в которой пользователь вводит данные для создания учётной записи или входа в личный кабинет.
- Для формы оформления заказа.
- Для формы оплаты, в которой пользователь может ввести данные банковской карты и подтвердить оплату.
- Для анкеты или опроса, в которых пользователи могут выбрать один или несколько вариантов ответов.
Атрибуты тега <form>
action
— адрес, на который будут отправлены данные формы.method
— метод отправки данных:GET
илиPOST
.target
— окно или фрейм, в котором будет открыт результат отправки данных формы.name
— имя формы, которое используется для её идентификации при отправке данных на сервер.autocomplete
— может ли браузер запоминать введённые пользователем данные для автозаполнения.enctype
— способ кодирования данных формы при отправке на сервер.novalidate
— указывает, что данные формы не нужно проверять на корректность перед отправкой на сервер.
Пример использования атрибутов тега <form>
:
<form action="/search" method="GET" target="_blank" name="search-form" autocomplete="on" enctype="multipart/form-data" novalidate>
<!-- контент формы -->
</form>
Глобальные атрибуты
Тег <form>
поддерживает все глобальные атрибуты HTML.
Ограничения
Тег может содержать только определённые элементы формы, такие как <input>
, <label>
, <button>
, <select>
, <textarea>
и некоторые другие. Он не может содержать другие блочные элементы, такие как <div>
или <p>
.
Нюансы
- Не рекомендуется использовать вложенные формы.
- Если использовать метод
GET
, параметры формы будут отображены в адресной строке браузера. Это небезопасно, так как данные формы можно легко изменить. - Для отправки файлов на сервер необходимо использовать атрибут
enctype="multipart/form-data"
.
Поддержка браузерами
Тег поддерживается всеми современными браузерами. Актуальная информация — на caniuse.
Альтернативные теги
Альтернативных тегов для тега <form>
не существует.
Чем заменить этот тег
Прямой замены тегу <form>
не существует.
Актуальность
Тег <form>
является актуальным и широко используется в веб-разработке.
Хотите узнать больше об HTML-тегах?
Прочитайте справочник по HTML или познакомьтесь с вёрсткой на интерактивных тренажёрах в HTML Academy.
«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.
Читать дальше


Глобальные атрибуты HTML
Список основных атрибутов, которые подойдут ко всему.
- 29 марта 2023
Как добавить раздел на страницу. Тег <div>
Синтаксис, примеры использования, основные атрибуты.
- 25 января 2023
Список описаний. Тег <dl>
Синтаксис, примеры использования, основные атрибуты.
- 25 января 2023
Пункт выпадающего списка. Тег <option>
Синтаксис, примеры использования, основные атрибуты.
- 25 января 2023
Как правильно добавить секцию на страницу. Тег <section>
Синтаксис, примеры использования, основные атрибуты.
- 25 января 2023