Тег <input>
3.0+
1.0+
4.0+
1.0+
1.0+
1.0+
1.0+
Тег <input> является одним из разносторонних элементов формы и позволяет создавать разные элементы интерфейса и обеспечить взаимодействие с пользователем. Главным образом <input>
предназначен для создания текстовых полей, различных кнопок, переключателей и флажков. Хотя элемент <input>
не требуется помещать внутрь контейнера <form>, определяющего форму, но если введенные пользователем данные должны быть отправлены на сервер,где их обрабатывает серверная программа, то указывать <form>
обязательно. То же самое обстоит и в случае обработки данных с помощью клиентских приложений, например, скриптов на языке JavaScript.
Основной атрибут тега <input>
, определяющий вид элемента - type. Он позволяет задавать следующие элементы формы: текстовое поле (text), поле с паролем (password), переключатель (radio), флажок (checkbox), скрытое поле (hidden), кнопка (button), кнопка для отправки формы (submit), кнопка для очистки формы (reset), поле для отправки файла (file) и кнопка с изображением (image). Для каждого элемента существует свой список атрибутов, которые определяют его вид и характеристики. Кроме того, в HTML5 добавлено еще более десятка новых элементов.
Закрывающий тег не требуется.
<!-- HTML -->
<input атрибуты>
<!-- XHTML -->
<input атрибуты />
- accept
- Устанавливает фильтр на типы файлов, которые вы можете отправить через поле загрузки файлов.
- accesskey
- Переход к элементу с помощью комбинации клавиш.
- align
- Определяет выравнивание изображения.
- alt
- Альтернативный текст для кнопки с изображением.
- autocomplete
- Включает или отключает автозаполнение.
- autofocus
- Устанавливает фокус в поле формы.
- border
- Толщина рамки вокруг изображения.
- checked
- Предварительно активированный переключатель или флажок.
- disabled
- Блокирует доступ и изменение элемента.
- form
- Связывает поле с формой по её идентификатору.
- formaction
- Определяет адрес обработчика формы.
- formenctype
- Устанавливает способ кодирования данных формы при их отправке на сервер.
- formmethod
- Сообщает браузеру каким методом следует передавать данные формы на сервер.
- formnovalidate
- Отменяет встроенную проверку данных на корректность.
- formtarget
- Определяет окно или фрейм в которое будет загружаться результат, возвращаемый обработчиком формы.
- list
- Указывает на список вариантов, которые можно выбирать при вводе текста.
- max
- Верхнее значение для ввода числа или даты.
- maxlength
- Максимальное количество символов разрешенных в тексте.
- min
- Нижнее значение для ввода числа или даты.
- multiple
- Позволяет загрузить несколько файлов одновременно.
- name
- Имя поля, предназначено для того, чтобы обработчик формы мог его идентифицировать.
- pattern
- Устанавливает шаблон ввода.
- placeholder
- Выводит подсказывающий текст.
- readonly
- Устанавливает, что поле не может изменяться пользователем.
- required
- Обязательное для заполнения поле.
- size
- Ширина текстового поля.
- src
- Адрес графического файла для поля с изображением.
- step
- Шаг приращения для числовых полей.
- tabindex
- Определяет порядок перехода между элементами с помощью клавиши Tab.
- type
- Сообщает браузеру, к какому типу относится элемент формы.
- value
- Значение элемента.
Также для этого тега доступны универсальные атрибуты и события.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Тег Input</title>
<style>
div label {display:block;}
div {margin-bottom:20px;}
</style>
</head>
<body>
<form name="test" method="post" action="test.php">
<div>
<label>Ваше имя:</label>
<input type="text" size="50">
</div>
<div>
<label>Каким браузером в основном пользуетесь:</label>
<input type="radio" name="browser" value="ie"> Internet Explorer
<input type="radio" name="browser" value="opera"> Opera
<input type="radio" name="browser" value="firefox"> Firefox
<input type="radio" name="browser" value="safari"> Safari
</div>
<div>
<label>Комментарий</label>
<textarea name="comment" cols="50" rows="3" maxlength="800"></textarea>
</div>
<div>
<input type="submit" value="Отправить">
<input type="reset" value="Очистить">
</div>
</form>
</body>
</html>
Результат данного примера показан на рисунке ниже:
Категория: Строчные элементы, Формы