HTML-формы

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

Элемент <form>

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

<form> . form elements . </form>

Элемент <form> представляет собой контейнер для различных типов элементов ввода, таких как: текстовые поля, флажки, переключатели, кнопки отправки и т.д.

Элемент <input>

Элемент HTML <input> является наиболее часто используемым элементом формы.

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

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

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

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

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

<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>

Элемент <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-код будет отображаться в браузере:

Выберите свой любимый веб-язык:

HTML
CSS
язык JavaScript

Флажки

<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-код будет отображаться в браузере:

I have a bike
I have a car
I have a boat

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

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

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

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

<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-код будет отображаться в браузере:

Атрибут Name для <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>