Тэг INPUT
Начальный тег: обязателен, Конечный тег: запрещен
Определения атрибутов
- type = text|password|checkbox|radio|submit|reset|file|hidden|image|button [CI]
- Определяет тип управляющего элемента. По умолчанию используется значение «text».
- name = cdata [CI]
- Определяет имя управляющего элемента.
- value = cdata [CA]
- Определяет начальное значение управляющего элемента. Этот атрибут не обязателен, если только для атрибута type не установлено значение «radio».
- size = cdata [CN]
- Сообщает агенту пользователя начальную ширину управляющего элемента. Ширина дается в пикселах, если для атрибута type не установлено значение «text» или «password». В этом случае ширина задается в числе символов (число должно быть целым).
- maxlength = число [CN]
- Если для атрибута type установлено значение «text» или «password», этот атрибут определяет максимальное число символов, вводимых пользователем. Это число может превышать указанный в атрибуте size размер поля; в этом случае агент пользователя должен обеспечивать механизм прокрутки. По умолчанию число символов не ограничено.
- checked [CI]
- Если для атрибута type установлено значение «radio» или «checkbox», этот логический атрибут указывает, что флажок установлен. Агенты пользователей должны игнорировать этот атрибут для других типов управляющих элементов.
- src = uri [CT]
- Если атрибут type имеет значение «image», этот атрибут определяет местоположение изображения, используемое для представления графической кнопки.
Атрибуты, определяемые в другом месте
- id, class (идентификаторы в пределах документа)
- lang (информация о языке), dir (направление текста)
- title (заголовок элемента)
- style (встроенная информация о стиле)
- alt (альтернативный текст)
- align (выравнивание)
- accept (допустимые типы содержимого для сервера)
- readonly (управляющие элеметы ввода только для чтения)
- disabled (отключенные управляющие элементы ввода)
- tabindex (переход по нажатию клавиши tab)
- accesskey (клавиши доступа)
- usemap (клиентские изображения-карты)
- onfocus, onblur, onselect, onchange, onclick, ondblclick,
onmousedown, onmouseup, onmouseover, onmousemove,
onmouseout,onkeypress, onkeydown, onkeyup (внутренние события)
Типы управляющих элементов, создаваемые с помощью элемента INPUT
Тип управляющего элемента, определяемый элементом INPUT, зависит от значения атрибута type:
- text
- Создает элемент для ввода текста из одной строки.
- password
- Аналогичен значению «text», но вводимый текст представляется таким образом, чтобы не отображать символы (например, в виде ряда звездочек). Этот управляющий элемент часто используется для ввода паролей. Обратите внимание, что текущим значениемявляется текст, введенный пользователем, а не текст, представляемый агентом пользователя.
Примечание. Разработчикам приложений следует обратить внимание на то, что этот механизм обеспечивает только слабую защиту. Хотя пароль маскируется агентом пользователя от случайных наблюдателей, он передается на сервер в виде открытого текста, и его может прочесть любой пользователь, имеющий доступ к сети на низком уровне.
- checkbox
- Создает флажок.
- radio
- Создает кнопку с зависимой фиксацией.
- submit
- Создает кнопку отправки.
- image
- Создает графическую кнопку отправки. Значение атрибута src задает URI изображения, используемого для представления кнопки. Из соображений доступности авторам следует предусматривать альтернативный текст для изображения с помощью атрибута alt.Если для щелчка на изображении используется указующее устройство, на сервер передаются форма и координаты щелчка. Значение x измеряется в пикселах от левой границы изображения, а значение y — в пикселах от верхней границы изображения. В передаваемые данные включаются последовательности имя.x=значение-x и name.y=значение-y, где «имя» - значение атрибутаname, а значение-x и значение-y - значения координат x и y соответственно.Если сервер предпринимает различные действия в зависимости от места щелчка, пользователи неграфических браузеров не смогут воспользоваться этим свойством. По этой причине авторам следует предусматривать альтернативные подходы:
- Использовать несколько кнопок отправки (каждая с отдельным изображением) вместо одной графической кнопки. Можно использовать для управления местоположением этих кнопок таблицы стилей.
- Использовать клиентские изображения-карты и скрипты.
- reset
- Создает кнопку сброса.
- button
- Создает другую кнопку. Агенты пользователей должны использовать в качестве метки на кнопке значение атрибута value.
- hidden
- Создает невидимый управляющий элемент.
- file
- Создает управляющий элемент выбор файла. Агенты пользователей могут использовать значение атрибута value в качестве исходного имени файла.
Примеры форм с управляющими элементами типа INPUT
В следующем фрагменте кода HTML определяется простая форма, позволяющая пользователям вводить имя, фамилию, адрес электронной почты и пол. В случае активизации кнопки отправки форма передается программе, указанной в атрибуте action.
<FORM action="http://somesite.com/prog/adduser" method="post"> <P> Имя: <INPUT type="text" name="firstname"><BR> Фамилия: <INPUT type="text" name="lastname"><BR> email: <INPUT type="text" name="email"><BR> <INPUT type="radio" name="sex" value="Male"> Мужской<BR> <INPUT type="radio" name="sex" value="Female"> Женский<BR> <INPUT type="submit" value="Отправить"> <INPUT type="reset"> </P> </FORM>
Эта форма может представляться следующим образом:
В разделе об элементе LABEL мы обсудим разметку меток типа «First name».
В следующем примере в случае события «onclick» включается функция JavaScript с именем verify:
<HEAD> <META http-equiv="Content-Script-Type" content="text/javascript"> </HEAD> <BODY> <FORM action="..." method="post"> <P> <INPUT type="button" value="Нажми тут" onclick="verify()"> </FORM> </BODY>
Подробнее о скриптах и событиях Вы можете узнать в разделе о внутренних событиях.
В следующем примере показано, как содержимое указанного пользователем файла -может передаваться вместе с формой. У пользователя запрашивается имя и список имен файлов, содержимое которых должно передаваться с формой. С помощью указания значение enctype для «multipart/form-data» содержимое всех файлов будет упаковываться для передачи в отдельные разделы существующего документа.
<FORM action="http://server.dom/cgi/handle" enctype="multipart/form-data" method="post"> <P> Как Вас зовут? <INPUT type="text" name="name_of_sender"> Какие файлы Вы отправляете? <INPUT type="file" name="name_of_files"> </P> </FORM>