ресурс для начинающих веб-разработчиков
комплексные веб-услуги по созданию сайтов

Справочный материал по основным языкам программирования и верстки сайтов.

Готовая методика создания простых и сложных динамичных сайтов, с использованием PHP и MySQL.

Использование веб-редактора Adobe Dreamweaver в разработке сайтов.

Использование графических редакторов Adobe Flash, Adobe Photoshop, Adobe Fireworks в подготовке веб-графики.

Разработка веб-сайтов под "ключ".

Разработка отдельных фрагментов сайтов, консультации по вопросам верстки веб-страниц и веб-программирования.

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

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

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

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