Чтение онлайн

ЖАНРЫ

HTML, XHTML и CSS на 100%

Квинт Игорь

Шрифт:

Для создания скрытого поля указывается значение атрибута type="hidden". Для него нужны только атрибуты name и value – имя и значение переменной, передаваемые обработчику.

В листинге 6.14 представлен пример создания скрытого поля, в котором вы можете передавать идентификатор пользователя.

Листинг 6.14. Скрытые поля

<html>

<head>

<title>Конструирование форм</title>

</head>

<body>

<form action="test.php" enctype="multipart/form-data" method="post" name= "test" target="_blank">

<input name="id_user" type="hidden" value="27" />

</form>

</body>

</html>

Мы

разобрались со всеми возможностями элемента INPUT. Дальше рассмотрим поля, которые входят в форму, но создаются с помощью других элементов.

Списки

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

Для создания списков используется элемент SELECT, у которого два атрибута, отвечающих за общее отображение списка. Атрибут size устанавливает количество видимых элементов из списка. Если size="1" и при этом количество элементов списка больше одного, то появится раскрывающийся список выбора. Если size больше единицы, то при количестве пунктов списка, превышающем его размер, появится полоса прокрутки, а если пунктов меньше, то в поле останется пустое место. Атрибут multiple дает возможность выбирать несколько элементов из списка, для этого при выборе надо нажать и удерживать нажатой клавишу Ctrl.

Если же добавить на страницу элемент <SELECT> просто так, то вы увидите пустой список. Для добавления в список пунктов используются элементы OPTION, которые располагаются внутри элемента SELECT. Атрибут value задает значение, которое будет передано обработчику в случае выбора соответствующего пункта. Атрибут selected задает пункт, выбранный по умолчанию. Название элемента списка находится внутри элемента OPTION. Закрывающий тег не обязателен, но советую его использовать для обеспечения корректной работы.

В листинге 6.15 представлены примеры раскрывающегося списка и списка с полосой прокрутки. Для списка с полосой прокрутки установлена возможность множественного выбора.

Листинг 6.15. Создание списков

<html>

<head>

<title>Конструирование форм</title>

</head>

<body>

<form action="test.php" enctype="multipart/form-data" method="post" name="test" target="_blank">

Место проживания:

<select name="Reg_Place" size="1" >

<option value="SPb">Санкт-Петербург</option>

<option value="Mos" selected >Москва</option>

<option value="Ebr">Екатеринбург</option>

</select><br />

Области

работы (можно выбрать несколько):<br />

<select name="Reg_Work[]" size="4" multiple="multiple" >

<option value="journ">Журналистика</option>

<option value="progr">Программирование</option>

<option value="site">Создание сайтов</option>

<option value="HR">Управление персоналом</option>

<option value="sale">Продажи</option>

<option value="admin">Администрирование</option>

<option value="trans">Перевод</option>

<option value="PR">Реклама</option>

</select><br />

</form>

</body>

</html>

Результат обработки листинга 6.15 представлен на рис. 6.8.

Рис. 6.8. Списки

Теперь попробуем систематизировать и уточнить наши списки, чтобы посетителю было проще найти нужный пункт. В этом нам поможет элемент OPTGROUP, который создает заголовки в списках. У него есть единственный атрибут label, в котором указывается текст заголовка.

В листинге 6.16 показан пример создания списка с заголовками.

Листинг 6.16. Использование элемента OPTGROUP

<html>

<head>

<title>Конструирование форм</title>

</head>

<body>

<form action="test.php" enctype="multipart/form-data" method="post" name="test" target="_blank">

Место проживания:

<select name="R_Place" size="1" >

<optgroup label="Россия">

<option value="SPb">Санкт-Петербург</option>

<option value="Mos" selected >Москва</option>

<option value="Ebr">Екатеринбург</option>

<optgroup label="Америка">

<option value="LA">Лос-Анджелес</option>

<option value="Va">Вашингтон</option>

<option value="NY">Нью-Йорк</option>

<optgroup label="Франция">

<option value="Par">Париж</option>

<option value="Lion">Лион</option>

</select><br />

Области работы (можно выбрать несколько):<br />

<select name="R_Job" size="8" multiple="multiple" >

<optgroup label="Журналистика">

<option value="biz">Бизнес</option>

<option value="ecol">Экология</option>

<option value="tur">Туризм</option>

<optgroup label="Программирование">

<option value="web">Web-программирование</option>

<option value="CPP">С/С++</option>

<option value="Del">Delphi</option>

<optgroup label="Создание сайтов">

<option value="Diz">Дизайн</option>

Поделиться с друзьями: