Список

HTML выбор из списка и переключатели

Глава содержит примеры возможностей осуществлять выбор.

В меню слева вы найдете современные и очень подробные уроки по HTML.

Они позволят вам создать свой сайт с чистого листа , а пока смотрим немного ниже.

Основное содержание страницы

Прежде, чем приступить к HTML выбору, предлагаю ознакомиться с некоторой информацией.

Сначала про сайты, а потом о выборе

Персональные сайты чаще всего создаются в связи с несколькими основными причинами: а) желание пользователей интернета быть в ногу со временем; б) расширение кругозора в быстроразвивающейся технологической среде; в) стремление к самореализации посредством компьютера; г) самоподготовка для предстоящей профессиональной деятельности; д) расширение круга знакомств в сфере деятельности, на которой остановился выбор и в целом; е) деятельность, связанная
с развлечением, отдыхом или увлечением, практикующаяся в свободное время, независимо от выбора профессии.

Современная действительность такова, что появившиеся сегодня условия доступа к огромному количеству информации и другие новые возможности внесли изменения во все сферы общественной жизни и спровоцировали фундаментальные перемены в обществе. Все больше людей оценивают сеть интернет не только как дополнительную возможность для общения и развлечения, но и как средство развития профессиональных навыков, умственных способностей и заработка денег.

HTML выбор из выпадающего списка

HTML параметры, определяющие выбор

• – определяют список с позициями для выбора.
• size=»» – определяeт количество видимых позиций списка. Если значение равно 1 , мы имеем дело с выпадающим списком.
• – определяют позиции (пункты) списка.
• value=»» – содержит значение, которое будет отправлено формой по указанному url на обработку.
• selected=»selected» – выделяет позицию списка в качестве примера.

HTML выбор посредством переключателей

HTML параметры, определяющие выбор

• value=»» – определяет значение, которо будет отправлено формой по указанному url.
• checked=»checked» – отмечает в качестве примера одно из возможных значений.
• type=»submit» – определяет кнопку.
• type=»reset» – определяет кнопку сброса.
• value=»» – определяет надпись на кнопке.

Смотрите дополнительно об HTML выборе из списка в главе Формы и обработка формы

Автор проекта — Вася Митин | Дата публикации: Июль 2011 | Обновление: Ноябрь 2018

HTML коды: вопросы и ответы Возможность HTML выбора

© 2009 — 2023 | При использовании материала, ссылайтесь на мой сайт!
По всем вопросам обращайтесь: go@ab-w.net | О выборе в HTML? – Не вопрос!

Источник

Поле со списком

Поле со списком, называемое еще ниспадающее меню, один из гибких и удобных элементов формы. В зависимости от настроек, в списке можно выбирать одно или несколько значений. Преимущество списка в его компактности и универсальности, список может занимать одну или несколько строк, в нём можно выбирать одно или несколько значений. Поле со списком создается следующим образом.

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

Список множественного выбора

Раскрывающийся список

Атрибуты тега

Рассмотрим атрибуты тега , с помощью которых можно изменять представление списка.

multiple

Наличие multiple сообщает браузеру отображать содержимое элемента как список множественного выбора. Конечный вид списка зависит от используемого атрибута size . Если он отсутствует, то высота списка равна количеству пунктов, если значение size меньше числа пунктов, то появляется вертикальная полоса прокрутки.

Атрибут size отсутствует

Атрибут size равен 2

Для выбора нескольких значений списка применяются клавиши Ctrl и Shift совместно с курсором мыши.

В примере 1 показано создание списка множественного выбора.

Пример 1. Список множественного выбора

       
 Чебурашка Крокодил Гена Шапокляк Крыса Лариса  
  

name

Определяет уникальное имя элемента . Как правило, это имя используется для доступа к данным через скрипты или для получения выбранного значения серверным обработчиком.

size

Устанавливает высоту списка. Если значение size равно единице, то список превращается в раскрывающийся. Значение по умолчанию зависит от атрибута multiple . Если он присутствует, то размер списка равен числу элементов. Когда multiple нет, то значение атрибута size равно 1.

Атрибуты тега

Тег также имеет атрибуты, влияющие на вид списка, они представлены далее.

selected

Делает текущий пункт списка выделенным. Если у тега добавлен атрибут multiple , то можно выделять более одного пункта.

value

Определяет значение пункта списка, которое будет отправлено на сервер. На сервер отправляется пара «имя/значение», где имя задаётся атрибутом name тега , а значение — атрибутом value выделенных пунктов списка. Значение может как совпадать с текстом пункта, так быть и самостоятельным.

label

