САЙТ НАХОДИТСЯ В РАЗРАБОТКЕ

HTML Учебник

HTML Главная HTML Введение HTML Редакторы HTML Основы HTML Элементы HTML Атрибуты HTML Заголовки HTML Параграфы HTML Стили HTML Форматирование HTML Цитаты HTML Комментарии HTML Цвета HTML CSS HTML Ссылки HTML Изображения HTML Таблицы HTML Списки HTML Блоки HTML Класс HTML Идентификатор HTML Фреймы HTML JavaScript HTML Пути к файлам HTML Head HTML Макеты HTML Адаптивность HTML Компьютерный код HTML Семантика HTML Объект HTML Символы HTML Emojis HTML Кодировка HTML URL кодирование HTML XHTML HTML Гид по стилю

HTML Формы

HTML Формы HTML Элементы формы HTML Тип ввода HTML Атрибуты ввода

HTML 5

HTML5 Введение HTML5 Поддержка HTML5 Новые элементы HTML5 Переход

HTML Графика

HTML Canvas HTML SVG

HTML Media

HTML Медиа HTML Видео HTML Аудио HTML Плагины HTML YouTube

HTML API

HTML Геолокация HTML Drag/Drop HTML Web хранилище HTML Web работник HTML SSE

HTML Примеры

HTML Примеры HTML Викторина HTML Упражнения HTML Резюме HTML Доступность

HTML Справочник

HTML Список тегов HTML Атрибуты HTML Глоб. атрибуты HTML События HTML Цвета HTML Canvas HTML Аудио/Видео HTML Набор символов HTML DOCTYPE HTML URL Кодирование HTML Коды языков HTML Коды стран HTTP Сообщений HTTP Метод PX в EM Конвертер Горячие клавиши
Баннер ТОП

HTML Формы


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

First name:

Last name:


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

Элемент <form>

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

<form>
.
form elements
.
</form>

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

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


Элемент <input>

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

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

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

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

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


Ввод текста

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

Пример

<form>
  First name:<br>
  <input type="text" name="firstname"><br>
  Last name:<br>
  <input type="text" name="lastname">
</form>
Попробуйте сами »

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

First name:

Last name:

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


В контенте

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

<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-код выше будет отображаться в браузере:

Male
Female
Other

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

<input type="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="ОТПРАВИТЬ">
</form>
Попробуйте сами »

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

First name:

Last name:



Атрибут Action

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

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

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

<form action="/action_page.php">

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


Атрибут Target

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

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

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

Пример

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

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


В контенте

Атрибут 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:

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

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

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

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

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

Атрибут Name

Каждое поле ввода должно иметь атрибут 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="ОТПРАВИТЬ">
  </fieldset>
</form>
Попробуйте сами »

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

Personal information: First name:

Last name:



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).

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