Опубликован: 19.05.2006 | Доступ: свободный | Студентов: 9893 / 1488 | Оценка: 4.29 / 4.03 | Длительность: 22:29:00
ISBN: 978-5-94774-648-8
Лекция 17:

Формы

Примеры форм, содержащих ЭУ в элементе INPUT

Следующий фрагмент HTML определяет простую форму, которая даёт пользователю возможность ввести имя, фамилию, email адрес и пол. При активации кнопки submit, форма посылается программе, указанной в атрибуте 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".

В этом примере, функция verify JavaScript включается при возникновении события "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>
 Ваше имя? <INPUT type="text" name="name_of_sender">
 Какие файлы Вы отправляете? <INPUT type="file" name="name_of_files">
 </P>
</FORM>

Элемент BUTTON

<!ELEMENT BUTTON - -
     (%flow;)* -(A|%formctrl;|FORM|FIELDSET)
     -- кнопка push -->
<!ATTLIST BUTTON
  %attrs;                              -- %coreattrs, %i18n, %events --
  name        CDATA          #ПРЕДПОЛАГАЕТСЯ
  value       CDATA          #ПРЕДПОЛАГАЕТСЯ  -- отсылается на сервер при отправке формы --
  type        (button|submit|reset) submit   -- используется как кнопка формы --
  disabled    (disabled)     #ПРЕДПОЛАГАЕТСЯ  -- недоступен в этом контексте --
  tabindex    NUMBER         #ПРЕДПОЛАГАЕТСЯ  -- позиция при табуляции --
  accesskey   %Character;    #ПРЕДПОЛАГАЕТСЯ  -- символ быстрого доступа --
  onfocus     %Script;       #ПРЕДПОЛАГАЕТСЯ  -- элемент получил фокус --
  onblur      %Script;       #ПРЕДПОЛАГАЕТСЯ  -- элемент потерял фокус --
  >
Начальный тег: необходим, Конечный тег: необходим

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

name = cdata [CI]

Определяет имя ЭУ.

value = cdata [CS]

Устанавливает начальное значение кнопки.

type = submit|button|reset [CI]

Объявляет тип кнопки. Возможные значения:

  • submit: создаёт кнопку submit. Это значение по умолчанию.
  • reset: создаёт кнопку reset.
  • button: создаёт кнопку push.

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

  • id, class (идентификаторы документа)
  • lang (язык), dir (направление текста)
  • title (название элемента)
  • style (инлайн-стиль)
  • disabled (недоступен)
  • accesskey ( символ быстрого доступа)
  • tabindex (позиция при табуляции)
  • onfocus, onblur, onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup (внутренние события)

Кнопки, созданные элементом BUTTON работают почти так же, как и кнопки, созданные элементом INPUT, но дают больше возможностей представления: элемент BUTTON может иметь содержимое. Например, элемент BUTTON, содержащий изображение, работает и может выглядеть как элемент INPUT, чей type установлен в "image", но элемент BUTTON может иметь содержимое.

Визуальные ПА могут представлять кнопку BUTTON с рельефом и смещением вверх/вниз при нажатии, в то время как они могут рассматривать кнопки INPUT только как "плоские" изображения.

Этот пример расширяет предыдущий, но создаёт кнопки submit и reset элементом BUTTON вместо INPUT. Кнопки содержат изображения так же, как элемент IMG.

<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>
   <BUTTON name="submit" value="submit" type="submit">
   Send<IMG src="/icons/wow.gif" alt="wow"></BUTTON>
   <BUTTON name="reset" type="reset">
   Reset<IMG src="/icons/oops.gif" alt="oops"></BUTTON>
   </P>
</FORM>

Напоминаем, что авторы должны указывать альтернативный текст для элемента IMG.

Недопустимо ассоциировать карту изображений с IMG, который является содержимым элемента BUTTON.

НЕВЕРНОЕ ИСПОЛЬЗОВАНИЕ:

Это неверный HTML.

<BUTTON>
<IMG src="foo.gif" usemap="...">
</BUTTON>
Ирина Кириллова
Ирина Кириллова

Нажимаю на ссылку на дополнительный материал и дополнение к информации-меня возвращает на первую страницу лекции. Подскажите, что делать? Или дополнительный материал платный?

Марина Дайнеко
Марина Дайнеко
Россия, Moscow, Nope, 2008
Анатолий Федоров
Анатолий Федоров
Россия, Москва, Московский государственный университет им. М. В. Ломоносова, 1989