Пример »
Примечание:
из-за различных способов выбора нескольких элементов и дополнительного уведомления пользователей о доступности выбора нескольких вариантов, рекомендуется вместо раскрывающегося списка использовать флажки.
Name:
Определяет имя для раскрывающегося списка. Оно может быть использовано для доступа к данным формы после ее отправки или для ссылки на элемент в JavaScript.
size:
Указывает количество видимых вариантов в раскрывающимся списке. Если значение атрибута size больше 1, но меньше общего количества вариантов списка, то браузер автоматически добавит полосу прокрутки, чтобы указать, что есть еще варианты для просмотра.
Тег option HTML
используется для создания выпадающего списка, с помощью которого пользователь может выбрать один вариант из заранее определенного набора значений.
Текст, видимый пользователю, может отличаться от текста, указанного в атрибуте value
. Вот, как можно создать выпадающий список:
Green
Yellow
Black
Выпадающий список создается с помощью тега ;
Внутри тега определяются варианты для выбора с помощью тега ;
В теге можно использовать атрибут value
, чтобы получить доступ к выбранному варианту с помощью PHP
, JS
, Jquery
и т.д.
Также можно задать класс CSS
вместо того, чтобы использовать идентификатор для определения стиля выпадающего списка.
В следующем разделе я покажу примеры использования выпадающего списка HTML
в JavaScript / JQuery
. В примерах также будет показано, как задавать стили с помощью CSS / CSS3
и фреймворка Bootstrap
.
Пример создания простого выпадающего списка
В этом примере HTML select option
используется для создания выпадающего списка с тремя вариантами на выбор:
В приведенном выше примере для создания выпадающего списка используется следующая разметка:
5
10
15
20
25
Использование атрибута value
Как упоминалось ранее, значение атрибута value
может отличаться от текста, выводимого на странице. Например, можно вывести для пользователей названия стран или цветов, а в атрибуте value
использовать шорткоды.
В следующем примере мы создадим выпадающий список с атрибутом value
:
Посмотреть онлайн демо-версию и код
Для тега используется следующий код:
Maroon
Green
Yellow
Blue
Red
Пример получения доступа к выбранному варианту в JavaScript
Теперь создадим пример получения доступа к значению выбранного варианта и выполнения некоторых действий. Тот же список, что и в приведенном выше примере, мы создаем с вариантами выбора цвета. После выбора нажмите кнопку, чтобы применить этот цвет к документу:
Посмотреть онлайн демо-версию и код
Для option value HTML
используется следующий код:
Maroon
Green
Yellow
Blue
Red
Other
Следующая строка кода используется в JavaScript
, чтобы получить доступ к значению атрибута value
варианта :
var seltheme = document.getElementById(“selcolor”).value;
При нажатии кнопки вызывается функция JS
, которая присваивает выбранное в выпадающем списке значение переменной. Это значение используется для применения цвета к текущему документу.
Получение доступа к видимому тексту в JQuery
На этот раз я буду использовать JQuery
, чтобы получить доступ к значению выбранного варианта: как к тексту, так и к value
. В этой демо-версии я буду получать доступ к видимому тексту в теге option
в HTML
:
Посмотреть онлайн демо-версию и код
В коде для каждого варианта в теге значение отличается от текста. После того, как вы выберете цвет, jQuery
отображает видимый текст в предупреждении. Код тега следующий:
Maroon
Green
Yellow
Blue
Red
Вот как обеспечивается доступ к этому значению в HTML select option selected JavaScript
:
var selectedcolor = $("#jqueryselect option:selected").text();
Также можно получить доступ к значению с помощью JQuery-метода $.val()
:
var selectedcolor = $("#jqueryselect").val();
Замените эту строку в приведенном выше примере, и код будет отображать шорткод / значение цвета в атрибуте value
, а не видимый текст.
Пример получения значения в скрипте PHP
В этом примере получения значения выбранного из выпадающего списка варианта форма создается с помощью тега в разделе разметки. После выбора цвета из выпадающего списка нажмите на кнопку “Submit
”. Данные формы будут передаваться в тот же PHP-файл
, после чего отобразится выбранный цвет:
Посмотреть онлайн демо-версию и код
Метод формы, используемый в примере — POST
, поэтому можно получить значения формы с помощью массива PHP $_POST[“”]
. Это код формы, используемый в примере:
А вот как PHP-скрипт
используется, чтобы получить значение HTML select option
:
". $_POST["selphp"]."";
}
?>
Если в форме указан метод GET
, тогда используйте PHP-массив $_GET[“”]
.
Определение стилей выпадающего списка с помощью CSS
Теперь рассмотрим, как определить стили выпадающего списка , используя возможности CSS
. В следующей демо-версии я использовал несколько простых свойств CSS
и свойства градиента CSS3
:
Посмотреть онлайн демо-версию и код
Вместе с linear-gradient
здесь использовано свойство box-shadow
. Полный код CSS
выглядит следующим образом:
Selcls {
padding: 3px;
border: solid 1px #517B97;
outline: 0;
background: -webkit-gradient(linear, left top, left 25, from(#FFFFFF), color-stop(4%, #CAD9E3), to(#FFFFFF));
background: -moz-linear-gradient(top, #FFFFFF, #CAD9E3 1px, #FFFFFF 25px);
box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
-moz-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
-webkit-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
width:150px;
}
Закругленные углы с помощью свойства border-radius
Для HTML select option
мы зададим свойство CSS3 border-radius
, чтобы сделать закругленные углы. Цветовая гамма также изменяется. Вы можете экспериментировать с рамками, шириной, полями и другими свойствами, как захотите:
Посмотреть онлайн демо-версию и код
Использование нескольких атрибутов и стилей CSS
Чтобы дать пользователям возможность выбирать из списка несколько вариантов, нужно использовать атрибут multiple
. В приведенном выше примере может быть выбран только один вариант. При использовании multiple
можно выбрать несколько вариантов, нажав клавишу CTRL
:
Посмотреть онлайн демо-версию и код
Приветствую всех читателей моего блога. Сегодня я вам расскажу, как делать в html выпадающий список, какие теги и атрибуты нужно использовать, а также для каких целей это вам может понадобиться.
Тег select и создание выпадающего списка
Итак, выпадающий список в html создается с помощью парного тега select , в который помещаются парные теги option . Именно в них записываются все варианты, которые будут предложены при клике на список. Пример:
Выберите животное
Бык
Корова
Овца
Конь
При этом то, что выводится между открывающей и закрывающей частью option , вы увидите на экране, а значение, которое содержится в атрибуте value , будет отправлено на сервер или обработано с помощью скрипта.
Список в html может быть обычным, и с множественным выбором. Чтобы сделать возможность выбирать несколько пунктов, нужно добавить в select пустой атрибут multiple . Чтобы выбрать несколько значений, удерживайте ctrl
и жмите левую кнопку мыши.
Еще один атрибут – disabled . Он делает список недоступным для нажатия и просмотра пунктов, но при этом его видно на странице.
Required – html5-атрибут. Если он задан, форма не будет отправлена без выбора значения из раскрывающегося списка. В общем, он становится обязательным для выбора. Пока атрибут работает далеко не во всех браузерах.
Атрибуты тега option
Собственно, select служит лишь контейнером для пунктов списка, сами они задаются с помощью тега option . У него есть параметр value , как мы уже выяснили, но кроме этого еще есть и другие. Например:
Selected – элемент будет выбранным по умолчанию. В обычном списке этот атрибут без значения можно задать только одному пункту, во множественном – нескольким.
Важное уточнение для правильной работы
Если результат выбора нужно будет отправить на сервер или обработать через скрипты, то помещайте select в форму, чтобы не возникало никаких ошибок. Дело в том, что раскрывающийся список изначально создавался именно как один из элементов формы.
Для чего нужен select
Обычно он может пригодиться вам, если вы делаете на своем сайте регистрация, либо хотите провести опрос. Элемент имеет недостаток – он не очень хорошо меняет внешний вид через css.
По умолчанию при нажатию на список появляется синяя рамка, таким же цветом выделяются те пункты списка, на которые наведен курсор. Чтобы при нажатии рамка не появлялась, либо выделялась другим цветом, можно написать такой селектор:
Select:focus{
Теперь рамка будет оранжевой.
Option тоже можно стилизовать, но вот при наведении на пункт его фон становится синим и через стили это почему-то не меняется.
Option{
Кстати, может кто-то из вас знает, как изменить фоновый цвет при наведении на пункт через css?
Вот, собственно, пока и все по тегу select и его применению. Никаких дополнительных возможностей в html для него не предусмотрено. Все остальные операции с ним можно производить с помощью javascript и php. Например, если вам нужно создать список для выбора года рождения и там может быть 80-100 разных вариантов, не будете же вы вручную их писать?
Как раз для этого и нужно использовать программирование, а именно цикл. Ну да ладно, это уже тема для другого разговора, а на сегодня это вся информация, которую я хотел вам сообщить. С другими основными тегами в html вы можете познакомиться .
В процессе создания сайта или блога и дальнейшего его наполнения содержанием, по разным причинам, порой возникает необходимость скрыть какую-то часть текста, разместить более объёмную информацию в спрятанный до поры до времени блок, но при этом всё же указать пользователю на то, что имеется ещё кое что, и предоставить ему возможность просмотреть скрытое содержание без перехода на следующую строку или страницу.
Сегодня мы рассмотрим простейший способ создания на страницах сайта и в отдельных сообщениях, скрытых блоков с содержанием, раскрывающихся при нажатии на определенный элемент текста, используя исключительно свойства CSS3. Переключателем может служить и отдельное слово, и выделенное словосочетание, а так же целое предложение, или информативная иконка.
Давайте, постараемся обойтись без лишней воды, посмотрите весь этот простейший механизм в действии, на наглядном примере, так же можете и подредактировать что-нибудь при желании:
Пример №1 В роли переключателей раскрывающихся блоков с дополнительной информацией используется никак не выделенный и не обозначенный текст, с недвусмысленным предложением нажать на него, что вы без страха и сомнений обязательно сделайте, чтобы увидеть )))
Как видите всё более-чем прекрасно работает, скрытое содержание, как появляется без проблем, так и исчезает от легкого нажатия мышкой, и при этом мы задействовали самый минимум исполняемого кода, и в html-каркасе, и в формировании стилей css. Без подключения дополнительных javascript библиотек, с извечной тревогой, а не отключены ли они на стороне пользователя.:checked
, применяемым к элементам интерфейса, таким как переключатели (). Что мы собственно и сделали, в теге for="hd-1"
переключателя текущего блока. Чекбоксы спрячем основательно и навсегда, прописав в классе.hide свойство display: none;
Надеюсь, из моего сумбурного пояснения, все же стало понятно в чём вся фишка. CSS применяет новые стили (с помощью псевдокласса checked
), чтобы показать блок контента, который до этого был скрыт, только тогда, когда пользователь нажимает на элемент, который связан с флажком(checkbox) по уникальному идентификатору.
Из всего этого следует важное замечание
:
когда вы используете несколько скрытых блоков на одной странице, каждый переключатель должен иметь уникальный идентификатор, который будет отличаться от идентификаторов в других блоках.
Так, на словах мы разобрали, что куда и зачем, теперь, давайте посмотрим на html-каркас всей коннструкции:
<
input class
=
"hide"
id=
"hd-1"
type=
"checkbox"
>
<
label for
=
"hd-1"
>
Нажмите здесь,
чтобы открыть!
<
div>
Скрытое содержание......
<
input class
=
"hide"
id=
"hd-2"
type=
"checkbox"
>
<
label for
=
"hd-2"
>
Нажмите здесь,
чтобы прочитать больше!
<
div>
Скрытое содержание...
Нажмите здесь, чтобы открыть!
Скрытое содержание......
Нажмите здесь, чтобы прочитать больше!
Скрытое содержание...
Далее переходим непосредственно к формированию стилей CSS , без которых вся эта конструкция работать не будет. Самый минимум кода, без какого-нибудь оформления, только чуточку выделил фон для раскрывающегося блока, чтобы определить для вас и показать рамки скрытого текста. Вы же можете оформлять блоки как вам вздумается, навесить бордюры, скруглить углы, выделить текст, или же .
1. CSS
.
hide,
.
hide +
label ~ div {
display:
none;
}
/* вид текста label */
.
hide +
label,
.
hide:
checked +
label {
padding:
0
;
color:
green;
cursor:
pointer;
border-
bottom:
1px dotted green;
}
.
hide:
checked +
label +
div {
display:
block;
background:
#efefef;
-
moz-
box-
shadow:
inset 3px 3px 10px #7d8e8f;
-
webkit-
box-
shadow:
inset 3px 3px 10px #7d8e8f;
box-
shadow:
inset 3px 3px 10px #7d8e8f;
padding:
10px;
}
/* скрываем чекбоксы и блоки с содержанием */
.hide, .hide + label ~ div {
display: none;
}
/* вид текста label */
.hide + label,
.hide:checked + label {
padding: 0;
color: green;
cursor: pointer;
border-bottom: 1px dotted green;
}
/* вид текста label при активном переключателе */
.hide:checked + label {
color: red;
border-bottom: 0;
}
/* когда чекбокс активен показываем блоки с содержанием */
.hide:checked + label + div {
display: block;
background: #efefef;
-moz-box-shadow: inset 3px 3px 10px #7d8e8f;
-webkit-box-shadow: inset 3px 3px 10px #7d8e8f;
box-shadow: inset 3px 3px 10px #7d8e8f;
padding: 10px;
}
Это всё, для аскетичного примера, вполне достаточный минимум. Но ведь, мы будем совсем не мы, если не навесим хоть каких-нибудь плюшек, да и пользователю лучше подсказать визуально, куда следует нажимать.
2. CSS /* скрываем чекбоксы и блоки с содержанием */
.
hide,
.
hide +
label ~ div {
display:
none;
}
/* вид текста label */
.
hide +
label {
margin:
0
;
padding:
0
;
color:
green;
cursor:
pointer;
display:
inline-
block;
}
/* вид текста label при активном переключателе */
.
hide:
checked +
label {
color:
red;
border-
bottom:
0
;
}
/* когда чекбокс активен показываем блоки с содержанием */
.
hide:
checked +
label +
div {
display:
block;
background:
#efefef;
-
moz-
box-
shadow:
inset 3px 3px 10px #7d8e8f;
-
webkit-
box-
shadow:
inset 3px 3px 10px #7d8e8f;
box-
shadow:
inset 3px 3px 10px #7d8e8f;
margin-
left:
20px;
padding:
10px;
/* чуточку анимации при появлении */
-
webkit-
animation:
fade ease-
in 0.
5s;
-
moz-
animation:
fade ease-
in 0.
5s;
animation:
fade ease-
in 0.
5s;
}
/* анимация при появлении скрытых блоков */
@-
moz-
keyframes fade {
from {
opacity:
0
;
}
to {
opacity:
1
}
}
@-
webkit-
keyframes fade {
from {
opacity:
0
;
}
to {
opacity:
1
}
}
@
keyframes fade {
from {
opacity:
0
;
}
to {
opacity:
1
}
}
.
hide +
label:
before {
background-
color:
#1e90ff;
color:
#fff;
content:
"\002
B"
;
display:
block;
float:
left;
font-
size:
14px;
font-
weight:
bold;
height:
16px;
line-
height:
16px;
margin:
3px 5px;
text-
align:
center;
width:
16px;
-
webkit-
border-
radius:
50
%;
-
moz-
border-
radius:
50
%;
border-
radius:
50
%;
}
.
hide:
checked +
label:
before {
content:
"\221
2"
;
}
/* скрываем чекбоксы и блоки с содержанием */
.hide,
.hide + label ~ div {
display: none;
}
/* вид текста label */
.hide + label {
margin: 0;
padding: 0;
color: green;
cursor: pointer;
display: inline-block;
}
/* вид текста label при активном переключателе */
.hide:checked + label {
color: red;
border-bottom: 0;
}
/* когда чекбокс активен показываем блоки с содержанием */
.hide:checked + label + div {
display: block;
background: #efefef;
-moz-box-shadow: inset 3px 3px 10px #7d8e8f;
-webkit-box-shadow: inset 3px 3px 10px #7d8e8f;
box-shadow: inset 3px 3px 10px #7d8e8f;
margin-left: 20px;
padding: 10px;
/* чуточку анимации при появлении */
-webkit-animation:fade ease-in 0.5s;
-moz-animation:fade ease-in 0.5s;
animation:fade ease-in 0.5s;
}
/* анимация при появлении скрытых блоков */
@-moz-keyframes fade {
from { opacity: 0; }
to { opacity: 1 }
}
@-webkit-keyframes fade {
from { opacity: 0; }
to { opacity: 1 }
}
@keyframes fade {
from { opacity: 0; }
to { opacity: 1 }
}
.hide + label:before {
background-color: #1e90ff;
color: #fff;
content: "\002B";
display: block;
float: left;
font-size: 14px;
font-weight: bold;
height: 16px;
line-height: 16px;
margin: 3px 5px;
text-align: center;
width: 16px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
}
.hide:checked + label:before {
content: "\2212";
}
По всем раскладам, способ несомненно хорош, но как всегда, даже не удивительно нисколько, проблемы возникают с вечным тормозом прогресса, браузером IE, псевдо-класс checked
поддерживают только 9-я и более современные версии этого браузера. Для старых версий IE-шки, остаётся всё по-старому, вам придётся использовать javascript.
Используя скрытые чекбоксы, вы можете легко реализовать , блоки в стиле , слайдеры, галереи и многое другое.
С Уважением, Андрей
