Раскрывающейся список. Текстовая область. Теги fieldset, legend, label

Раскрывающейся список

Тег <select> используется для создания раскрывающегося списка, из которого можно выбрать элемент. Это контейнерный тег, внутри которого используются теги <option>, предназначенные для задания элементов (опций) списка.

Тег <select> имеет следующие параметры:

Тег <option> имеет следующие параметры:

Текстовое содержимое элемента списка указывается сразу после тега <option>.

Раскрывающиеся списки

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Раскрывающейся список</title>
</head>

<body>
<select name="list1">
<option value="1">Первый
<option value="2">Второй
<option value="3">Третий
<option value="4">Четвертый
</select>
<p>
<select name="list2" size="3">
<option value="one">Один
<option value="two">Два
<option value="three">Три
</select>
</p>
<p>
<b>Оцените этот сайт</b>
</p>
<p>
<select name="list3" size="4" align ="top" >
<option value="3">Отлично
<option value="2">Хорошо
<option value="1">Так себе
<option value="0">Плохо
</select>
</p>
</body>
</html>

В окне веб-браузера это будет выглядеть ТАК.

Теги форматирования текста, указанные до и после тега <option>, не действуют на вид элементов списка. Чтобы установить параметры шрифта элементов списка, следует воспользоваться каскадными таблицами стилей для тега <select>.

Параметр value предназначен для хранения значений, ассоциировнных сэлементами списка. Элемент списка на экране и ассоциированное с ним значение могут быть как одинаковыми, так и различными. Если раскрывающейся список находится в форме (тег <form>), то при отправке данных формы на сервер передается значение параметра value выбранного элемента.

Для создания иерархических списков внутри тега <select> можно использовать контейнерный тег <optgroup>, в который заключаются теги <option> элементов списка, объединяемых в одну группу. Атрибут label тега <optgroup>принимает в качестве значения текстовую строку, отображаемую в списке жирным курсивом. Этот невыбираемый элемент списка, выполняющий роль заголовка группы элементов. При этом выбираемые элементы группы, заданные посредством тега <option>, отображаются с левым отступом.

Двухуровневый раскрывающийся список

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Двухуровневый раскрывающийся список</title>
</head>

<body
<select name="mylist" size="9">
<optgroup label="Фрукты">
<option value="1">Яблоки
<option value="2">Груши
</optgroup>
<optgroup label="Овощи">
<option value="3">Капуста
<option value="4">Картофель
<option value="5">Помидоры
</optgroup>
<option value="6">Хлеб
<option value="7">Крупа
<option value="8">Сахар
</select>
</body>
</html>

В окне веб-браузера это будет выглядеть ТАК.

Текстовая область

Контейнерный тег <textarea> позволяет создать элемент, называемый текстовой областью. Это прямоугольная область с полосами прокрутки. Внутри нее легко разместить многострочный текст, который можно сделать как редактируемым, так и доступным только для просмотра. Текстовую область обычно используют как большое поле ввода данных. Важной особенностью тега <textarea> является то, что все теги, заключенные в него, не выполняются браузером, а отображаются как обыкновенный текст.

Тег <textarea> имеет следующие параметры:

Пример текстовой области

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Текстовая область</title>
</head>

<body>
<textarea name="" cols="15" rows="5">
Текстовая область
</textarea>
</body>
</html>

В окне веб-браузера это будет выглядеть ТАК.

Все теги, включенные в контейнер <textarea>, не интерпретируются браузером, а выводятся в текстовой области как обыкновенный текст.

Тег fieldset. Тег legend. Тег label

Для создания выделенного рамкой блока элементов пользовательского интерфейса служит контейнерный тег <fieldset>. В нем может находится контейнерный тег <legend>, содержимое которого отображается в верхней части блока (на рамке). Обычно это текстовой заголовок группы элементов, хотя можно использовать графическое изображения и другие элементы.

Блок с радиокнопками

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Блок с радиокнопками</title>
</head>

<body>
<fieldset><b>Сделайте выбор</b><br><br>
<input name="product" type="radio" value="auto">Автомобиль
<img src=" /images/foto3.jpg"><br><br>
<input name="product" type="radio" value="flora" checked>Грибы
<img src=" images/100-IMGA0431.JPG" height="180" width="320"><br><br>
<input name="product" type="radio" value="nothing">Ничего не надо
</fieldset>
</body>
</html>

В окне веб-браузера это будет выглядеть ТАК.

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

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

Тег <legend> имеет атрибуты:

Обычно элементы пользовательского интерфейса сопровождаются поясняющими надписями (метками). Это можно сделать, расположив текст надписи до или после тега элемента или воспользовавшись таблицей для задания требуемого положения. Вместе с тем, с помощью контейнерного тега <label> можно определить автоматическое расположение надписи рядом с элементом.

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Тег <label></title>
</head>

<body>
<label>
Введите ваше имя
<input type="text">
</label>
</body>
</html>

В окне веб-браузера это будет выглядеть ТАК.

Тег <label> обладает атрибутами accesskey и for. Атрибут for позволяет указать, к какому элементу относится надпись: в качестве значения он принимает значение атрибута id элемента.




  • Другие |
назадвверхвперед
Rambler's Top100