КАТЕГОРИИ:
Архитектура-(3434)Астрономия-(809)Биология-(7483)Биотехнологии-(1457)Военное дело-(14632)Высокие технологии-(1363)География-(913)Геология-(1438)Государство-(451)Демография-(1065)Дом-(47672)Журналистика и СМИ-(912)Изобретательство-(14524)Иностранные языки-(4268)Информатика-(17799)Искусство-(1338)История-(13644)Компьютеры-(11121)Косметика-(55)Кулинария-(373)Культура-(8427)Лингвистика-(374)Литература-(1642)Маркетинг-(23702)Математика-(16968)Машиностроение-(1700)Медицина-(12668)Менеджмент-(24684)Механика-(15423)Науковедение-(506)Образование-(11852)Охрана труда-(3308)Педагогика-(5571)Полиграфия-(1312)Политика-(7869)Право-(5454)Приборостроение-(1369)Программирование-(2801)Производство-(97182)Промышленность-(8706)Психология-(18388)Религия-(3217)Связь-(10668)Сельское хозяйство-(299)Социология-(6455)Спорт-(42831)Строительство-(4793)Торговля-(5050)Транспорт-(2929)Туризм-(1568)Физика-(3942)Философия-(17015)Финансы-(26596)Химия-(22929)Экология-(12095)Экономика-(9961)Электроника-(8441)Электротехника-(4623)Энергетика-(12629)Юриспруденция-(1492)Ядерная техника-(1748)
Списки выбора
|
|
|
|
План
Об’єкти керування Select та Option
Напишите пример выбора нужного товара с помощью флажков
Литература:
Інтернет-университет информационных технологий www.intuit.ru. Курс «Основы работы с HTML»
Інтернет-университет информационных технологий www.intuit.ru. Курс «Введение в HTML»
1. Списки вибору
2. Програмуровання контейнера SELECT
3. Створення об’єктів Option, колекція options[]
4. Властивості та події об’єкту Option
Задание:
Вариант 1. В распечатанном варианте самостоятельной работы подчеркнуть основной материал, ответить на контрольные вопросы. Скрепить листы. Подписать работу
Вариант 2. Составить опорный конспект в тетради для СР. Ответить на контрольные вопросы.
Списки выбора бывают двух типов: раскрывающиеся списки (выпадающие меню) и списки с множественным выбором. Независимо от типов списков описываются они одинаково с помощью пары тегов <select> </select>. Отдельные элементы списка задаются с использованием тега <option>. Тип списка определяется при помощи атрибутов тега <select>.
Атрибут name задает имя поля для отправки выбранных пунктов списка на сервер. Атрибут multiple разрешает множественный выбор. Атрибут size определяет, какое количество пунктов списка будет одновременно отображено на экране. При этом, если атрибут multiple не задан и size=1, то на экране отображается раскрывающийся список, если же задан атрибут Multiple или значение size больше 1, то список отображается развернутым.
Раскрывающиеся списки выбора по своему назначению соответствуют переключателям, в то же время их использование предпочтительно в тех случаях, когда количество вариантов выбора достаточно велико. Как правило, при выборе более чем из трех вариантов желательно вместо переключателей использовать раскрывающиеся списки.
|
|
|
Необходимо заметить, что по умолчанию выбирается первое значение из списка. При помощи атрибута selected тега <option> это значение можно изменить. Следующий пример показывает раскрывающийся список выбора размера экрана ноутбука с предварительно установленным значением "15.4".
<html> <body><form> Выбор размера экрана ноутбука <select name="tft"> <option value="tft-12">12" <option value="tft-13">13" <option value="tft-14">14" <option value="tft-15">15" <option value="tft-15-4" selected="selected">15.4" <option value="tft-17">17" </select></form> </body> </html>
Развернутые списки используются, как правило, при необходимости множественного выбора значений. В следующем примере раскрывающийся список выбора ноутбука по производителю преобразован в развернутый список с возможностью множественного выбора.
Необходимо отметить, что для списков с множественным выбором значение атрибута size по умолчанию устанавливается равным 6, кроме того, ни одно из значений не является выбранным по умолчанию. В следующем примере показана форма с развернутым списком высотой в 6 пунктов с предварительно заданными значениями "Compaq" и "Sony".
<html> <body><form> Выбор ноутбука по производителю: <select name="notebook" multiple size=6> <option value="aser">Aser <option value="asus">Asus <option value="compaq" selected="selected">Compaq <option value="hp">HP <option value="sony" selected="selected">Sony <option value="toshiba">Toshiba </select></form> </body> </html>
Программирование контейнера SELECT
Одним из важных элементов интерфейса пользователя являются списки вариантов. В HTML-формах для их реализации используется контейнер <SELECT>, который вмещает в себя контейнеры <OPTION>. При этом список может "выпадать" либо прокручиваться внутри окна. В зависимости от наличия атрибута MULTIPLE у контейнера <SELECT> список может быть либо с возможностью выбора только одного варианта, либо нескольких вариантов.
|
|
|
С каждым контейнером <SELECT> ассоциирован объект класса Select, а с каждым дочерним контейнером <OPTION> — объект класса Option, являющийся свойством данного объекта класса Select. Кроме того, свойством объекта класса Select является также коллекция options[], объединяющая все его дочерние объекты Option. Перечислим основные свойства, методы и события, характеризующие эти объекты.
|
|
|
|
|
Дата добавления: 2015-07-13; Просмотров: 284; Нарушение авторских прав?; Мы поможем в написании вашей работы!