НОУ ИНТУИТ | Спецификация языка HTML. Лекция 17: Формы

Учитесь и получайте официальные документы БЕСПЛАТНО. Вы можете поддержать наш проект.

Регистрация Вход

Твой путь к знаниям!

Опубликован: 19.05.2006 | Доступ: свободный | Студентов: 10204 / 1645 | Оценка: 4.29 / 4.03 | Длительность: 22:29:00

ISBN: 978-5-94774-648-8

Темы: Интернет-технологии, Программирование

Специальности: Разработчик интернет-проектов

|

Вам нравится? Нравится 60 студентам

| Поделиться |

Поддержать курс

| Скачать электронную книгу

Примеры форм, содержащих ЭУ в элементе 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>

Дальше >>

Авторизоваться

Спецификация языка HTML

Формы

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

Элемент BUTTON

Вопросы и ответы