Элементы HTML-формы
В этой главе описаны все различные элементы HTML-формы.
Элементы HTML <form>
Элемент HTML <form> может содержать один или несколько из следующих элементов формы:
Элемент <input>
Одним из наиболее часто используемых элементов формы является элемент <input>.
Элемент <input> может отображаться несколькими способами, в зависимости от атрибута type.
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname">
Элемент <label>
Элемент <label> определяет метку для нескольких элементов формы.
Элемент <label> полезен для пользователей программы чтения с экрана, поскольку программа чтения с экрана прочитает метку вслух, когда пользователь сосредоточится на элементе ввода.
Элемент <label> также помогает пользователям, которым трудно нажимать на очень маленькие области (такие как переключатели или флажки) - потому что, когда пользователь нажимает на текст внутри элемента <label>, он переключает переключатель / флажок.
Атрибут for тега <label> должен быть равен атрибуту id элемента <input>, чтобы связать их вместе.
Элемент <select>
Элемент <select> определяет выпадающий список:
<label for="cars">Choose a car:</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>
Элемент <option> определяет параметр, который может быть выбран.
По умолчанию выбирается первый элемент в раскрывающемся списке.
Чтобы определить предварительно выбранный параметр, добавьте атрибут selected к параметру:
<option value="fiat" selected>Fiat</option>
Видимые значения:
Используйте атрибут size для указания количества видимых значений:
<label for="cars">Choose a car:</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>
Разрешить множественный выбор:
Используйте атрибут multiple, чтобы разрешить пользователю выбирать более одного значения:
<label for="cars">Choose a car:</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>
Элемент <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('Hello World!')">Click Me!</button>
Вот как приведенный выше HTML-код будет отображаться в браузере:
Элементы <fieldset> и <legend>
Элемент <fieldset> используется для группировки связанных данных в форме.
Элемент <legend> определяет заголовок для элемента <fieldset>.
<form action="/action_page.php">
<fieldset>
<legend>Personalia:</legend>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit" value="Submit">
</fieldset>
</form>
Вот как приведенный выше HTML-код будет отображаться в браузере:
Элемент <datalist>
Элемент <datalist> определяет список предопределенных параметров для элемента <input>.
Пользователи будут видеть раскрывающийся список предопределенных параметров при вводе данных.
Атрибут list элемента <input> должен ссылаться на атрибут id элемента <datalist>.
<form action="/action_page.php">
<input list="browsers">
<datalist id="browsers">
<option value="Edge">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
</form>
Элемент <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-формы
<form> Определяет HTML-форму для пользовательского ввода
<input> Определяет элемент управления вводом
<textarea> Определяет многострочный элемент управления вводом (textarea)
<label> Определяет метку для элемента <input>
<fieldset> Группирует связанные элементы в форме
<legend> Определяет заголовок для элемента <fieldset>
<select> Определяет выпадающий список
<optgroup> Определяет группу связанных параметров в выпадающем списке
<option> Определяет параметр в выпадающем списке
<button> Определяет кнопку, на которую можно нажать
<datalist> Определяет список предопределенных параметров для элементов управления вводом
<output> Определяет результат вычисления