Характеристики тега
В каких браузерах работает?
| 3.0+ | 1.0+ | 4.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ |
В каких спецификациях используется?
| HTML | 3.2 | 4.01 | 5.0 |
| XHTML | 1.0 | 1.1 |
Для чего используется?
Тег <input> - это самый основной элемент для создания любой формы. Используя разные атрибуты, этот тег может быть и полем для заполнения, и кнопкой, и даже чекбоксом. Расположение данного тега внутри form не является необходимым условием, однако при использовании файла-обработчика без этого тега не обойтись. В тоже время наличие тега form обязательно при работе с JavaScript или приложением для обработки данных формы.
Ключевым атрибутом для <input> является type, который определяет разновидность и функционал данного объекта. При чем каждый из типов имеет свой набор атрибутов для настройки особенностей работы элемента. Стоит также отметить, что на текущий момент продолжают придумывать новые разновидности значений для атрибута type. Данный факт значительно повышает универсальность тега.
Как правильно задавать?
<input атрибуты>
Какие атрибуты поддерживаются?
- accept - определяет перечень файлов, которые можно будет заливать на сервер через загрузчик.
- accesskey - задает комбинацию клавиш, которая активизирует указанный элемент.
- align - выравнивает объект в горизонтальном пространстве.
- alt - текст для вывода при ошибке загрузки объекта.
- autocomplete - отвечает за поддержку автозаполнения полей.
- autofocus - определяет автоматически после загрузки документа фокус для указанного объекта.
- border - устанавливает обводку для кнопки (поля) и ее толщину.
- checked - переключатель или чекбокс, который изначально уже отмечен.
- disabled - запрещает взаимодействие с указанным объектом.
- form - устанавливает связь объекта с формой.
- formaction - показывает расположение файла для обработки информации из формы.
- formenctype - определяет кодировку файла для отправки на сервер.
- formmethod - устанавливает метод передачи фактов.
- formnovalidate - проверка правильности заполнения полей формы отключается.
- formtarget - указывает имя окна, в котором покажется ответ после обработки данных на сервере.
- list - предоставляет варианты ввода, которые показываются при заполнении текстового поля.
- max - верхний предел для указания даты или числового значения.
- maxlength - указывает ограничения на заполнения поля в символах.
- min - нижний предел для указания даты или числового значения.
- multiple - разрешает загружать 2 и более файла одновременно.
- name - имя для идентификации объекта.
- pattern - предлагаемый шаблон для заполнения.
- placeholder - подсказка, которая показывается до активации поля.
- readonly - запрещает пользователю работать с содержимым поля.
- required - показывает, что поле обязательно заполняется.
- size - устанавливает размер поля.
- src - позволяет использовать изображение для данного поля.
- step - устанавливает интервал прироста чисел.
- tabindex - формирует список, согласно которому фокус будет передаваться между полями при нажатии на Tab.
- type - устанавливает разновидность
<input>. - value - сообщает файлу-обработчику значение для данного объекта.
Данный тег поддерживает универсальные атрибуты и события.
Закрытый тег
Нет.
Пример использования
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>Тег input</title> </head> <body> <form name="test" method="post" action="input1.php"> <p><b>Укажите имя:</b><br> <input type="text" size="40"> </p> <p><b>Какой браузер препочитаете:</b><Br> <input type="radio" name="brows" value="chrome">Chrome<Br> <input type="radio" name="brows" value="firefox">Firefox<Br> <input type="radio" name="brows" value="yandex">Yandex<Br> </p> </body> </html>
По итогу получаем
