Тег input — различные элементы ввода

Элементы форм

Тэг 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>