САЙТ ДЛЯ ВЕБ РАЗРАБОТЧИКОВ НА РУССКОМ ЯЗЫКЕ
×

HTML5 Учебник

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

HTML Формы

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

HTML5

HTML5 ВведениеHTML5 ПоддержкаHTML5 Новые ЭлементыHTML5 СемантикаHTML5 МиграцияHTML5 Синтасис

HTML Графика

HTML CanvasHTML SVGHTML Google Карта

HTML Медиа

HTML МедиаHTML ВидеоHTML АудиоHTML ОбъектыHTML YouTube

HTML API

HTML ГеолокацияHTML ПеретаскиваниеHTML Веб ХранилищеHTML Веб РаботникHTML СОС

HTML Примеры

HTML ПримерыHTML ВикторинаHTML УпражненияHTML СертификатHTML ЗаключениеHTML Возможности

HTML Справочники

HTML Список ТеговHTML АтрибутыHTML ГлобальныеHTML СобытияHTML ЦветаHTML ХолстHTML Аудио/ВидеоHTML ДекларацииHTML Набор КодировокHTML URL КодHTML Коды языкаHTML Коды странHTTP СообщенияHTTP МетодыКовертер PX в EMКлавишные комбинации

HTML Формы



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

Имя:

Фамилия:


Редактор кода »

Элемент <form>

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

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

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

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


Элемент ввода

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

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

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

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

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


Ввод Текста

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

Пример

<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>
Редактор кода »

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

Мужчина
Женщина
Другие

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

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

Форма обработчик обычно сервер со скриптом для обработки входных данных.

Форма обработчик, указанный в форме атрибута action:

Пример

<form action="action_page.php">
 Имя:<br>
 <input type="text" name="firstname" value="Микки"><br>
 Фамилия:<br>
 <input type="text" name="lastname" value="Маус"><br><br>
 <input type="submit" value="Отправить">
</form>
Редактор кода »

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

Имя:

Фамилия:



Атрибут действие

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

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

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

<form action="action_page.php">

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


Атрибут метод

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

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

или:

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

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

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

Однако, когда используется, представленные данных формы будет видны в поле адрес страницы:

action_page.php?firstname=Микки&lastname=Маус

Примечание: GET не должен использоваться при передаче секретной информации! GET лучше всего подходит для не больших, объемов данных, поскольку он имеет и ограниченый размер.


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

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

POST не имеет ограничений по размеру и может использоваться для передачи больших объемов данных.


Атрибут name

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

Если атрибут name не указан, сведения о том, что все поле ввода не будет отправлено.

Этот пример представляет только поле ввода "last name":

Пример

<form action="action_page.php">
 Имя:<br>
 <input type="text" value="Микки"><br>
 Фамилия:<br>
 <input type="text" name="lastname" value="Маус"><br><br>
 <input type="submit" value="Отправить">
</form>
Редактор кода »

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

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

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

Пример

<form action="action_page.php">
  <fieldset>
   <legend>Личная информация:</legend>
   Имя:<br>
   <input type="text" name="firstname" value="Микки"><br>
   Фамилия:<br>
   <input type="text" name="lastname" value="Маус"><br><br>
   <input type="submit" value="Отправить">
  </fieldset>
</form>
Редактор кода »

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

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

Фамилия:



Еще Примеры

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


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


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

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

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