На этом уроке мы с Вами продолжим изучение форм и начнем изучение меню выбора в форМАХ. Под меню выбора в форМАХ понимают, например, такой элемент интерфейса, как LIST BOX. Существуют три типа тэгов меню выбора для форм. Один из таких тэгов называется SELECT. В этом случае пользователь выбирает одно значение с фиксированного списка значений.
Список значений представляется тэгами OPTIONS. Попробуем изобразить вот какой список. Сделаем это следующим образом. Откроем тэг и напишем здесь SELECT. Затем данному элементу даем имя. Заметим, что элементу всегда нужно присваивать имя. Каждый элемент формы имеет свое имя. Итак, мы задаем, например, имя MyList. Сейчас мы с Вами допустили здесь незначительную ошибку: мы начали писать это внутри тэгов INPUT. Предварительно занесем это в буфер обмена, а затем удалим. Сделаем то, что мы делали ранее, вот здесь.
После этого закроем данный тэг и с помощью тэга OPTION заполним список этого LIST BOX. Первый элемент, который мы поместим сюда, так и назовем Первый Элемент. Закроем OPTION. Теперь вставим сюда. Второй элемент. Вообще-то, мы можем сейчас занести OPTION в буфер обмена, чтобы каждый раз не вводить его заново. Итак - OPTION. Затем - третий элемент. Три элемента нам достаточны. А теперь закроем тэг SELECT. Сохраним все это и Обновим нашу страницу в браузере.
Как видите, у нас получился элемент, который содержит список из трех элементов. Мы сейчас можем выбрать любой из этих элементов. Вот так симпатично у нас все получилось. Прекрасно. А теперь вернемся на MyPage и попробуем поработать со вторым типом тэгов в меню. Второй тип тэга называется SELECT SINGLE.
Он представляет собой такой же тэг, что и SELECT, но в данном случае пользователь видит на экране одновременно уже несколько элементов выбора. Обычно по умолчанию количество этих элементов равно трем. Мы сейчас поступим следующим образом. Для начала вставим эти элементы после каждого элемента формы. Иначе говоря, мы хотим, чтобы данные элементы GUI располагались в столбик (друг под другом) для наглядности. Это мы расположим вот сюда. Этого будет достаточно. А теперь здесь мы создадим элемент типа SELECT SINGLE и посмотрим, в чем заключается разница. Для того чтобы не вводить все заново, мы скопируем эту группу вот сюда.
А здесь поменяем этот тэг на SELECT SINGLE…Здесь установим MyList2, а эти элементы оставим без изменения. Если сейчас мы сохраним данный файл и Обновим его здесь, то получим нечто вроде этого. Для того чтобы эти два элемента отличались друг от друга, нам необходимо в SELECT SINGLE вставить еще атрибут Size. Зададим Size, равным четырем. Сохраним и обновим данную страницу. Вы можете видеть, что теперь этот элемент определенно отличается от верхнего элемента.В тот момент, когда мы Size не устанавливали, они, практически, не отличались между собой.
И, последнее, это, так называемый, SELECT MULTIPLAY. От SELECT SINGLE он отличается только тем, что в этом случае пользователь может одновременно выбирать несколько элементов списка. Если, к примеру, мы поставим здесь атрибут MULTIPLAY и установим его, например, равным двум, то мы получим следующее. Сохраним и Обновим этот элемент. Теперь мы видим, что при нажатой клавише Ctrl пользователь может выбирать несколько элементов. На этом завершим наш урок. На следующем уроке мы с Вами научимся отправлять файлы.
⇐Стили шрифтов в html | TeachPro WEB-дизайн | Создание формы отправки файлов в html⇒