ЛУЧШИЙ САЙТ ДЛЯ ВЕБ-РАЗРАБОТЧИКОВ
HTML CSS JAVASCRIPT SQL PHP PYTHON JAVA KOTLIN GO C C++ C# AI W3.CSS TypeScript Как сделать? СПРАВОЧНИКИ БОЛЬШЕ 🔍 ◑ УПРАЖНЕНИЯ
HTML5. Уроки для начинающих. W3Schools на русском

Ua En Es De Fr

HTML Формы

❮ Prev Next ❯

Форма HTML используется для сбора данных, введенных пользователем. Вводимые пользователем данные чаще всего отправляются на сервер для обработки.

HTML Форма. Пример

Имя:

Фамилия:


Попробуйте сами »

Элемент <form>

HTML элемент <form> определяет форму, используемую для сбора пользовательского ввода:

<form>
.
элементы формы
.
</form>

HTML-форма содержит элементы формы.

Элементы формы - это разные типы элементов ввода, такие как текстовые поля, флажки, переключатели, кнопки отправки и т.д.

Элемент <input>

Элемент <input> является наиболее важным элементом формы.

Элемент <input> может отображаться несколькими способами, в зависимости от атрибута type.

Вот несколько примеров:

Тип Описание
<input type="text"> Определяет однострочное поле ввода текста
<input type="radio"> Определение переключателя (для выбора одного из нескольких вариантов)
<input type="submit"> Определение кнопки отправки (для отправки формы)

Вы узнаете гораздо больше о типах ввода позже в этом учебнике на нашем сайте W3Schools на русском.

Ввод текста

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

Пример

<form>
 Имя<br>
  <input type='text' name='firstname'><br>
 Фамилия:<br>
  <input type='text' name='lastname'>
</form>
Попробуйте сами »

Вот так это будет выглядеть в браузере:

Имя

Фамилия:

Примечание: Сама форма не отображается. Обратите внимание также, что ширина текстового поля по умолчанию содержит 20 символов.

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

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

Переключатели (радиокнопки) позволяют пользователю выбирать ОДИН с ограниченного количества вариантов:

Пример

<form>
 <input type='radio' name='gender" value='male' checked> Мужской<br>
 <input type='radio' name='gender' value='female'> Женский<br>
 <input type='radio' name='gender' value='other'> Другое
</form>
Попробуйте сами »

Вот как HTML-код выше будет отображаться в браузере:

Мужской
Женский
Другое

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

<input type='submit'> определяет кнопку для отправки данных формы в обработчик форм.

Обработчик форм обычно представляет собой серверную страницу со скриптом для обработки входящих данных.

Обработчик формы указывается в атрибуте action формы:

Пример

<form action='/action_page.html'>
  Имя<br>
  <input type='text' name='firstname' value='Mickey'><br>
  Фамилия:<br>
  <input type='text' name='lastname' value='Mouse'><br><br>
  <input type='submit' value='Отправить'>
</form>
Попробуйте сами »

Вот как HTML-код выше будет отображаться в браузере:

Имя

Фамилия:


Атрибут Action (Действие)

Атрибут action определяет действие, которое будет выполнено при отправке формы.

Обычно данные формы отправляются на веб‑страницу на сервере, когда пользователь нажимает кнопку отправки (submit).

В приведённом выше примере данные формы отправляются на серверную страницу с именем «/action_page.html». Эта страница содержит серверный скрипт, который обрабатывает данные формы:

<form action='/action_page.html'>

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

Атрибут Target

Атрибут target указывает, будет ли результат отправки формы открываться в новой вкладке браузера, во фрейме или в текущем окне.

По умолчанию значение _self означает, что форма будет отправлена в текущем окне.

Чтобы открыть результат отправки формы в новой вкладке браузера, используйте значение _blank:

Пример

<form action='/action_page.html' target='_blank'>
Попробуйте сами »

Другими допустимыми значениями являются _parent, _top или имя, представляющее имя iframe.

Атрибут Method

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

Пример

<form action='/action_page.html' method='get'>
Попробуйте сами »

або:

Пример

<form action='/action_page.html' method='post'>
Попробуйте сами »

Когда использовать метод GET?

Метод по умолчанию при отправке данных формы — GET.

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

/action_page.html?firstname=Mickey&lastname=Mouse

Примечание по GET:

  • Добавляет данные формы к URL‑адресу в виде пар имя/значение
  • Длина URL‑адреса ограничена (около 3000 символов)
  • Никогда не используйте GET для отправки конфиденциальных данных! (Они будут видны в URL‑адресе)
  • Полезен для отправки форм, результат которых пользователь может захотеть добавить в закладки
  • GET — лучший вариант для незащищённых данных, например строк запросов в Google

Когда использовать метод POST?

Всегда используйте POST, если данные формы содержат конфиденциальную или личную информацию. Метод POST не отображает отправленные данные формы в адресной строке страницы.

Примечание по POST:

  • POST не имеет ограничений по размеру и может использоваться для отправки больших объёмов данных
  • Отправленные с помощью POST формы нельзя добавить в закладки

Атрибут Name

Каждое поле ввода должно иметь атрибут name для отправки.

Если атрибут name опущен, данные этого поля ввода не будут отправлены вовсе.

Этот пример будет отправлять только поле ввода «Last name» (Фамилия):

Пример

<form action='/action_page.html'>
  Имя:<br>
  <input type='text' value='Mickey'><br>
  Фамилия:<br>
  <input type='text' name='lastname' value='Mouse'><br><br>
  <input type='submit' value='Отправить'>
</form>
Попробуйте сами »

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

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

Элемент <legend> определяет заголовок для элемента <fieldset>.

Пример

<form action='/action_page.html'>
  <fieldset>
    <legend>Личная информация:</legend>
    Имя<br>
    <input type='text' name='firstname' value='Mickey'><br>
    Фамилия:<br>
    <input type='text' name='lastname' value='Mouse'><br><br>
    <input type='submit' value='Отправить'>
  </fieldset>
</form>
Попробуйте сами »

Вот как HTML-код выше будет отображаться в браузере:

Личная информация: Имя

Фамилия:


HTML Упражнения

Проверьте себя с помощью упражнений

Упражнение:

В следующей форме добавьте поле ввода с типом 'button' и значением 'OK'.

<form>
<>
</form>

Список всех атрибутов <form>:

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

Вы узнаете больше об атрибутах формы в следующих разделах нашего сайта W3Schools на русском.

Для получения полного списка всех доступных HTML тегов посетите HTML Справочник тегов на нашем сайте W3Schools на русском.

HTML — Формы — Видеоурок W3Schools

Это видео объясняет формы и их использование в HTML.

Часть серии видеоуроков по изучению HTML для начинающих!

❮ Prev Next ❯