Предназначен для указания метки пункта списка, сокращённой по сравнению с текстом внутри . Если атрибут label присутствует, то текст внутри тега игнорируется и в списке выводится значение label . Браузер Firefox не поддерживает этот атрибут.

Создание списка показано в примере 2.

Пример 2. Использование списка

       
Выбери персонажа
 
 Чебурашка Крокодил Гена Шапокляк Крыса Лариса  
  

Группирование элементов списка

При достаточно обширном списке имеет смысл сгруппировать его элементы по блокам, чтобы обеспечить наглядность списка и удобство работы с ним. Для этой цели применяется тег . Он представляет собой контейнер, внутри которого располагаются теги объединённые в одну группу. Особенностью тега является то, что он не выделяется как обычный элемент списка, акцентируется с помощью жирного начертания, а все элементы, входящие в этот контейнер, смещаются вправо от своего исходного положения. Для добавления заголовка группы используется атрибут label , как показано в примере 3.

Пример 3. Группирование элементов списка

       
  Закуска Барская Раки, фаршированные по-царски Биточки в горшочке  Галушки славянские Пампушки украинские Жаркое по-харьковски  
  

Результат примера показан на рис. 1.

Рис. 1. Группированный список

Источник

Выпадающий список HTML: учимся создавать и задавать стили с помощью CSS

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

Текст, видимый пользователю, может отличаться от текста, указанного в атрибуте value . Вот, как создать выпадающий список:

• Выпадающий список создается с помощью тега ;
• Внутри тега определяются варианты для выбора с помощью тега ;
• В теге можно использовать атрибут value , чтобы получить доступ к выбранному варианту с помощью PHP , JS , Jquery и т.д.

Также можно задать класс CSS вместо того, чтобы использовать идентификатор для определения стиля выпадающего списка.

В следующем разделе я покажу примеры как использовать выпадающий список HTML в JavaScript / JQuery . В примерах также будет показано, как задавать стили с помощью CSS / CSS3 и фреймворка Bootstrap .

Как создать раскрывающийся список HTML — пример

В этом примере HTML select option используется для того чтобы создать выпадающий список HTML с тремя вариантами на выбор:

Посмотреть онлайн демо-версию и код

В приведенном выше примере для создания выпадающего списка используется следующая разметка:

Использование атрибута 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[“”] . Это код формы, используемый в примере:

 
 Select A Color: Maroon Green Yellow Blue Red  

А вот как PHP-скрипт используется, чтобы получить значение HTML select option :

Если в форме указан метод GET , тогда используйте PHP-массив $_GET[“”] .

Определение стилей выпадающего списка с помощью CSS

Теперь рассмотрим, как определить стили выпадающего списка , используя возможности CSS . В следующей демо-версии я использовал несколько простых свойств CSS и свойства градиента CSS3 :

Посмотреть онлайн демо-версию и код

Вместе с linear-gradient здесь использовано свойство box-shadow . Полный код CSS выглядит следующим образом:

Закругленные углы с помощью свойства border-radius

Для HTML select option мы зададим свойство CSS3 border-radius , чтобы сделать закругленные углы. Цветовая гамма также изменяется. Вы можете экспериментировать с рамками, шириной, полями и другими свойствами, как захотите:

Посмотреть онлайн демо-версию и код

Использование нескольких атрибутов и стилей CSS

Чтобы дать пользователям возможность выбирать из списка несколько вариантов, нужно использовать атрибут multiple . В приведенном выше примере может быть выбран только один вариант. При использовании multiple можно выбрать несколько вариантов, нажав клавишу CTRL :

Посмотреть онлайн демо-версию и код

Использование фреймворка Bootstrap и плагинов для создания красивых выпадающих списков

Если вы используете фреймворк Bootstrap , то у вас есть возможность применять плагины для создания крутых option HTML .

Один из таких плагинов — Bootstrap-Select . Он добавляет для выпадающего списка полезные функции. Например, можно выполнить поиск значения, вводя текст в поле. Это особенно полезно, если в выпадающем списке много вариантов.

Кроме этого все выбранные варианты помечаются галочками, и можно установить лимит на количество выбранных вариантов, используя атрибут multiple .

В приведенной демо-версии пользователь может выбрать два варианта из списка:

Посмотреть онлайн демо-версию и код

Демо-версия выпадающего списка с опцией поиска

Используя тот же плагин, можно предоставить пользователям возможность искать нужные варианты в списке HTML select option :

Посмотреть онлайн демо-версию и код

Вадим Дворников автор-переводчик статьи « HTML select dropdown: Learn to Create and style with CSS »

Пожалуйста, оставляйте ваши комментарии по текущей теме материала. Мы очень благодарим вас за ваши комментарии, отклики, лайки, подписки, дизлайки!

Источник