HTML-формы

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

Элемент <form>

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

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

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

Элемент <input>

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

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

Тип Описание
<input type=»text»> Определяет поле для ввода текста из одной строки.
<input type=»radio»> Определяет радио-кнопку (для выбора одного из нескольких вариантов).
<input type=»submit»> Определяет кнопку HTML submit button (для отправки данных формы).

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

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

<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>:

Атрибут Описание
accept-charset Определяет кодировку, используемую в представленной форме (по умолчанию: кодировка страницы).
action Определяет адрес (url), на который отправляются данные формы (по умолчанию: страница предоставления данных).
autocomplete Определяет, должен ли браузер автоматически заполнять поля формы при вводе (по умолчанию: да).
enctype Определяет кодировку представленных данных (по умолчанию: url-кодировка).
method Определяет метод HTTP, используемый при отправке данных формы (по умолчанию: GET).
name Определяет имя, используемое для идентификации формы (для использования в DOM: document.forms.name).
novalidate Указывает браузеру не выполнять валидацию формы.
target Определяет цель адреса в атрибуте action (по умолчанию: _self).

Перевод статьи «HTML Forms» был подготовлен дружной командой проекта Сайтостроение от А до Я.