HTML -формы
HTML-форма используется для сбора пользовательского ввода. Пользовательский ввод чаще всего отправляется на сервер для обработки.
Пример
Элемент <form>
Элемент HTML <form>используется для создания формы HTML для пользовательского ввода:
<form>
.
form elements
.
</form>
Элемент <form>представляет собой контейнер для различных типов элементов ввода, таких как: текстовые поля, флажки, переключатели, кнопки отправки и т. д.
В этой главе рассматриваются все различные элементы формы: HTML-элементы формы .
Элемент <input>
Элемент HTML <input>является наиболее часто используемым элементом формы.
Элемент <input>может отображаться разными способами, в зависимости от type
атрибута.
Вот некоторые примеры:
| Тип | Описание |
|---|---|
| <тип ввода="текст"> | Отображает однострочное поле ввода текста |
| <тип ввода="радио"> | Отображает переключатель (для выбора одного из множества вариантов) |
| <тип ввода="флажок"> | Отображает флажок (для выбора нуля или более из множества вариантов) |
| <тип ввода="отправить"> | Отображает кнопку отправки (для отправки формы) |
| <тип ввода="кнопка"> | Отображает нажимаемую кнопку |
Все различные типы ввода рассматриваются в этой главе: Типы ввода HTML .
Текстовые поля
Определяет <input type="text">однострочное поле ввода для ввода текста.
Пример
Форма с полями ввода текста:
<form>
<label for="fname">First name:</label><br>
<input
type="text" id="fname" name="fname"><br>
<label for="lname">Last
name:</label><br>
<input type="text" id="lname" name="lname">
</form>
Вот как приведенный выше HTML-код будет отображаться в браузере:
Примечание. Сама форма не видна. Также обратите внимание, что ширина поля ввода по умолчанию составляет 20 символов.
Элемент <label>
Обратите внимание на использование <label>элемента в приведенном выше примере.
Тег <label>определяет метку для многих элементов формы.
Этот <label>элемент полезен для пользователей программ чтения с экрана, потому что программа чтения с экрана прочитает вслух метку, когда пользователь сосредоточится на элементе ввода.
Этот <label>элемент также помогает пользователям, которым трудно нажимать на очень маленькие области (например, переключатели или флажки), потому что, когда пользователь щелкает текст внутри <label>элемента, он переключает переключатель/флажок.
Атрибут тега должен быть равен forатрибуту элемента
, чтобы связать их вместе.<label>id<input>
Радио-кнопки
<input type="radio">определяет переключатель .
Радиокнопки позволяют пользователю выбрать ОДИН из ограниченного числа вариантов.
Пример
Форма с переключателями:
<p>Choose your favorite Web language:</p>
<form>
<input type="radio" id="html" name="fav_language"
value="HTML">
<label for="html">HTML</label><br>
<input
type="radio" id="css" name="fav_language" value="CSS">
<label
for="css">CSS</label><br>
<input type="radio" id="javascript"
name="fav_language" value="JavaScript">
<label for="javascript">JavaScript</label>
</form>
Вот как приведенный выше HTML-код будет отображаться в браузере:
Выберите свой любимый веб-язык:
Флажки
Определяет флажок . <input type="checkbox">_
Флажки позволяют пользователю выбрать НОЛЬ или БОЛЬШЕ вариантов из ограниченного числа вариантов.
Пример
Форма с флажками:
<form>
<input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
<label for="vehicle1"> I have a bike</label><br>
<input
type="checkbox" id="vehicle2" name="vehicle2" value="Car">
<label for="vehicle2">
I have a car</label><br>
<input type="checkbox"
id="vehicle3" name="vehicle3"
value="Boat">
<label for="vehicle3"> I have a boat</label>
</form>
Вот как приведенный выше HTML-код будет отображаться в браузере:
Кнопка отправки
Определяет <input type="submit">кнопку для отправки данных формы обработчику формы.
Обработчик формы обычно представляет собой файл на сервере со сценарием для обработки входных данных.
Обработчик формы указывается в action
атрибуте формы.
Пример
Форма с кнопкой отправки:
<form action="/action_page.php">
<label for="fname">First
name:</label><br>
<input type="text" id="fname" name="fname"
value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit" value="Submit">
</form>
Вот как приведенный выше HTML-код будет отображаться в браузере:
Атрибут имени для <input>
Обратите внимание, что каждое поле ввода должно иметь nameатрибут для отправки.
Если nameатрибут опущен, значение поля ввода вообще не будет отправлено.
Пример
В этом примере не будет отправлено значение поля ввода «Имя»:
<form action="/action_page.php">
<label for="fname">First
name:</label><br>
<input type="text" id="fname" value="John"><br><br>
<input type="submit" value="Submit">
</form>