Элемент html-формы <input>, его основные типы и атрибуты. Примеры отображения некоторых типов элемента <input> на веб-странице и взаимодействие с ними.
Элемент формы <input>
type.Элемент формы <input> можно рассматривать как коллекцию дочерних элементов управления (полей ввода) различных типов, предназначенных для ввода данных на веб-странице.
Синтаксис указания типа возвращаемого объекта для элемента <input>:
|
1 |
<input type="type"> |
Типы элемента <input>
Все типы элемента <input>, предназначенные для использования в html:
| Тип элемента <input> | Возвращаемый объект |
|---|---|
| button | командная кнопка, запускающая какой-либо сценарий |
| checkbox | флажок, позволяющий выбрать несколько вариантов из предложенных, в том числе ноль вариантов |
| color | поле с палитрой, позволяющей выбрать цвет |
| date | поле со средством выбора даты (календарем) |
| datetime-local | поле со средством выбора даты и времени |
| поле для ввода email, который может автоматически проверяться при отправке | |
| file | кнопка, открывающая диалог выбора файла, и поле для отображения выбранного файла |
| hidden | скрытое поле для служебной информации, которое не отображается на веб-странице |
| image | кнопка для отправки данных формы на обработку в виде изображения |
| month | поле со средством выбора месяца и года |
| number | поле со счетчиком для выбора чисел |
| password | поле для ввода пароля с маскировкой символов звездочками или кружками |
| radio | переключатель, позволяющий выбрать только один вариант из нескольких |
| range | элемент управления для ввода числа в виде отрезка с ползунком |
| reset | кнопка сброса, возвращающая все значения элементов формы к значениям по умолчанию |
| search | поле поиска — обычное текстовое поле, но с кнопкой очистки содержимого |
| submit | кнопка для отправки данных формы на обработку |
| tel | поле для номера телефона, которому можно задать шаблон для проверки введенного значения |
| text | однострочное текстовое поле (тип элемента <input> по умолчанию) |
| time | поле со средством выбора времени |
| url | поле для ввода URL-адреса, которое, в зависимости от поддержки браузера, может автоматически проверяться при отправке |
| week | поле со средством выбора недели и года |
Стоит отметить, что отдельные из перечисленных выше типов элемента <input>, поддерживаются не всеми браузерами.
Несмотря на то, что скрытое поле hidden не отображается на веб-странице, оно доступно и может быть отредактировано с помощью инструментов разработчика любого браузера или функции «Просмотр исходного кода».
Атрибуты элементов управления
Основные атрибуты элемента <input> и других элементов управления, предназначенные для использования в html:
| Атрибут | Описание |
|---|---|
| autofocus | указывает, что поле ввода должно автоматически получать фокус при загрузке веб-страницы |
| checked | указывает, что поле ввода должно быть выбрано при загрузке веб-страницы (для type="checkbox" и type="radio" ) |
| disabled | отключает поле ввода |
| max | максимальное значение для поля ввода |
| maxlength | максимальное количество символов для поля ввода |
| min | минимальное значение для поля ввода |
| multiple | разрешает вводить в поле ввода более одного значения (для type="email" и type="file" ) |
| pattern | регулярное выражение для проверки введенного значения в поле ввода |
| placeholder | подсказка, описывающая ожидаемое значение поля ввода |
| readonly | указывает, что поле ввода доступно только для чтения |
| required | указывает, что поле ввода является обязательным для заполнения |
| size | ширина поля ввода в символах |
| step | определяет шаг (интервал чисел) для числовых полей ввода |
| value | значение по умолчанию для поля ввода |
Для элемента type="image" есть атрибуты height и width, которые задают высоту и ширину изображения.
Примеры
Для проведения тестов с элементами управления формы, используйте файл test.html.
Пример 1
Выбор цвета с помощью элемента ввода <input type="color">, определение числового значения выбранного цвета и запись его в элементы формы <output> и <input>:
|
1 2 3 4 5 6 |
<form> <p>Нажмите и выберите цвет: <input type="color" name="coior1"></p> <p>Вывод значения цвета в элемент output: <output name="out1">0</output></p> <p>Вывод значения цвета в элемент input: <input name="inp1" size="6" value="0"></p> <button type="button" onclick="out1.value=coior1.value, inp1.value=coior1.value">Вывести значение цвета</button> </form> |
Результат:
Пример 2
Автоматический вывод значения элемента управления <input type="range"> в элемент формы <input>:
|
1 2 3 4 5 6 |
<form oninput="inp1.value=range1.value"> <p>Передвиньте ползунок элемента range:</p> <p>-100 <input type="range" name="range1" min="-100" max="100" value="0"> 100</p> <p>Значение элемента range: <input name="inp1" size="6" value="0"></p> <input type="reset"> </form> |
Результат:
Кнопка «Сбросить» (элемент <input type="reset">) вернет всем элементам управления формы значения по умолчанию.
Пример 3
Выбор значения из списка с помощью переключателя и автоматическое отображение значения выбранного элемента в текстовом поле <input>:
|
1 2 3 4 5 6 7 8 9 |
<form oninput="inp1.value=rad1.value"> <p>Выберите слово из списка:<p> <p><input type="radio" name="rad1" value="Бокал"> Бокал<p> <p><input type="radio" name="rad1" value="Ведро"> Ведро<p> <p><input type="radio" name="rad1" value="Кубик"> Кубик<p> <p><input type="radio" name="rad1" value="Лунка" checked> Лунка<p> <p><input type="radio" name="rad1" value="Ступа"> Ступа<p> <input name="inp1" value="Лунка"> </form> |
Все опции одного переключателя должны иметь одно имя, так как переключатели с разными именами могут быть выбраны все одновременно и будут работать как флажки.
С помощью атрибута checked значением блока переключателей по умолчанию выбрана опция со словом «Лунка».