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

HTML5 Учебник

HTML Главная HTML Введение HTML Редакторы HTML Основные HTML Элементы HTML Атрибуты HTML Заголовки HTML Параграфы HTML Стили HTML Форматирование HTML Цитирование HTML Комментарии HTML Цвета HTML c CSS HTML Ссылки HTML Изображения HTML Таблицы HTML Списки HTML Блоки HTML Классы HTML Идентификаторы HTML Фреймы HTML JavaScript HTML Путь к Файлу 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 Canvas HTML SVG HTML 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).

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