Тег <input>
Тег <input> является одним из разносторонних элементов формы и позволяет создавать разные элементы интерфейса и обеспечить взаимодействие с пользователем. Главным образом<input> предназначен для создания текстовых полей, различных кнопок, переключателей и флажков. Хотя элемент <input> не требуется помещать внутрь контейнера <form>, определяющего форму, но если введенные пользователем данные должны быть отправлены на сервер, где их обрабатывает серверная программа, то указывать <form> обязательно. То же самое обстоит и в случае обработки данных с помощью клиентских приложений, например, скриптов на языке JavaScript.
Основной атрибут тега <input>, определяющий вид элемента — type. Он позволяет задавать следующие элементы формы: текстовое поле (text), поле с паролем (password), переключатель (radio), флажок (checkbox), скрытое поле (hidden), кнопка (button), кнопка для отправки формы (submit), кнопка для очистки формы (reset), поле для отправки файла (file) и кнопка с изображением (image). Для каждого элемента существует свой список атрибутов, которые определяют его вид и характеристики. Кроме того, в HTML5 добавлено еще более десятка новых элементов.
IExplorer | Chrome | Opera | Safari | Firefox | Android | iOS |
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 |
HTML
<input атрибуты>
XHTML
<input атрибуты />
accesskey - Атрибут accesskey позволяет перейти к элементу с помощью некоторого сочетания клавиш с заданной в атрибуте буквой или цифрой.
align - Определяет, как выравнивать поле с изображением относительно текста или других элементов формы.
alt - Атрибут alt устанавливает альтернативный текст для поля с изображением.
autocomplete - Этот атрибут помогает заполнять поля форм текстом, который был введён в них ранее.
autofocus - Автоматически устанавливает фокус в поле формы.
border - Браузеры обрабатывают изображения, добавленные через тег <input>, подобно рисункам, созданным с помощью тега <img>.
checked - Этот атрибут определяет, помечен ли заранее такой элемент формы, как флажок или переключатель.
disabled - Блокирует доступ и изменение поля формы.
form - Связывает поле с формой по её идентификатору.
formaction - Определяет адрес обработчика формы — это программа, которая получает данные формы и производит с ними желаемые действия.
formenctype - Устанавливает способ кодирования данных формы при их отправке на сервер.
formmethod - Атрибут сообщает браузеру, каким методом следует передавать данные формы на сервер.
formnovalidate - Отменяет встроенную проверку данных введенных пользователем в форме на корректность перед отправкой формы.
formtarget - Определяет окно или фрейм в которое будет загружаться результат, возвращаемый обработчиком формы, в виде HTML-документа.
list - Указывает на список вариантов, созданный с помощью тега <datalist>, которые можно выбирать при наборе текста.
max - Устанавливает верхнее значение для ввода числа или даты в поле формы.
maxlength - Устанавливает максимальное число символов, которое может быть введено пользователем в текстовом поле.
min - Устанавливает нижнее значение для ввода числа или даты в поле формы.
multiple - Атрибут multiple позволяет указывать одновременно несколько файлов в поле для загрузки файлов, а также несколько адресов электронной почты.
name - Определяет уникальное имя элемента формы.
pattern - Указывает регулярное выражение, согласно которому требуется вводить и проверять данные в поле формы.
placeholder - Выводит текст внутри поля формы, который исчезает при получении фокуса.
readonly - Когда к тегу <input> добавляется атрибут readonly, текстовое поле не может изменяться пользователем, в том числе вводиться новый текст или модифицироваться существующий.
required - Устанавливает поле формы обязательным для заполнения перед отправкой формы на сервер.
size - Ширина текстового поля, которое определяется числом символов моноширинного шрифта.
src - Адрес графического файла, который будет отображаться на веб-странице в поле с изображением.
step - Устанавливает шаг изменения числа для ползунков и полей ввода чисел.
tabindex - Атрибут tabindex определяет последовательность перехода между элементами при нажатии на клавишу Tab.
type - Сообщает браузеру, к какому типу относится элемент формы.
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="browser" value="ie"> Internet Explorer<Br>
<input type="radio" name="browser" value="opera"> Opera<Br>
<input type="radio" name="browser" value="firefox"> Firefox<Br>
</p>
<p>Комментарий<Br>
<textarea name="comment" cols="40" rows="3"></textarea></p>
<p><input type="submit" value="Отправить">
<input type="reset" value="Очистить"></p>
</form>
</body>
</html>