Отправляет email-рассылки с помощью сервиса Sendsay

Самоучитель по HTML и CSS

Рассылка закрыта

При закрытии подписчики были переданы в рассылку "Заметки Дизайнера" на которую и рекомендуем вам подписаться.

Вы можете найти рассылки сходной тематики в Каталоге рассылок.

←   Декабрь 2008   →
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
Автор
ImHoster.net

Статистика

8.556 подписчиков
-7 за неделю
←   Все выпуски   →

Самоучитель по HTML и CSS - 41


Номер: 41

Дата: 2008-12-16

Архив Рассылки

Самоучитель HTML

Самоучитель CSS

Справочник по CSS
Самоучитель по HTML и CSS

Добрый день.

Поскольку у нас выпуски о стилях перемежаются рассказом о формах, то сегодня пойдет речь о некоторых элементах форм.

Формы. Переключатели

Переключатели используют, когда необходимо выбрать один единственный вариант из нескольких предложенных. Создаются следующим образом.

<input type="radio" name="имя" параметры>

Параметры переключателей перечислены в табл. 8.1.
Табл. 8.1. Параметры переключателей
Параметр Описание
checked Предварительное выделение переключателя. По определению, набор переключателей может иметь только один выделенный пункт, поэтому добавление checked сразу к нескольким полям не даст особого результата. В любом случае, будет отмечен элемент, находящийся в коде HTML последним.
name Имя группы переключателей для идентификации поля. Поскольку переключатели являются групповыми элементами, то имя у всех элементов группы должно быть одинаковым.
value Задает, какое значение будет отправлено на сервер. Здесь уже каждый элемент должен иметь свое уникальное значение, чтобы можно было идентифицировать, какой пункт был выбран пользователем.

Создание группы переключателей показано в примере 8.1.

Пример 8.1. Создание переключателей

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>

 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
  <title>Переключатели</title>
 </head>

 <body>
  <form action="handler.php">
   <p><b>Какое у вас состояние разума?</b></p>
    <p><input name="dzen" type="radio" value="nedzen"> Не дзен<br>

    <input name="dzen" type="radio" value="dzen"> Дзен<br>
    <input name="dzen" type="radio" value="pdzen"> Полный дзен</p>

    <p><input type="submit" value="Выбрать"></p>
  </form> 
 </body>
</html>

В результате получим следующее (рис. 8.1).

Рис. 8.1

Рис. 8.1. Вид переключателей в браузере

Заметьте, что в данном примере параметр name для всех переключателей един, именно в таком случае браузер будет понимать, что переключатели связаны между собой и помечать только один пункт из предложенных. Значение параметра value же должно различаться, чтобы обработчик формы мог понять, какой вариант выбран пользователем.

Формы. Флажки

Флажки используют, когда необходимо выбрать любое количество вариантов из предложенного списка. Если требуется выбор лишь одного варианта, то для этого следует предпочесть переключатели (radiobutton). Флажок создается следующим образом.

<input type="checkbox" параметры>

Параметры флажков перечислены в табл. 9.1.
Табл. 9.1. Параметры флажков
Параметр Описание
checked Предварительное выделение флажка.
name Имя флажка для его идентификации обработчиком формы.
value Задает, какое значение будет отправлено на сервер.

Использование флажков показано в примере 9.1.

Пример 9.1. Создание флажков

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">

  <title>Флажки</title>
 </head>
 <body>
  <form action="handler.php">
   <p><b>С какими операционными системами вы знакомы?</b></p>

   <p><input type="checkbox" name="option1" value="a1" checked> Windows 95/98<br>
   <input type="checkbox" name="option2" value="a2"> Windows 2000<br>

   <input type="checkbox" name="option3" value="a3"> System X<br> 
   <input type="checkbox" name="option4" value="a4"> Linux<br> 
   <input type="checkbox" name="option5" value="a5"> X3-DOS</p>

   <p><input type="submit" value="Выбрать"></p>
  </form> 
 </body>
</html>

В результате получим следующее (рис. 9.1).

Рис. 9.1

Рис. 9.1. Вид флажков в браузере

Формы. Поле со списком

Поле со списком, называемое еще ниспадающее меню, один из гибких и удобных элементов формы. В зависимости от настроек, в списке можно выбирать одно или несколько значений. Преимущество списка в его компактности, он может занимать всего одну строку, а чтобы просмотреть весь список нужно на него нажать. Однако это является и недостатком, ведь пользователю сразу не виден весь выбор.

Поле со списком создается следующим образом. 

<select параметры>
 <option параметры>Пункт 1</option>
 <option>Пункт 2</option>
 <option>Пункт 3</option>

</select>

Тег <SELECT> позволяет создать элемент интерфейса в виде раскрывающегося списка, а также список с одним или множественным выбором. Конечный вид зависит от использования параметра size тега <SELECT>, который устанавливает высоту списка. Ширина списка определяется самым широким текстом, указанным в теге <OPTION>, а также может изменяться с помощью стилей. Каждый пункт создается с помощью тега <OPTION>, который должен быть вложен в контейнер <SELECT>.

Список множественного выбора Раскрывающийся список

Параметры тега <SELECT>

Рассмотрим параметры тега <SELECT>, с помощью которых можно изменять вид и представление списка.

MULTIPLE

Наличие параметра multiple сообщает браузеру отображать содержимое элемента <SELECT> как список множественного выбора. Конечный вид списка зависит от используемого параметра size. Если он отсутствует, то высота списка равна количеству пунктов, если значение size меньше числа пунктов, то появляется вертикальная полоса прокрутки. Когда size=1 список превращается в «крутилку», как показано ниже, но выбирать с помощью нее одновременно несколько пунктов списка становится неудобно.

