Элементы HTML <form>
В этой главе описываются все различные элементы формы HTML.
Элемент <form> может содержать один или несколько из этих элементов формы: <input>, <label>, <select>, <textarea>, <button>, <fieldset>, <legend>, <datalist>, <output>, <option> и <optgroup>.
Элемент <input>
Элемент <input> — один из самых часто используемых элементов формы. Он может отображаться разными способами в зависимости от атрибута type. Все значения type рассмотрены в HTML Input Types.
Пример
Одно текстовое поле с меткой.
Вывод: полная HTML-страница
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Элемент input</title>
</head>
<body>
<form>
<label for="fname">Имя:</label>
<input type="text" id="fname" name="fname">
</form>
</body>
</html>
Элемент <label>
Элемент <label> определяет метку для элемента формы.
Он помогает пользователям программ чтения с экрана, поскольку экранный диктор озвучивает метку при переходе пользователя к input. Он также помогает людям, которым сложно нажимать на очень маленькие области, такие как переключатели или флажки: клик по тексту метки переключает соответствующий элемент управления. Установите атрибут for метки равным id input, чтобы связать их.
Элемент <select>
Элемент <select> создаёт выпадающий список. Каждый вариант — это элемент <option>. По умолчанию выбран первый вариант.
Чтобы предварительно выбрать вариант, добавьте к нему атрибут selected. Используйте атрибут size, чтобы задать, сколько вариантов видно одновременно, и атрибут multiple, чтобы позволить пользователю выбрать более одного варианта.
Выпадающий список
Простой выпадающий список автомобилей.
Вывод: полная HTML-страница
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Элемент select</title>
</head>
<body>
<form>
<label for="cars">Выберите автомобиль:</label>
<select id="cars" name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
</form>
</body>
</html>
Предварительно выбранный вариант
Тот же список с предварительно выбранным Fiat с помощью атрибута selected.
Вывод: полная 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>
<label for="cars">Выберите автомобиль:</label>
<select id="cars" name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat" selected>Fiat</option>
<option value="audi">Audi</option>
</select>
</form>
</body>
</html>
Видимые значения
Использование size="3" для показа трёх вариантов одновременно.
Вывод: полная 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>
<label for="cars">Выберите автомобиль:</label>
<select id="cars" name="cars" size="3">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
</form>
</body>
</html>
Множественный выбор
Использование атрибута multiple, чтобы пользователь мог выбрать более одного автомобиля.
Вывод: полная 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>
<label for="cars">Выберите автомобиль:</label>
<select id="cars" name="cars" size="4" multiple>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
</form>
</body>
</html>
Элемент <textarea>
Элемент <textarea> создаёт многострочное текстовое поле.
Атрибут rows задаёт число видимых строк, а атрибут cols — видимую ширину. Размер также можно задать с помощью CSS.
Использование rows и cols
Текстовая область, размер которой задан с помощью rows и cols.
Вывод: полная HTML-страница
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Элемент textarea</title>
</head>
<body>
<form>
<textarea name="message" rows="10" cols="30">Кошка играла в саду.</textarea>
</form>
</body>
</html>
Размер задан с помощью CSS
Текстовая область, размер которой задан с помощью CSS-свойств width и height.
Вывод: полная HTML-страница
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Textarea с размерами через CSS</title>
</head>
<body>
<form>
<textarea name="message" style="width:200px; height:100px;">Кошка играла в саду.</textarea>
</form>
</body>
</html>
Элемент <button>
Элемент <button> создаёт кликабельную кнопку.
Примечание: Всегда задавайте атрибут type для кнопки, так как разные браузеры могут использовать разные типы по умолчанию.
Пример
Кнопка, показывающая оповещение при нажатии.
Вывод: полная HTML-страница
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Элемент button</title>
</head>
<body>
<button type="button" onclick="alert('Привет, мир!')">Нажми меня!</button>
</body>
</html>
Элементы <fieldset> и <legend>
Элемент <fieldset> группирует связанные поля в форме. Элемент <legend> задаёт заголовок для этой группы.
Пример
Форма, поля которой сгруппированы в <fieldset> с заголовком <legend>.
Вывод: полная HTML-страница
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>fieldset и legend</title>
</head>
<body>
<form action="/action_page.php">
<fieldset>
<legend>Личные данные:</legend>
<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="Отправить">
</fieldset>
</form>
</body>
</html>
Элемент <datalist>
Элемент <datalist> предоставляет <input> список предопределённых вариантов. Пользователь видит выпадающий список этих вариантов во время ввода.
Атрибут list у input должен совпадать с id элемента <datalist>, чтобы связать их.
Пример
Текстовое поле с datalist из предложений браузера.
Вывод: полная HTML-страница
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Элемент datalist</title>
</head>
<body>
<form action="/action_page.php">
<input list="browsers" name="browser">
<datalist id="browsers">
<option value="Edge">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
</form>
</body>
</html>
Элемент <output>
Элемент <output> показывает результат вычисления, например выполненного скриптом.
Пример
Форма, складывающая два числа и показывающая результат в элементе <output>.
Вывод: полная HTML-страница
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Элемент output</title>
</head>
<body>
<form action="/action_page.php" oninput="x.value=parseInt(a.value)+parseInt(b.value)">
0
<input type="range" id="a" name="a" value="50">
100 +
<input type="number" id="b" name="b" value="50">
=
<output name="x" for="a b">100</output>
<br><br>
<input type="submit">
</form>
</body>
</html>
Элементы формы HTML
Вот элементы формы HTML и что делает каждый из них:
<form>— определяет форму для пользовательского ввода.<input>— определяет элемент управления вводом.<textarea>— определяет многострочный элемент управления вводом (текстовую область).<label>— определяет метку для элемента<input>.<fieldset>— группирует связанные элементы в форме.<legend>— определяет заголовок для элемента<fieldset>.<select>— определяет выпадающий список.<optgroup>— определяет группу связанных вариантов в выпадающем списке.<option>— определяет вариант в выпадающем списке.<button>— определяет кликабельную кнопку.<datalist>— предоставляет список предопределённых вариантов для элементов управления вводом.<output>— определяет результат вычисления.