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

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

Тег <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 — целое число, определяющее порядок перехода к элементу с помощью клавиши <Tab>. Обычно используется, когда в форме присутствуют несколько элементов интерфейса, а порядок ввода данных в них важен.

• <select name="select1" size="3" tabindex="1">

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

• selected — обозначает выбранный (выделенный) элемент списка;

• <option selected>

• value — значение, ассоциированное с элементом списка;

• <option selected value="Первый">

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

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

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

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

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

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

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

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

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

Контейнерный тег <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 (выключено)

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

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

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

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

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

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

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

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

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

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

• align —горизонтальное выравнивание содержимого, которое располагается на верхней рамке блока. Возможные значения:
  • left — по левому краю (значение по умолчанию);
  • right — по правому краю;
  • center — по центру;
• accesskey — определяет клавишу быстрого доступа к первому элементу пользовательского интерфейса, расположенному в крнтейнере <legend>. В том случае, когда <legend> содержит только текст, быстрая клавиша не действует;
• tabindex — целое число, определяющее порядок перехода с помощью клавиши <Tab> к первому элементу пользовательского интерфейса, расположенному в крнтейнере <legend>. В том случае, когда <legend> содержит только текст, быстрая клавиша не действует;

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

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

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