Формы в HTML

Пример формы в HTML

Элемент <form>

HTML элемент <form> определяет форму, которая используется для получения данных от пользователей:

<form>
.
html submit или другой элемент формы
.
</form>

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

Элемент <input>

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

Вот некоторые примеры:

Ниже мы подробнее расскажем о типах элементов ввода.

Текстовое поле

<input type="text"> определяет поле для ввода текста в одну строку:

<form>
  First name:<br>
  <input type="text" name="firstname"><br>
  Last name:<br>
  <input type="text" name="lastname">
</form>

Посмотреть форму

Радио-кнопка

<input type="radio"> определяет радио-кнопку.

Радио кнопки позволяют выбрать один из нескольких вариантов:

Пример:

<form>
  <input type="radio" name="gender" value="male" checked> Male<br>
  <input type="radio" name="gender" value="female"> Female<br>
  <input type="radio" name="gender" value="other"> Other
</form>

Посмотреть форму

Кнопка "Отправить"

HTML form submit определяет кнопку для отправки данных на сервер. Обработчик формы задается в атрибуте формы action:

Пример:

<form action="action_page.php">
  First name:<br>
  <input type="text" name="firstname" value="Mickey"><br>
  Last name:<br>
  <input type="text" name="lastname" value="Mouse"><br><br>
  <input type="submit" value="Submit">
</form>

Посмотреть форму

Атрибут action

Атрибут action определяет действие, которое будет выполняться после отправки данных формы. Когда пользователь нажимает на кнопку "Отправить", данные формы отправляются на сервер.

В приведенном выше примере данные формы отправляются на страницу сервера "action_page.php" после нажатия на HTML input submit. Она содержит серверный скрипт, который обрабатывает данные формы:

<form action="action_page.php">

Если значение атрибута action не задано, действие устанавливается на текущей странице.

Атрибут method

Атрибут method определяет метод HTTP (GET или POST), который будет использоваться для передачи данных формы:

<form action="action_page.php" method="get">

или:

<form action="action_page.php" method="post">

Когда используется GET?

Метод, используемый по умолчанию, при отправке данных формы - GET.

В то же время при использовании GET передаваемые параметры будут видны в адресной строке браузера:

action_page.php?firstname=Mickey&lastname=Mouse

Примечание: Метод GET НЕ должен использоваться при передаче конфиденциальной информации!

Когда используется POST?

Всегда используйте POST, если данные формы содержат конфиденциальную информацию. Метод POST не отображает данные формы в адресной строке браузера. Он не имеет ограничений по размеру и может быть использован для отправки больших объемов данных с помощью HTML input type submit.

Атрибут name

Каждое поле ввода должно содержать атрибут name. Если он не задан, данные поля ввода не будут отправляться на сервер.
В приведенном ниже примере будут отправляться только данные поля "Last name".

Пример:

<form action="action_page.php">
  First name:<br>
  <input type="text" value="Mickey"><br>
  Last name:<br>
  <input type="text" name="lastname" value="Mouse"><br><br>
  <input type="submit" value="Submit">
</form>

Посмотреть пример

Группировка данных формы с помощью <fieldset>

<fieldset> используется для группировки связанных данных в форме. Элемент <legend> определяет заголовок для элемента <fieldset>.

Пример:

<form action="action_page.php">
  <fieldset>
    <legend>Personal information:</legend>
    First name:<br>
    <input type="text" name="firstname" value="Mickey"><br>
    Last name:<br>
    <input type="text" name="lastname" value="Mouse"><br><br>
    <input type="submit" value="Submit">
  </fieldset>
</form>

Посмотреть пример

Другие примеры

Отправить из формы письмо по электронной почте

Как отправить из формы письмо по электронной почте после нажатия на кнопку submit HTML.

Список атрибутов элемента <form>

Вадим Дворниковавтор-переводчик статьи «HTML Forms»