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

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 Мета теги HTML Методы верстки HTML Адаптивный дизайн HTML Компьютерный код HTML Симантика HTML Руководство HTML Сущности HTML Символы HTML Эмодзи HTML Кодировка HTML URL Кодировка HTML vs. XHTML

HTML Формы

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

HTML Графика

HTML Canvas HTML SVG

HTML Медиа

HTML Media HTML Video HTML Audio HTML Plug-ins HTML YouTube

HTML APIs

HTML Геолакация HTML Drag/Drop HTML Веб Место хранения HTML Веб Работник HTML SSE

HTML Примеры

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

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

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

HTML Формы



Для сбора пользовательских данных используется HTML форма. Затем вводимые пользователем данные могут быть отправлены на сервер для обработки.

Пример






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

Элемент <form>

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

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

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

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


Элемент <input>

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

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

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

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

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



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

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

Пример

Форма с двумя полями ввода текста:

<form>
  <label for="fname">Имя:</label><br>
  <input type="text" id="fname" name="fname"><br>
  <label for="lname">Фамилия:</label><br>
  <input type="text" id="lname" name="lname">
</form>
Попробуйте сами »

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

Имя:

Фамилия:

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


Элемент <label>

Обратите внимание на использование элемента <label> в приведенном выше примере.

Тег <label> определяет метку для многих элементов формы.

Элемент <label> полезен для пользователей программы чтения с экрана, потому что чтения с экрана будет читать вслух надпись, когда пользователь сосредоточен на входном элементе.

Элемент <label> также помогает пользователям, которые испытывают трудности при нажатии на очень маленькие области (например, переключатели или флажки) - потому что, когда пользователь щелкает текст внутри элемента <label>, он переключает переключатель/флажок.

Атрибут for тега <label> должен быть равен атрибуту id элемента <input type="radio">, чтобы связать их вместе.


Кнопки radio

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

Переключатели позволяют пользователю выбрать один из ограниченного числа вариантов.

Пример

Форма с переключателями:

<form>
  <input type="radio" id="male" name="gender" value="male">
  <label for="male">Мужчина</label><br>
  <input type="radio" id="female" name="gender" value="female">
  <label for="female">Женщина</label><br>
  <input type="radio" id="other" name="gender" value="other">
  <label for="other">другое</label>
</form>
Попробуйте сами »

Именно так приведенный выше HTML код будет отображаться в браузере:




Кнопка submit

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

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

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

Пример

Форма с кнопкой отправки:

<form action="/action_page.php">
  <label for="fname">Имя:</label><br>
  <input type="text" id="fname" name="fname" value="Андрей"><br>
  <label for="lname">Фамилия:</label><br>
  <input type="text" id="lname" name="lname" value="Щипунов"><br><br>
  <input type="submit" value="Отправить">
</form>
Попробуйте сами »

Именно так приведенный выше HTML код будет отображаться в браузере:

Имя:

Фамилия:



Атрибут action

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

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

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

<form action="/action_page.php">

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


Атрибут target

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

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

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

Пример

Здесь представленный результат откроется в новой вкладке браузера:

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

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


Атрибут method

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

Пример

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

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

или:

Пример

Используйте метод POST при отправке формы:

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

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

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

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

/action_page.php?firstname=Андрей&lastname=Щипунов

Заметка о GET:

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

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

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

Заметка о POST:

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

Атрибут name

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

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

Пример

В этом примере не будут представленны значения "name" в поле ввода:

<form action="/action_page.php">
  <label for="fname">Имя:</label><br>
  <input type="text" id="fname" value="Щипунов"><br><br>
  <input type="submit" value="Отправить">
</form>
Попробуйте сами »

HTML Упражнения

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

Упражнение:

В приведенной ниже форме добавьте поле ввода с типом "button" и значением "ОК".

<form>
<>
</form>

Начните упражнение


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

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

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