В этой главе описаны все различные элементы HTML форм.
Элемент <input>
Одним из наиболее часто используемых элементов формы является элемент <input>.
Элемент <input> может быть отображен несколькими способами, в зависимости от атрибута type.
<input type="text" id="firstname" name="firstname">
Попробуйте сами »
Если атрибут type опущен, поле ввода получает значение по умолчанию тип: "text".
Все различные типы входных данных рассматриваются в следующей главе: HTML Типы ввода.
Элемент <select>
Элемент <select> определяет раскрывающийся список:
<select id="cars" name="cars">
<option value="volvo">Вольво</option>
<option value="saab">Сааб</option>
<option value="fiat">Фиат</option>
<option value="audi">Ауди</option>
</select>
Попробуйте сами »
Элемент <option> определяет параметр, который может быть выбран.
По умолчанию выбирается первый элемент в раскрывающемся списке.
Чтобы определить предварительно выбранный параметр, добавьте атрибут selected с параметром <option>:
<option value="fiat" selected>Фиат</option>
Попробуйте сами »
Видимые значения:
Используйте атрибут size для указания количества видимых значений:
<select name="cars" size="3">
<option value="volvo">Вольво</option>
<option value="saab">Сааб</option>
<option value="fiat">Фиат</option>
<option value="audi">Ауди</option>
</select>
Попробуйте сами »
Разрешить выбор:
Используйте атрибут multiple, позволяющий пользователю выбрать более одного значения:
<select name="cars" size="4" multiple>
<option value="volvo">Вольво</option>
<option value="saab">Сааб</option>
<option value="fiat">Фиат</option>
<option value="audi">Ауди</option>
</select>
Попробуйте сами »
Элемент <textarea>
Элемент <textarea> элемент определяет многострочное поле ввода (текстовой области):
<textarea name="message" rows="10" cols="30">
Кот играл в саду.
</textarea>
Попробуйте сами »
Атрибут rows указывает видимое количество строк в текстовой области.
Атрибут cols определяет видимую ширину текстовой области.
Именно так приведенный выше HTML код будет отображаться в браузере:
Вы также можете определить размер текстовой области с помощью CSS:
<textarea name="message" style="width:200px; height:600px;">
Кот играл в саду.
</textarea>
Попробуйте сами »
Элемент <button>
Элемент <button> определяет кликабельность button:
<button type="button" onclick="alert('Привет Мир!')">Нажмите на меня!</button>
Попробуйте сами »
Именно так приведенный выше HTML код будет отображаться в браузере:
Примечание: Всегда указывайте атрибут type для элемента button. Различные браузеры могут использовать различные типы по умолчанию для элемента button.
Элементы <fieldset> и <legend>
Элемент <fieldset> используется для группировки связанных данных в форме.
Элемент <legend> определяет заголовок для элемента <fieldset>.
<form action="/action_page.php">
<fieldset>
<legend>Персональная информация:</legend>
<label for="fname">Имя:</label><br>
<input type="text" id="fname" name="fname" value="Андрей"><br>
<label for="lname">Фамилия:</label><br>
<input type="text" id="lname" name="lname" value="Щипунов"><br><br>
<input type="submit" value="Отправить">
</fieldset>
</form>
Попробуйте сами »
Именно так приведенный выше HTML код будет отображаться в браузере:
Элемент <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>
Попробуйте сами »
Элемент <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 Упражнения
HTML Элементы формы
| Тег | Описание |
|---|---|
| <form> | Определяет HTML форму для пользовательского ввода |
| <input> | Определяет входной элемент управления |
| <textarea> | Определяет многострочный элемент управления вводом (текстовая область) |
| <label> | Определяет метку для элемента <input> |
| <fieldset> | Группы связанных элементов в форме |
| <legend> | Определяет заголовок для элемента <fieldset> |
| <select> | Определяет раскрывающий список |
| <optgroup> | Определяет группу связанных параметров в раскрывающемся списке |
| <option> | Определяет параметр в раскрывающемся списке |
| <button> | Определяет кликабельную кнопку |
| <datalist> | Задает список предопределенных параметров для элементов управления вводом |
| <output> | Определяет результат вычисления |
Для получения полного списка всех доступных HTML тегов посетите HTML Справочник тегов.