Тег input
Последнее обновление: 27.02.2009
Тег <input> (с англ. ввод данных) позволяет создавать элементы интерфейса: кнопки, текстовые поля, переключатели и флажки.
Основной метод получения информации от пользователя (читателя) базируется на этом теге. В зависимости от атрибута type, отображается в виде различных элементов управления.
Строчный элемент.
HTML: 3.2 | 4 / XHTML: 1.0 | 1.1
Синтаксис
<form action="...">
<input type="..."/>
</form>
Атрибуты
accept | список типов содержимого, через запятую, которые сервер-обработчик формы будет корректно обрабатывать |
---|---|
acceskey | указываем горячую клавишу |
align | задает выравнивание поля в форме
|
alt | альтернативный текст для кнопки с изображением |
border | толщина рамки. Отсутствует в спецификации HTML 4.01! |
checked | флаг. Определяет переключатель как установленный <input type=»checkbox» checked/> |
class | определяет имя используемого класса |
dir | определяет направление символов:
|
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 | тип элемента управления
|
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)
Твой код:
Результат:
большой полигон
Теги: верстка форм, HTML теги