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 элемента.