Главная/ Cправочник HTML, CSS, Javascript/ HTML справочник : HTML теги, HTML атрибуты, мета теги, спецсимволы/ Tags/ HTML тег input | назначение, синтаксис, атрибуты, примеры

Тег input

Последнее обновление: 22.01.2011

Тег <input> (с англ. ввод данных) позволяет создавать элементы интерфейса: кнопки, текстовые поля, переключатели и флажки.
Основной метод получения информации от пользователя (читателя) базируется на этом теге. В зависимости от атрибута type, отображается в виде различных элементов управления.
Строчный элемент.

HTML: 3.2 | 4 / XHTML: 1.0 | 1.1

Синтаксис


<form action="...">
<input type="..."/>
</form>

Атрибуты



accept список типов содержимого, через запятую, которые сервер-обработчик формы будет корректно обрабатывать
acceskey указываем горячую клавишу
align задает выравнивание поля в форме

  • bottom — нижняя граница поля выравнивается по окружающему тексту (по умолчанию)
  • left — по левому краю окна. Текст обтекает справа
  • middle — центр картинки по базовой линии текущей строки
  • right — по правому краю окна. Текст обтекает слева
  • top — верх поля выравнивается по самому высокому элементу строки
alt альтернативный текст для кнопки с изображением
border толщина рамки.
Отсутствует в спецификации HTML 4.01!
checked флаг. Определяет переключатель как установленный <input type=»checkbox» checked/>
class определяет имя используемого класса
dir определяет направление символов:

  • ltr — слева направо
  • rtl — справа налево
disabled флаг. Делает элемент неактивным
hspace отступ по горизонтали (по умолчанию 0)
Отсутствует в спецификации HTML 4.01!
id уникальный идентификатор
ismap флаг, определяющий, что картинка является картой-изображением
lang определяет язык отображаемого документа
maxlength задает максимальное количество символов, которое может ввести пользователь в текстовое поле
name уникальное имя элемента
onblur потеря фокуса элементом
onclick щелчок на элементе
ondblclick двойной щелчок на элементе
onchange потеря фокуса элементом при условии, что его содержимое изменилось
onfocus получение фокуса элементом
onkeydown нажатие клавиши, когда элемент имеет фокус
onkeypress нажатие и освобождении клавиши, когда элемент имеет фокус
onkeyup освобождение ранее нажатой клавиши, когда элемент имеет фокус
onmousedown нажатие кнопки мыши, когда элемент имеет фокус
onmousemove движение указателя мыши, когда элемент имеет фокус
onmouseout смещение указателя мыши с элемента
onmouseover помещение указателя мыши на элемент
onmouseup освобождение ранее нажатой кнопки мыши, когда элемент имеет фокус
onselect выделение какого-либо текста в текстовом поле
readonly флаг. Запрещает изменение данных поля пользователем
size ширина текстового поля в символах
src URL файла с изображением
style задает встроенную таблицу стилей
tabindex порядок обхода элементов с помощью Tab
title всплывающая подсказка
type тип элемента управления

  • button — кнопка
  • checkbox — флаг
  • file — поле для ввода имени файла
  • hidden — скрытое поле. На странице не отображается
  • image — кнопка с изображением
  • password — текстовое поле в котором символы показываются звездочками
  • radio — переключатели. Выбор одного варианта из нескольких
  • range — слайдер (отсутствует в спецификации HTML 4.01, поддерживает Opera, Safari и Chrome)
  • reset — кнопка возврата данных формы к значениям по умолчанию
  • search — поле поиска (отсутствует в спецификации HTML 4.01, поддерживает Safari и Chrome)
  • submit — кнопка для отправки данных на сервер
  • text — текстовое поле
usemap применяет к изображению карту <MAP>
value значение элемента
vspace отступ по вертикали (по умолчанию 0)
Отсутствует в спецификации HTML 4.01!

Пример

Флаг


<input type="checkbox" checked="checked"/> флаг

Переключатель


<input type="radio"/> переключатель

Поле для отправки файла


<input type="file" value="имя файла"/>

Обычное текстовое поле


<input type="text" value="Логин"/>

Поле для ввода пароля


<input type="password" value="пароль"/>

Кнопка


<input type="button" value="Обычная кнопка"/>

Неактивная кнопка


<input type="button" value="Неактивная кнопка" disabled="disabled"/>

Рекомендации по использованию

  • должен быть закрыт слешем (<input…/>)
  • обязательных атрибутов нет
  • по умолчанию тег <input> имеет тип type=»text»
  • в таблицах стилей явно указывайте цвет фона полей, т.к. по умолчанию в браузере цвет фона полей может отличаться от белого
  • в больших формах используйте атрибут tabindex для последовательного tab-обхода полей
  • хорошим тоном является указание атрибута maxlength, чтобы пользователь не мог ввести заведомо больше символов, чем отведено в базе данных для этого поля (согласовывается с или задается программистами)
  • некотрые браузеры подсвечивают поля в фокусе (Chrome, Safari)
Твой код:

Результат: