РОССИЙСКИЙ УНИВЕРСИТЕТ ДРУЖБЫ НАРОДОВ
ФАКУЛЬТЕТ ФИЛОЛОГИЧЕСКИХ НАУК
КАФЕДРА ИНОСТРАННЫХ НАУК
ОТЧЕТ
По практической работе №5
По курсу «ИТ в лингвистике»
На тему «Поле со списком»
Группа: ФЛБ-15
Студенты: Максимов Михаил Игоревич и …
Страна: Россия
Преподаватель:
Матухин Павел Гранитович
Москва
Поле со списком, называемое еще ниспадающее меню, один из гибких и удобных элементов формы. В зависимости от настроек, в списке можно выбирать одно или несколько значений. Преимущество списка в его компактности, он может занимать всего одну строку, а чтобы просмотреть весь список нужно на него нажать. Однако это является и недостатком, ведь пользователю сразу не виден весь выбор.
Поле со списком создается следующим образом.
<select параметры>
<option параметры>Пункт 1</option>
<option>Пункт 2</option>
<option>Пункт 3</option>
</select>
Тег <SELECT> позволяет создать элемент интерфейса в виде раскрывающегося списка, а также список с одним или множественным выбором. Конечный вид зависит от использования параметра size тега <SELECT>, который устанавливает высоту списка. Ширина списка определяется самым широким текстом, указанным в теге <OPTION>, а также может изменяться с помощью стилей. Каждый пункт создается с помощью тега <OPTION>, который должен быть вложен в контейнер <SELECT>.
Параметры тега <SELECT>
Рассмотрим параметры тега <SELECT>, с помощью которых можно изменять вид и представление списка.
MULTIPLE
Наличие параметра multiple сообщает браузеру отображать содержимое элемента <SELECT> как список множественного выбора. Конечный вид списка зависит от используемого параметра size. Если он отсутствует, то высота списка равна количеству пунктов, если значение size меньше числа пунктов, то появляется вертикальная полоса прокрутки. Когда size=1 список превращается в «крутилку», как показано ниже, но выбирать с помощью нее одновременно несколько пунктов списка становится неудобно.
Для выбора нескольких значений списка применяются клавиши <Ctrl> и <Shift> совместно с курсором мыши.
В примере 1 показано создание списка множественного выбора.
Пример 1. Список множественного выбора
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Список</title>
</head>
<body>
<form action="handler.php">
<p><select name="select" size="3" multiple>
<option selected value="s1">Чебурашка</option>
<option value="s2">Крокодил Гена</option>
<option value="s3">Шапокляк</option>
<option value="s4">Крыса Лариса</option>
</select>
<input type="submit" value="Отправить"></p>
</form>
</body>
</html>
Рисунок 1
NAME
Определяет уникальное имя элемента <SELECT>. Как правило, это имя используется для доступа к данным через скрипты или для получения выбранного значения серверным обработчиком.
SIZE
Устанавливает высоту списка. Если значение параметра size равно единице, то список превращается в раскрывающийся. При добавлении параметра multiple к тегу <SELECT> при size=1 список отображается как «крутилка». Во всех остальных случаях получается список с одним или множественным выбором. Значение по умолчанию зависит от параметра multiple. Если он присутствует, то размер списка равен количеству элементов. Когда параметра multiple нет, то значение параметра size равно 1.
Параметры тега <OPTION>
Тег <OPTION> также имеет параметры, влияющие на вид списка, они представлены далее.
SELECTED
Делает текущий пункт списка выделенным. Если у тега <SELECT> добавлен параметр multiple, то можно выделять более одного пункта.
VALUE
Определяет значение пункта списка, которое будет отправлено на сервер. На сервер отправляется пара «имя/значение», где имя задается параметром name тега <SELECT>, а значение — параметром value выделенных пунктов списка. Значение может, как совпадать с текстом пункта, так быть и самостоятельным.
Создание списка показано в примере 2.
Пример 2. Использование списка
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Список</title>
</head>
<body>
<form action="handler.php">
<p><b>Выбери персонажа</b></p>
<p><select name="hero">
<option value="s1">Чебурашка</option>
<option value="s2" selected>Крокодил Гена</option>
<option value="s3">Шапокляк</option>
<option value="s3">Крыса Лариса</option>
</select>
<input type="submit" value="Отправить"></p>
</form>
</body>
</html>
В примере создается список из четырех пунктов с именем hero, причем второй пункт из них предварительно выделен через параметр selected тега <OPTION>. Результат примера показан ниже.
Рисунок 2
Группирование элементов списка
При достаточно обширном списке имеет смысл сгруппировать его элементы по блокам, чтобы обеспечить наглядность списка и удобство работы с ним. Для этой цели применяется тег <OPTGROUP>. Он представляет собой контейнер, внутри которого располагаются теги <OPTION> объединенные в одну группу. Особенностью тега <OPTGROUP> является то, что он не выделяется как обычный элемент списка, акцентируется с помощью жирного начертания, а все элементы, входящие в этот контейнер, смещаются вправо от своего исходного положения. Для добавления заголовка группы используется параметр label, как показано в примере 3.
Пример 3. Группирование элементов списка
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Список</title>
</head>
<body>
<form action="handler.php">
<p><select>
<optgroup label="Русская кухня">
<option value="r1">Закуска Барская</option>
<option value="r2">Раки, фаршированные по-царски</option>
<option value="r3">Биточки в горшочке</option>
</optgroup>
<optgroup label="Украинская кухня">
<option value="u1">Галушки славянские</option>
<option value="u2">Пампушки украинские</option>
<option value="u3">Жаркое по-харьковски</option>
</optgroup>
</select></p>
<p><input type="submit" value="Отправить"></p>
</form>
</body>
</html>
Результат данного примера показан ниже.
Рисунок 3
Рисунок 1. 3
Рисунок 2. 5
Рисунок 3. 7
Дата добавления: 2015-08-29; просмотров: 21 | Нарушение авторских прав
| <== предыдущая лекция | | | следующая лекция ==> |
| Раскрыта тайна иконы Богородицы Луганской | | | I. Традиции предков - основа интеллекта и нравственности человека 1 страница |