alt

Когда человеку тяжело,
это часто означает,
что он идёт к успеху.

alt


Элемент select.

Категория: Уроки HTML Просмотров: 265 Коментариев: 0 Дата: 2017-05-24 Добавил: admin

 Элемент select

Итак мы продолжим с элементами формы и сегодня рассмотрим еще один интересный элемент - это SELECT, в переводе - выбор. Если с помощью радиокнопок вы отвечали конкретно на вопрос, а в чекбаксах могли выбрать несколько вариантов ответа. То элемент SELECT представляет собой выпадающей список, предоставляя возможность выбрать один из предложенных вариантов.

 элемент select

Как создается такой элемент? В начале создается параграф, в котором задаем вопрос, а затем создаем еще один параграф в котором расположится уже сам SELECT в новой строке. Создается такой элемент с помощью одноименного тега <select>. Это парный тег, поэтому у него обязательно есть закрывающийся тег </select>.

Тег <select> представляет собой, своего рода, контейнер, в котором в теге <option> хранятся элементы списка. Тег <option> - парный тег и должен всегда закрываться тегом </option>. Ниже создадим элемент выпадающего списка с пятью значениями.

HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Первая HTML страница</title>
</head>
<body>
 

</body> </html>

Тегу <select> необходимо задать имя с помощью атрибута name, так как все данные формы отправляются обработчику, соответственно наш элемент отправится обработчику с присвоенным ему именем. В нашем случае наш элемент получил имя name_select. Теперь если вы сохраните результат, Вы увидите простотой выпадающей список.

Следующую опцию, которую мы рассмотрим - это изначальный показ конкретного элемента в списке. Если сейчас посмотреть, то у нас изначально отображается первый элемент - цифра один. Бывают моменты, когда нужно указать другой начальный элемент, например в нашем случаи цифру три, так как кушают люди в основном три раза в день. Делается это следующим образом: в элементе <option>3</option> указывается атрибут selected.

HTML



Это будет означать, что данный элемент должен быть активен изначально. И если обновим страницу, то изначально уже будет отображаться элемент с цифрой три.

У данного элемента имеется ряд особенностей: Размер. Сейчас наш SELECT отображал только одно значение, а после нажатия на стрелочку у него появлялся весь список элементов. После указания размера меняется внешний вид нашего элемента и становится доступно то количество значений, которое мы указали в размере, а остальные будут доступны только через полосу прокрутки. Размер задается с помощью атрибута name="3", и в этом случае у нас будут видны только три элемента списка.

HTML
<select name="name_select" size="3">

Теперь рассмотрим следующую особенность данного элемента - это когда нужно чтобы была возможность выбирать сразу несколько значений списка. Для этого элементу SELECT задается атрибут multiple, что означает множественный выбор.

HTML
<select name="name_select" size="5" multiple>

В этом случае мы сможем выбрать несколько элементов или даже все элементы в списке через нажатие клавиши Ctrl, т.о. и предоставляется возможность осуществления множественного выбора.

Далее рассмотрим последний момент. Он понадобится, если вы уже начнете работать с обработчиком для отправки формы. Элементу <option value ="three"> указывается уже известный атрибут value="three" с помощью которого мы задаем конкретное значение для выбранного элемента.

Другими словами при отправке в переменную с именем name элемента SELECT попадает то значение, которое выбрал пользователь. Если выбрали три, то в переменную попадет цифра три и отправится обработчику. В случае же если указан атрибут со своим значение value="three" обработчику попадет уже конкретное значение three, а не цифра три.

На этом все, а мы переходим к следующему элементу, где рассмотрим большое текстовое поле под названием <textarea>.


Просмотреть демо: Демо

Скачать исходник: Скачать



Добавить комментарий:


Ваше имя

Текст комментария


Введите буквы с учетом регистра:





Апдейты

Популярное Свежие записи

Облако тегов