Как добавить форму на сайт. Тег <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".