ИНФОРМАЦИЯ,    ДИЗАЙН,    ПЕРЕВОДЫ,    РЕКЛАМА   .   .   .
w a p - с а й т
Информационный портал
Сегодня:  
admin@aranea.ru
+79068922256

  aranea.ru || Спецификация HTML 4.01 | 17. Формы

17. Формы

17.4. Элемент INPUT

17.4.1. Типы управления, созданные с помощью INPUT
17.4.2. Примеры форм, содержащих управление с помощью INPUT
<!ENTITY % InputType
  "(TEXT | PASSWORD | CHECKBOX |
    RADIO | SUBMIT | RESET |
    FILE | HIDDEN | IMAGE | BUTTON)"
   >

<!-- attribute name required for all but submit and reset -->
<!ELEMENT INPUT - O EMPTY              -- form control -->
<!ATTLIST INPUT
  %attrs;                              -- %coreattrs, %i18n, %events --
  type        %InputType;    TEXT      -- what kind of widget is needed --
  name        CDATA          #IMPLIED  -- submit as part of form --
  value       CDATA          #IMPLIED  -- Specify for radio buttons and checkboxes --
  checked     (checked)      #IMPLIED  -- for radio buttons and check boxes --
  disabled    (disabled)     #IMPLIED  -- unavailable in this context --
  readonly    (readonly)     #IMPLIED  -- for text and passwd --
  size        CDATA          #IMPLIED  -- specific to each type of field --
  maxlength   NUMBER         #IMPLIED  -- max chars for text fields --
  src         %URI;          #IMPLIED  -- for fields with images --
  alt         CDATA          #IMPLIED  -- short description --
  usemap      %URI;          #IMPLIED  -- use client-side image map --
  ismap       (ismap)        #IMPLIED  -- use server-side image map --
  tabindex    NUMBER         #IMPLIED  -- position in tabbing order --
  accesskey   %Character;    #IMPLIED  -- accessibility key character --
  onfocus     %Script;       #IMPLIED  -- the element got the focus --
  onblur      %Script;       #IMPLIED  -- the element lost the focus --
  onselect    %Script;       #IMPLIED  -- some text was selected --
  onchange    %Script;       #IMPLIED  -- the element value was changed --
  accept      %ContentTypes; #IMPLIED  -- list of MIME types for file upload --
  >

Начальный тег: обязательный, конечный тег: запрещенный

Определение атрибутов

type = text|password|checkbox|radio|submit|reset|file|hidden|image|button [CI]
Этот атрибут определяет тип управления. Значение по умолчанию - "text".
name = cdata [CI]
Этот атрибут присваивает имя управлению.
value = cdata [CA]
Этот атрибут определяет начальное значение управления. Он – факультативный, за исключением момента, когда атрибут type является "radio" или "checkbox".
size = cdata [CN]
Этот атрибут сообщает устройству вывода начальную ширину элемента управления. Ширина дается в пикселях за исключением, когда атрибут type имеет значение "text" или "password". В этом случае это значение обращается к количеству (целые числа) символов.
maxlength = number [CN]
Когда атрибут type имеет значение "text" или "password", то этот атрибут определяет максимальное количество символов, которые пользователь может ввести. Это количество может превышать определенный размер - size, в случае которого устройству вывода следует предлагать механизм прокрутки. По умолчанию значение для этого атрибута является неограниченным числом.
checked [CI]
Когда атрибут type имеет значение "radio" или "checkbox", то этот булевый атрибут определяет, какая кнопка включена. Устройства вывода должны игнорировать этот атрибут для других типов управления.
src = uri [CT]
Когда атрибут type имеет значение "image", то этот атрибут определяет место расположения изображения, которое будет использоваться для декорации графической кнопки представления (submit button).

Атрибуты, определенные в другом месте

  • id, class
  • lang, dir
  • title
  • style
  • alt
  • align
  • accept
  • readonly
  • disabled
  • tabindex
  • accesskey
  • usemap
  • ismap
  • onfocus, onblur, onselect, onchange, onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup

17.4.1 Типы управления, созданные с помощью INPUT

Тип управления, определенный элементом INPUT, зависит от значения атрибута type:

text
Создает управление ввода текста в одну строку.
password
Подобно "text", но вводимый текст визуализируется таким образом, чтобы скрыть символы (например, серией звездочек). Этот тип управления часто используется для чувствительного ввода, такого как пароли. Обратите внимание, что текущим значением является текст, введенный пользователем, а не текст, показываемый устройством вывода.
Обратите внимание. Дизайнерам приложений следует обратить внимание на то, что этот механизм предоставляет слабую защиту. Хотя пароль маскируется устройствами вывода от случайных свидетелей, но он передается серверу простым текстом, и может быть прочитан любым, имеющим доступ к сети на низком уровне.
checkbox
Создает флажок.
radio
Создает селективную кнопку.
submit
Создает кнопку представления.
image
Создает графическую кнопку представления. Значение атрибута src определяет URI изображения, которое будет декорировать кнопку. С точки зрения доступности, авторам следует предоставлять альтернативный текст для изображения через атрибут alt.
Когда координатно-указательное устройство используется для щелчка по изображению, то форма передается с координатами щелчка серверу. Значение x измеряется в пикселях от левой стороны изображения, а значение y в пикселях от верха изображения. Предоставляемые данные включают name.x=x-value и name.y=y-value, где "name" – это значение атрибута name, а x-value и y-value являются значениями координат x и y, соответственно.
Если сервер получает различные действия, зависящие от места локализации щелчка, то пользователь неграфических браузеров получит проблему. По этой причине, авторам следует рассматривать альтернативные подходы:
  • Использовать множество предоставляющих кнопок (каждая со своим собственным изображением) на месте одной графической кнопки предоставления. Авторы могут использовать стилевые таблицы для управления позиционированием этих кнопок.
  • Использовать клиентские карты изображения вместе со сценариями.
reset
Создает кнопку сброса.
button
Создает нажимную кнопку. Устройствам вывода следует использовать значение атрибута value как название кнопки.
hidden
Создает скрытое управление.
file
Создает управление выбора файла. Устройства вывода могут использовать значение атрибута value как начальное название файла.

17.4.2 Примеры форм, содержащих управление с помощью INPUT

Следующие примеры фрагментов HTML определяют простую форму, которая позволяет пользователю ввести имя, фамилию, адрес электронной почты и пол. Когда кнопка представления активизируется, форма будет послана программе, определенной в атрибуте action.

 <FORM action="http://somesite.com/prog/adduser" method="post">
    <P>
    First name: <INPUT type="text" name="firstname"><BR>
    Last name: <INPUT type="text" name="lastname"><BR>
    email: <INPUT type="text" name="email"><BR>
    <INPUT type="radio" name="sex" value="Male"> Male<BR>
    <INPUT type="radio" name="sex" value="Female"> Female<BR>
    <INPUT type="submit" value="Send"> <INPUT type="reset">
    </P>
 </FORM>

Эта форма может визуализироваться следующим образом:

В разделе об элементе LABEL, мы обсуждаем разметку меток, таких как "First name".

В следующем примере, включается функция JavaScript под именем verify, когда происходит событие "onclick":

<HEAD>
<META http-equiv="Content-Script-Type" content="text/javascript">
</HEAD>
<BODY>
 <FORM action="..." method="post">
    <P>
    <INPUT type="button" value="Click Me" onclick="verify()">
 </FORM>
</BODY>

Обратитесь к разделу о внутренних событиях для получения дополнительной информации о сценариях и событиях.

Следующий пример показывает, как содержание файла, определенного пользователем, может представляться вместе с формой. У пользователя запрашивается его/ее имя и список имен файлов, содержание которых следует предоставить вместе с формой. Определяя значение enctype как "multipart/form-data", содержание каждого файла будет укладываться в пакет для передачи в отдельном разделе документа из нескольких частей.

<FORM action="http://server.dom/cgi/handle"
    enctype="multipart/form-data"
    method="post">
 <P>
 What is your name? <INPUT type="text" name="name_of_sender">
 What files are you sending? <INPUT type="file" name="name_of_files">
 </P>
</FORM>

← Назад | Вперед →
Copyright © 2006 -  aranea.ru