Раскрывающейся список
Тег <select> используется для создания раскрывающегося списка, из которого можно выбрать элемент. Это контейнерный тег, внутри которого используются теги <option>, предназначенные для задания элементов (опций) списка.
Тег <select> имеет следующие параметры:
align—горизонтальное выравнивание списка. Возможны следующие значения:-
absbottom— выравнивание нижней границы списка по нижней границе текущей строки;absmiddle— выравнивание середины списка по середине текущей строки;baseline— выравнивание нижней границы списка по базовой линии текущей строки;bottom— то же , что иbaseline;top— верхняя граница списка выравнивается по самому высокому элементу текущей строки;texttop— верхняя граница списка выравнивается по самому высокому текстовому элементу текущей строки;left— список располагается у левого края окна. Текст и другие элементы обтекают его справа;right— список располагается у правого края окна. Текст и другие элементы обтекают его слева;
accesskey— определяет клавишу быстрого доступа к раскрывающемуся списку. Значением атрибута является строка, содержащая букву или цифру. Если нажать указанную клавишу в сочетании с клавишейAlt, то элемент получит фокус.-
<select accesskey = "S"> name—имя (идентификатор) списка;-
<select name="select1"> disabled—делает список недоступным пользователю;-
<select name="select1" disabled> multiple— обозначает возможность выбора из списка одновременно нескольких элементов;-
<select name="select1" disabled multiple> size— количество одновременно видимых элементов списка. По умолчанию — 1. Если это число больше 1, то список снабжается полосой прокрутки;-
<select name="select1" size="3"> tabindex— целое число, определяющее порядок перехода к элементу с помощью клавиши . Обычно используется, когда в форме присутствуют несколько элементов интерфейса, а порядок ввода данных в них важен.-
<select name="select1" size="3" tabindex="1">
Тег <option> имеет следующие параметры:
selected— обозначает выбранный (выделенный) элемент списка;-
<option selected> value— значение, ассоциированное с элементом списка;-
<option selected value="Первый">Текстовое содержимое элемента списка указывается сразу после тега
<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> имеет следующие параметры:
align— горизонтальное выравнивание текстовой области. Возможны следующие значения:-
absbottom— выравнивание нижней границы области по нижней границе текущей строки;absmiddle— выравнивание середины области по середине текущей строки;baseline— выравнивание нижней границы области по базовой линии текущей строки;bottom— то же , что иbaseline;top— верхняя граница области выравнивается по самому высокому элементу текущей строки;texttop— верхняя граница области выравнивается по самому высокому текстовому элементу текущей строки;left— текстовая область располагается у левого края окна. Текст и другие элементы обтекают его справа;right— область располагается у правого края окна. Текст и другие элементы обтекают его слева;
accesskey— определяет клавишу быстрого доступа к текстовой области. Значением атрибута является строка, содержащая букву или цифру. Если нажать указанную клавишу в сочетании с клавишейAlt, то элемент получит фокус.cols—количество символьных позиций по горизонтали для отображения текста;rows— количество строк, одновременно видимых в окне текстовой области;readonly— устанавливает текстовую область в режим просмотра (только для чтения). Если этот атрибут не использовать, то текстовая область будет работать как поле ввода и редактирования данных;name— имя (идентификатор) текстовой области;disabled—делает область недоступным пользователю;tabindex— целое число, определяющее порядок перехода к элементу с помощью клавишиTab. Обычно используется, когда в форме присутствуют несколько элементов интерфейса, а порядок ввода данных в них важен.wrap—определяет режим автоматического переноса символов на другую строку. Возможные значения:physical, virtual, off (выключено)
Пример:
<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 имеет атрибуты:
align—горизонтальное выравнивание содержимого, которое располагается на верхней рамке блока. Возможные значения:-
left— по левому краю (значение по умолчанию);right— по правому краю;center— по центру;
accesskey— определяет клавишу быстрого доступа к первому элементу пользовательского интерфейса, расположенному в контейнере<legend>. В том случае, когда<legend>содержит только текст, быстрая клавиша не действует;tabindex— целое число, определяющее порядок перехода с помощью клавишиTabк первому элементу пользовательского интерфейса, расположенному в крнтейнере<legend>. В том случае, когда<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 элемента.
Комментарии(0)
Для добавления комментариев надо войти в систему и авторизоватьсяКомментирование статей доступно только для зарегистрированных пользователей:Зарегистрироваться