HTML Элементы формы
Курс по основам HTML. W3Schools на русском языке. Уроки для начинающих
Элементы форм на веб-страницах
Этот раздел описывает все элементы форм в HTML.
Элемент <input>
Самым важным элементом формы является элемент <input> (т.е. ввод). Элемент <input> может отображаться несколькими способами, в зависимости от атрибута type.
Примечание: Если атрибут type опущен, поле ввода получает тип по умолчанию: "text".
Все разные типы входных данных рассматриваются в следующем разделе.
Элемент <select>
Элемент <select> определяет выпадающий список:
Пример:
<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 к параметру:
Видимые значения:
Используйте атрибут 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> определяет кликабельную кнопку (которую можно нажать):
Таким образом данный HTML-код будет отображаться в браузере:
Примечание: Всегда указывайте атрибут type элемента кнопки. Разные браузеры могут использовать разные type по умолчанию для элемента кнопки.
Элементы формы в HTML5
HTML5 добавил такие элементы формы:
<datalist><output>
Примечание: Браузеры не показывают неизвестные элементы. Новые элементы, которые не поддерживаются в старых браузерах, не "портят" вашу веб-страницу.
HTML5 элемент <datalist>
Элемент <datalist> указывает список предварительно определённых параметров для элемента <input>. Пользователи видят раскрывающий список предварительно определённых параметров во время ввода данных. Атрибут list элемента <input> должен ссылаться на атрибут id элемента <datalist>.
Пример:
<form action="/action_page.php">
<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.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"></output>
<br><br>
<input type="submit">
</form>
Попробуйте сами »
Проверьте себя с помощью упражнений
HTML элементы формы
= новые в HTML5.
| Тег | Описание |
|---|---|
| <form> | Определяет HTML форму для ввода пользователем |
| <input> | Определяет элемент управления вводом |
| <textarea> | Определяет многострочный элемент управления вводом |
| <label> | Определяет метку для элемента <input> |
| <fieldset> | Группы связанных элементов в форме |
| <legend> | Определяет заголовок для элемента <fieldset> |
| <select> | Определяет выпадающий (раскрывающийся) список |
| <optgroup> | Определяет группу соответствующих параметров в раскрывающемся списке |
| <option> | Определяет параметр в раскрывающемся списке |
| <button> | Определяет кликабельную кнопку (которую можно нажимать) |
| <datalist> | Определяет список предварительно определённых параметров для элементов управления вводом |
| <output> | Определяет результат расчёта |
Примечание: Для получения полного списка всех доступных HTML тегов, посетите Справочник HTML тегов.