Логотип schoolsw3.com
Учебники Справочники Упражнения КАК? Меню
Создать
Редактор Поддержка Форум

×
Учебники
Справочники
Упражнения
Пожертвовать Обновление Реклама Видео Магазин

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

HTML Формы

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

HTML Графика

HTML Холст HTML SVG

HTML Медиа

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

HTML APIы

HTML5 Геолокация HTML5 Перетаскивание HTML5 Веб хранилище HTML5 Веб работник HTML5 SSE

HTML Примеры

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

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

HTML Список тегов HTML Атрибуты тегов HTML Глобальные атрибуты HTML Поддержка браузера HTML События атрибутов HTML Цвета HTML Canvas HTML Аудио/Видео HTML Типы документов HTML Наборы символов HTML URL Кодировка HTML Коды языка 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 Указывает, куда отправлять данные формы при отправке формы
autocomplete Указывает, должно ли быть включено или выключено автозаполнение формы
enctype Указывает, как данные формы должны быть закодированы при отправке их на сервер (только для method="post")
method Указывает HTTP-метод, который будет использоваться при отправке данных формы
name Задает имя формы
novalidate Указывает, что форма не должна проверяться при отправке
rel Задает связь между связанным ресурсом и текущим документом
target Указывает, где будет отображаться ответ, полученный после отправки формы

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