Формы HTML
Форма HTML используется для сбора ввода от пользователя. Введённые пользователем данные чаще всего отправляются на сервер, где они обрабатываются.
Пример
Простая форма с двумя текстовыми полями для имени и фамилии.
Output: полная HTML-страница
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML-форма</title>
</head>
<body>
<form>
Имя:<br>
<input type="text" name="firstname"><br>
Фамилия:<br>
<input type="text" name="lastname">
</form>
</body>
</html>
Элемент <form>
Элемент <form> используется для создания HTML-формы для пользовательского ввода.
Это контейнер, содержащий различные элементы ввода, такие как текстовые поля, флажки, переключатели и кнопки отправки. Все элементы формы рассмотрены в HTML Form Elements.
Структура формы
Пустой тег <form> с размещёнными внутри него элементами формы.
<form>
.
form elements
.
</form>
Элемент <input>
Элемент <input> — самый используемый элемент формы.
Он может отображаться по-разному в зависимости от атрибута type. Некоторые распространённые типы: text для однострочного текстового поля, radio для переключателя, позволяющего выбрать один из нескольких вариантов, checkbox для выбора нуля или более вариантов, submit для кнопки, отправляющей форму, и button для кликабельной кнопки.
Все типы input рассмотрены в HTML Input Types.
Текстовые поля
<input type="text"> создаёт однострочное поле для ввода текста.
Примечание: Сама форма невидима. Ширина текстового поля по умолчанию составляет около 20 символов.
Пример
Форма с текстовыми полями для имени и фамилии, каждое со своей меткой.
Output: полная HTML-страница
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Текстовые поля</title>
</head>
<body>
<h2>Текстовые поля ввода</h2>
<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>
</body>
</html>
Элемент <label>
Тег <label> определяет метку для элемента формы.
Он помогает пользователям программ чтения с экрана, поскольку экранный диктор озвучивает метку при переходе пользователя к input. Он также помогает людям, которым сложно нажимать на очень маленькие области, такие как переключатели или флажки: клик по тексту метки переключает соответствующий элемент управления.
Чтобы связать метку с input, установите атрибут for метки равным атрибуту id input.
Переключатели (Radio Buttons)
<input type="radio"> создаёт переключатель. Переключатели позволяют пользователю выбрать только ОДИН вариант из небольшого набора.
Пример
Форма с переключателями для выбора одного любимого веб-языка. У них одинаковый name, поэтому можно выбрать только один.
Output: полная HTML-страница
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Переключатели (Radio)</title>
</head>
<body>
<p>Выберите ваш любимый веб-язык:</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>
</body>
</html>
Флажки (Checkboxes)
<input type="checkbox"> создаёт флажок. Флажки позволяют пользователю выбрать НОЛЬ ИЛИ БОЛЬШЕ вариантов из набора.
Пример
Форма с тремя флажками, которые пользователь может независимо отмечать и снимать.
Output: полная HTML-страница
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Флажки</title>
</head>
<body>
<form>
<input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
<label for="vehicle1"> У меня есть велосипед</label><br>
<input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
<label for="vehicle2"> У меня есть машина</label><br>
<input type="checkbox" id="vehicle3" name="vehicle3" value="Boat">
<label for="vehicle3"> У меня есть лодка</label>
</form>
</body>
</html>
Кнопка отправки
<input type="submit"> создаёт кнопку, отправляющую данные формы обработчику формы.
Обработчик формы — это обычно файл на сервере со скриптом, обрабатывающим ввод. Вы задаёте его в атрибуте action формы.
Пример
Форма с кнопкой отправки, отправляющей данные на страницу, указанную в атрибуте action.
Output: полная HTML-страница
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Кнопка отправки</title>
</head>
<body>
<form action="/action_page.php">
<label for="fname">Имя:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Фамилия:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
Атрибут Name для <input>
Каждое поле ввода должно иметь атрибут name, чтобы быть отправленным при отправке формы.
Если атрибут name отсутствует, значение этого поля вообще не отправляется.
Пример
Эта форма не отправит значение поля «имя», так как у этого input нет атрибута name.
Output: полная HTML-страница
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Атрибут Name</title>
</head>
<body>
<form action="/action_page.php">
<label for="fname">Имя:</label><br>
<input type="text" id="fname" value="John"><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>