Параметр size отсутствует Параметр size равен 1

Для выбора нескольких значений списка применяются клавиши <Ctrl> и <Shift> совместно с курсором мыши.

В примере 10.1 показано создание списка множественного выбора.

Пример 10.1. Список множественного выбора

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">

  <title>Список</title>
 </head>
 <body>
  <form action="handler.php">
    <p><select name="select" size="3" multiple>

      <option selected value="s1">Чебурашка</option>
      <option value="s2">Крокодил Гена</option>
      <option value="s3">Шапокляк</option>

      <option value="s4">Крыса Лариса</option>
    </select>
    <input type="submit" value="Отправить"></p> 
  </form>

 </body>
</html>

NAME

Определяет уникальное имя элемента <SELECT>. Как правило, это имя используется для доступа к данным через скрипты или для получения выбранного значения серверным обработчиком.

SIZE

Устанавливает высоту списка. Если значение параметра size равно единице, то список превращается в раскрывающийся. При добавлении параметра multiple к тегу <SELECT> при size=1 список отображается как «крутилка». Во всех остальных случаях получается список с одним или множественным выбором. Значение по умолчанию зависит от параметра multiple. Если он присутствует, то размер списка равен количеству элементов. Когда параметра multiple нет, то значение параметра size равно 1.

Параметры тега <OPTION>

Тег <OPTION> также имеет параметры, влияющие на вид списка, они представлены далее.

SELECTED

Делает текущий пункт списка выделенным. Если у тега <SELECT> добавлен параметр multiple, то можно выделять более одного пункта.

VALUE

Определяет значение пункта списка, которое будет отправлено на сервер. На сервер отправляется пара «имя/значение», где имя задается параметром name тега <SELECT>, а значение — параметром value выделенных пунктов списка. Значение может, как совпадать с текстом пункта, так быть и самостоятельным.

Создание списка показано в примере 10.2.

Пример 10.2. Использование списка

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>

  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
  <title>Список</title>
 </head>
 <body>

  <form action="handler.php">
   <p><b>Выбери персонажа</b></p>
   <p><select name="hero">
    <option value="s1">Чебурашка</option>

    <option value="s2" selected>Крокодил Гена</option>
    <option value="s3">Шапокляк</option>
    <option value="s3">Крыса Лариса</option>

   </select> 
   <input type="submit" value="Отправить"></p>
  </form>
 </body>
</html>

В примере создается список из четырех пунктов с именем hero, причем второй пункт из них предварительно выделен через параметр selected тега <OPTION>. Результат примера показан ниже.

Выбери персонажа

Группирование элементов списка

При достаточно обширном списке имеет смысл сгруппировать его элементы по блокам, чтобы обеспечить наглядность списка и удобство работы с ним. Для этой цели применяется тег <OPTGROUP>. Он представляет собой контейнер, внутри которого располагаются теги <OPTION> объединенные в одну группу. Особенностью тега <OPTGROUP> является то, что он не выделяется как обычный элемент списка, акцентируется с помощью жирного начертания, а все элементы, входящие в этот контейнер, смещаются вправо от своего исходного положения. Для добавления заголовка группы используется параметр label, как показано в примере 10.3.

Пример 10.3. Группирование элементов списка 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">

  <title>Список</title>
 </head>
 <body>
  <form action="handler.php">
   <p><select>

    <optgroup label="Русская кухня">
     <option value="r1">Закуска Барская</option>
     <option value="r2">Раки, фаршированные по-царски</option>
     <option value="r3">Биточки в горшочке</option>

    </optgroup>
    <optgroup label="Украинская кухня">
     <option value="u1">Галушки славянские</option>
     <option value="u2">Пампушки украинские</option>

     <option value="u3">Жаркое по-харьковски</option>
    </optgroup>
   </select></p>
   <p><input type="submit" value="Отправить"></p>

  </form>
 </body>
</html>

Результат данного примера показан ниже.

Формы. Скрытое поле

Скрытое поле не показывается на странице и прячет свое содержимое от пользователя. Посетитель не может ничего в него внести или напечатать. Цель создания скрытых полей — в передаче технической информации на сервер. В большинстве случаев это необходимо для передачи данных формы от страницы к странице.

Синтаксис создания скрытого поля.

<input type="hidden" параметры>

Параметры перечислены в табл. 11.1.
Табл. 11.1. Параметры скрытого поля
Параметр Описание
name Имя поля для его идентификации обработчиком формы.
value Значение поля, определяющее, какая информация будет отправлена на сервер.

Пример использования скрытых полей приведен в примере 11.1.

Пример 11.1. Использование скрытого поля 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>

  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
  <title>Скрытое поле</title>
 </head>
 <body>

  <form action="handler.php" method="post">
   <p><b>Напишите любимое слово (никакие данные не будут передаваться на сервер!):</b></p>
   <p><input type="text" size="25" name="word">

   <input type="hidden" name="UserName" value="Vasya">
   <input type="hidden" name="password" value="pupkin"></p>

   <p><input type="submit" value="Отправить"></p>
  </form> 
 </body>
</html>

В данном примере показано создание двух скрытых полей, одно из них носит имя UserName и получает значение Vasya, а второе именуется password со значением pupkin. В результате отправки формы обработчику, указанному в параметре action, программа может легко прочитать эти данные и интерпретировать их по усмотрению разработчика.

Copyright 2007—2008 Влад Мержевич. По всем вопросам пишите по адресу vlad@htmlbook.ru
В избранное