Список, що випадає в html вчимося створювати і задавати стилі за допомогою css, html

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

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

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

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

Приклад створення простого списку

У цьому прикладі HTML select option використовується для створення списку з трьома варіантами на вибір:

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

У наведеному вище прикладі для створення списку використовується наступна розмітка:

Використання атрибута value

Як згадувалося раніше, значення атрибута value може відрізнятися від тексту, що виводиться на сторінці. Наприклад, можна вивести для користувачів назви країн або квітів, а в атрибуті value використовувати шорткоди.

У наступному прикладі ми створимо список, що випадає з атрибутом value:

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

для тега використовується наступний код:

Тепер створимо приклад отримання доступу до значення обраного варіанту і виконання деяких дій. Той же список, що і в наведеному вище прикладі, ми створюємо з варіантами вибору кольору. Після вибору натисніть кнопку, щоб застосувати цей колір до документа:

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

Для option value HTML використовується наступний код:

При натисканні кнопки викликається функція JS. яка присвоює вбрання в випадаючому списку значення змінної. Використовуйте цей параметр для застосування кольору до поточного документа.

Отримання доступу до видимого тексту в JQuery

На цей раз я буду використовувати JQuery. щоб отримати доступ до значення обраного варіанту: як до тексту, так і до value. У цій демо-версії я буду отримувати доступ до видимого тексту в тезі option в HTML:

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

У коді для кожного варіанта в тезі

значення відрізняється від тексту. Після того, як ви виберете колір, jQuery відображає видимий текст в попередженні. код тега наступний:

Також можна отримати доступ до значення за допомогою JQuery-методу $ .val ():

Замініть цей рядок у наведеному вище прикладі, і код буде відображати шорткод / ​​значення кольору в атрибуті value. а не видимий текст.

Приклад отримання значення в скрипті PHP

У цьому прикладі отримання значення обраного зі списку варіанти форма створюється за допомогою тега

в розділі розмітки. Після вибору кольору зі списку натисніть на кнопку "Submit". Дані форми будуть передаватися в той же PHP-файл. після чого відобразиться вибраний колір:

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

Метод форми, який використовується в прикладі - POST. тому можна отримати значення форми за допомогою масиву PHP $ _POST [ ""]. Це код форми, який використовується в прикладі:

А ось як 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» був підготовлений дружною командою проекту Сайтобудування від А до Я.

• Що значить миритися - значення слів
• Як підняти імунітет дитині в домашніх умовах, все про дітей і сім’ю
• Опік горла симптоми і чим лікувати в домашніх умовах
• Залізні і пластикові манежі
• Стівен Хокінг (stephen hawking) біографія, фото, особисте життя
• Використання і розвиток персоналу
• Чим наливка відрізняється від настоянки, вічні питання, питання-відповідь, аргументи і факти
• Складової принцип російської графіки - студопедія
• Як запросити на побачення однокласницю

Cookie на сайті

Ми використовуємо cookie для коректної роботи сайту та покращення сервісу.