Главная→Windows 8→Выдвижной список html. Создание формы в HTML. Атрибуты тега OPTION
Выдвижной список html. Создание формы в HTML. Атрибуты тега OPTION
Как вы думаете, современный ли у вас дизайн сайта? Используете ли вы самые последние технологии или боитесь их? Возможно, вы думаете что это слишком сложно и даже лезть не хотите в эти дебри. Но на самом деле всё обстоит куда иначе. Ведь новые технологии (я имею ввиду сейчас CSS3) пришли для того, чтобы сделать жизнь веб-дизайнера легче и привнести свои дополнительные возможности при создании внешнего вида сайта. Сегодня поговорим о том несколько видов дизайна для выпадающего списка.
Выпадающий список для сайта
Не самое простое решение я рассматривал в январе этого года 🙂 :
Скачать
Что хочу сказать сразу по поводу демо: каждый отдельный вид списка находится в отдельном файле HTML, что позволяет без труда взять код, который вам нужен. Также в отдельных файлах расположены стили для каждого дизайна списка. Вам лишь осталось выбрать тот, который вам больше всего нравится и найти его файл стилей 🙂 .
В разметке списка ничего необычного:
1
2
3
4
5
6
7
8
9
10
<label
class
=
"select-label"
>
Выберите своего динозавра:</
label
>
<select
class
=
"cs-select cs-skin-rotate"
>
<option
value
=
"1"
>
Стегозавр</
option
>
<option
value
=
"2"
>
Велоцираптор</
option
>
<option
value
=
"3"
>
Спинозавр</
option
>
<option
value
=
"4"
>
Археоптерикс</
option
>
<option
value
=
"5"
>
Апатозавр</
option
>
</
select
>
</
section>
Как говорится: он и в Африке . Внутри него есть теги , в которых находятся элементы списка.
В некоторых примерах вы можете увидеть необычные атрибуты, типа data-class
или data-link
. Здесь нечего боятся, они нужны для правильного функционирования соответствующего списка, потому что там может храниться дополнительная информация.
Пройдемся немного по стилям.
Основные стили находятся в файле cs-select.css
. Здесь находятся стили которые придают списку обычный вид, который мы привыкли видеть.
А для того, чтобы сделать стиль необычным и оригинальным нужно использовать дополнительные свойства. Например для первого примера () используются следующие стили:
А находятся эти стили в отдельном файле (для удобства) cs-skin-border.css
.
Вывод
Чего только не сделаешь ради неповторимого дизайна своего сайта! И главное — не бойтесь экспериментировать с дизайном, постоянно улучшайте его. Вдруг вы создадите (путем экспериментов) именно тот, который понравится вашим пользователям и они скажут «Вау, мне нравится этот дизайн, что же еще интересного есть на этом сайте!» 😉 .
Благодаря тегу
Какие есть атрибуты у тега select?
Тег имеет три полезных атрибута (остальные рассматривать не будем, про них уже я говорил). Первый атрибут multiple , благодаря нему можно сделать возможность выбора нескольких элементов списка. Чтобы выбирать несколько элементов, нужно зажать shift или ctr и наживать мышкой на нужные элементы. Далее пример применения атрибута multiple:
Второй атрибут required , с помощью его можно «сказать» браузеру, что список должен быть выбран перед отправкой формы, иначе браузер запретит отправлять форму, и выведет вам соответствующее сообщение. Вид этого сообщения зависит полностью от браузера и пользователь не может его изменять. Далее пример применения атрибута required:
Третий атрибут size , с помощью его можно указать количество отображаемых элементов списка. Атрибут size может содержать только целое число. Атрибут size трансформирует список, например, если он равен 1, то тег отображается как «выпадающий список», а если атрибут size больше 1, то раскрывающийся список отображается как «список с прокруткой». Далее два примера применения атрибута size:
Тег option HTML
используется для создания выпадающего списка, с помощью которого пользователь может выбрать один вариант из заранее определенного набора значений.
Текст, видимый пользователю, может отличаться от текста, указанного в атрибуте value
. Вот, как можно создать выпадающий список:
Выпадающий список создается с помощью тега ;
Внутри тега определяются варианты для выбора с помощью тега
В теге
Также можно задать класс CSS
вместо того, чтобы использовать идентификатор для определения стиля выпадающего списка.
В следующем разделе я покажу примеры использования выпадающего списка HTML
в JavaScript / JQuery
. В примерах также будет показано, как задавать стили с помощью CSS / CSS3
и фреймворка Bootstrap
.
Пример создания простого выпадающего списка
В этом примере HTML select option
используется для создания выпадающего списка с тремя вариантами на выбор:
В приведенном выше примере для создания выпадающего списка используется следующая разметка:
Использование атрибута value
Как упоминалось ранее, значение атрибута value
может отличаться от текста, выводимого на странице. Например, можно вывести для пользователей названия стран или цветов, а в атрибуте value
использовать шорткоды.
В следующем примере мы создадим выпадающий список с атрибутом value
:
Посмотреть онлайн демо-версию и код
Для тега используется следующий код:
Пример получения доступа к выбранному варианту в JavaScript
Теперь создадим пример получения доступа к значению выбранного варианта и выполнения некоторых действий. Тот же список, что и в приведенном выше примере, мы создаем с вариантами выбора цвета. После выбора нажмите кнопку, чтобы применить этот цвет к документу:
Посмотреть онлайн демо-версию и код
Для option value HTML
используется следующий код:
Следующая строка кода используется в JavaScript
, чтобы получить доступ к значению атрибута value
варианта :
var seltheme = document.getElementById(“selcolor”).value;
При нажатии кнопки вызывается функция JS
, которая присваивает выбранное в выпадающем списке значение переменной. Это значение используется для применения цвета к текущему документу.
Получение доступа к видимому тексту в JQuery
На этот раз я буду использовать JQuery
, чтобы получить доступ к значению выбранного варианта: как к тексту, так и к value
. В этой демо-версии я буду получать доступ к видимому тексту в теге option
в HTML
:
Посмотреть онлайн демо-версию и код
В коде для каждого варианта в теге значение отличается от текста. После того, как вы выберете цвет, jQuery
отображает видимый текст в предупреждении. Код тега следующий:
Вот как обеспечивается доступ к этому значению в 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
выглядит следующим образом:
Закругленные углы с помощью свойства border-radius
Для HTML select option
мы зададим свойство CSS3 border-radius
, чтобы сделать закругленные углы. Цветовая гамма также изменяется. Вы можете экспериментировать с рамками, шириной, полями и другими свойствами, как захотите:
Посмотреть онлайн демо-версию и код
Использование нескольких атрибутов и стилей CSS
Чтобы дать пользователям возможность выбирать из списка несколько вариантов, нужно использовать атрибут multiple
. В приведенном выше примере может быть выбран только один вариант. При использовании multiple
можно выбрать несколько вариантов, нажав клавишу CTRL
:
Посмотреть онлайн демо-версию и код
Предназначен для создания списка предложенных пунктов, из которого пользователь может выбрать один или несколько.
Ограничивается тегами ….
Атрибуты тега
autofocus
Автоматическое получение фокуса при загрузке страницы. Значение можно задать тремя способами:
.........
disabled
Блокирует выбор из списка. Значение можно задать тремя способами:
.........
multiple
Позволяет выбрать несколько пунктов списка одновременно. Следует обратить внимание, что при множественном выборе в
потоке данных от одной формы может присутствовать несколько переменных с одним и тем же именем.
Ваша программа обработки должна предусматривать подобные ситуации и корректно их обрабатывать.
name
Имя списка. Обязательный атрибут.
required
Обязательно должен быть выбран пункт с непустым значением. Если это не выполнено, то браузер выведет сообщение,
а форма на сервер отправлена не будет. Вид и содержание сообщения зависит от браузера и меняться пользователем не может
(не работает в IE и Safari).
size
Вертикальный размер окна списка.
Если атрибут опущен или его значение равно 1,
выводится всплывающий список пунктов. Если
указано число больше 1, то пункты списка выводятся в
окне с полосой прокрутки. Если значение атрибута
больше, чем фактическое количество пунктов
списка, то добавляются пустые пункты. При их выборе
пользователем возвращаются пустые поля.
Пункт списка
Каждый пункт списка ограничивается тегами . Закрывающий тег необязателен.
Атрибуты тега
disabled
Блокирует выбор пункта списка.
label
Метка пункта списка. Если указан атрибут label, то в списке выводится его значение вместо текста внутри тега