HTML Элементы формы
В этом разделе описываются все элементы HTML формы.
HTML элементы <form>
HTML элемент <form> может содержать один или несколько таких элементов формы:
-
<input> -
<label> -
<select> -
<textarea> -
<button> -
<fieldset> -
<legend> -
<datalist> -
<output> -
<option> -
<optgroup>
Элемент <input>
Самым важным элементом формы является элемент <input>.
Элемент <input> может отображаться по‑разному в зависимости от значения атрибута type.
Если атрибут type пропущен, поле ввода получает тип по умолчанию: "text".
Все разные типы ввода описаны в следующей главе.
Элемент <select>
Элемент <select> определяет drop-down список (выпадающий список):
Пример
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
Попробуйте сами »
Элемент <option> определяет вариант, который может быть выбран.
По умолчанию выбран первый элемент в выпадающем списке.
Чтобы указать предварительно выбранный вариант, добавьте атрибут selected к элементу option:
Видимые значения:
Используйте атрибут size, чтобы указать количество видимых значений:
Пример
<select 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>
Попробуйте сами »
Разрешить множественный выбор:
Используйте атрибут multiple, который позволяет пользователю выбрать более одного значения:
Пример
<select 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>
Попробуйте сами »
Элемент <textarea>
Элемент <textarea> определяет многострочное поле ввода (текстовой области):
Пример
<textarea name="message" rows="10" cols="30">
The cat was playing in the garden.
</textarea>
Попробуйте сами »
Атрибут rows определяет видимое количество строк в текстовой области.
Атрибут cols определяет видимую ширину текстовой области.
Вот как HTML‑код выше будет отображаться в браузере:
Вы также можете определить размер текстовой области с помощью CSS:
Пример
<textarea name="message" style="width:200px; height:600px;">
The cat was playing in the garden.
</textarea>
Попробуйте сами »
Элемент <button>
Элемент <button> определяет кликабельную кнопку:
Пример
<button type="button" onclick="alert('Слава Україні!')">Тыкни меня!</button>
Попробуйте сами »
Вот как HTML-код выше будет отображаться в браузере:
Примечание: Укажите атрибут type для элемента кнопки. Различные браузеры могут использовать по умолчанию различные типы для элемента кнопки.
HTML5 Элементы формы
HTML5 добавил следующие элементы формы:
<datalist><output>
Примечание: Браузеры не отображают неизвестные элементы. Новые элементы, которые не поддерживаются в старых браузерах, не "разрушают" вашу веб-страницу.
HTML5 элемент <datalist>
Элемент <datalist> определяет список заранее заданных вариантов для элемента <input>.
Пользователь увидит выпадающий список предложенных значений при вводе данных.
Атрибут list элемента <input> должен ссылаться на атрибут id элемента <datalist>.
Пример
<form action="/action_page.html">
<input list="browsers">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
</form>
Попробуйте сами »
HTML5 элемент <output>
Элемент <output> представляет результат вычисления (например, выполненный скриптом).
Пример
Произведите расчет и покажите результат в элементе <output>:
<form action="/action_page.html"
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"></output>
<br><br>
<input type="submit">
</form>
Попробуйте сами »
HTML Упражнения
HTML Элементы формы
| Тег | Описание |
|---|---|
| <form> | Определяет HTML‑форму для пользовательского ввода |
| <input> | Определяет элемент управления вводом |
| <textarea> | Определяет многострочный элемент управления вводом (текстовую область) |
| <label> | Определяет метку для элемента <input> |
| <fieldset> | Группирует связанные элементы в форме |
| <legend> | Определяет заголовок для элемента <fieldset> |
| <select> | Определяет выпадающий (раскрывающийся) список |
| <optgroup> | Определяет группу связанных параметров в выпадающем списке |
| <option> | Определяет параметр в выпадающем списке |
| <button> | Определяет кликабельную кнопку |
| <datalist> | Определяет список заранее заданных параметров для элементов управления вводом |
| <output> | Определяет результат вычисления |
Для получения полного списка всех доступных HTML тегов посетите HTML Справочник тегов на нашем сайте W3Schools на русском.
