Как создать раскрывающийся список
Продолжаем создавать файл шаблона основной страницы формы обратной связи, которая открывается пользователю для ввода информации. В этой главе будет рассмотрено создание раскрывающегося списка, а если быть точнее - списка множественного выбора (в чём разница смотрите ниже), который выводится вверху страницы сразу после заголовка. Данный список позволяет пользователю выбрать тему сообщения, например, статья, вопрос, отзыв и так далее.
Создание списка на странице
Рассмотрим код списка.
33 <div class='type_selection'> <!-- Список типов обращения -->
34 <!-- Заголовок -->
35 <h2 class='hdr_sel'><b>Тип обращения:</b></h2>
36 <!-- Поле выбора -->
37 <select class='sel_type' name="t-dish" required size='3'>
38 <option value='Статья'>Статья</option>
39 <option value='Вопрос'>Вопрос</option>
40 <option value='Отзыв'>Отзыв</option>
41 <option value='Предложение'>Предложение</option>
42 <option value='Полезный совет'>Полезный совет</option>
43 <option value='Жалоба'>Жалоба</option>
44 <option value='Другое'>Другое</option>
45 </select>
46 </div>
В строке 33 создаётся блок type_selection, который является своеобразным контейнером для раскрывающегося списка. Далее строка 35 создаёт для списка заголовок второго уровня.
Строка 37 указывает браузеру создать раскрывающийся список, присвоить ему класс sel_type (это нужно для настройки внешнего вида при помощи таблиц CSS), имя t-dish (необходимо для дальнейшей передачи информации обработчику формы). Так же устанавливается количество видимых строк (3), а required указывает, что пользователь должен обязательно выбрать один из элементов.
Строки 38-45 определяют элементы списка. Каждому элементу присваивается значение (атрибут value), которое повторяет то, что выводится на экран. Данное значение так же будет передано обработчику формы.
Как создать раскрывающийся список
В чем разница между раскрывающимся списком и списком множественного выбора? Всё просто!
Список множественного выбора при выводе на страницу уже содержит несколько строк и полосу прокрутки (количество указывается в атрибуте size). Если этого атрибута нет, то значение для него устанавливается по умолчанию равным единице, и список превращается в раскрывающийся. Это значит, что в выведенной на экран ячейке значения не будет ни какого (будет только маленькая стрелка), а что бы раскрыть список, понадобиться кликнуть на него. У таких списков есть преимущество: после раскрытия в эту ячейку (она всё равно остаётся пустой) можно начать вводить нужное слово и система автоматически найдёт строку, если она существует.
Пропишите указанный код в создаваемом файле, сохраните, перейдите на сайт и перезагрузите страницу. При необходимости настройте вид созданного элемента.
В конце стоит напомнить, что все настройки внешнего вида осуществляются при помощи файла CSS для этой странице (см. строку кода 17, а так же главы 21-25 первой части).
Не забывайте после каждого изменения в таблице CSS перед просмотром результата очищать кэш браузера!
Теперь можно переходить к следующей главе, в которой подробно описано, как создать полноценный текстовый редактор с кнопками для оформления текста.
