Вітаю всіх читачів мого блогу. Сьогодні я вам розповім, як робити в html випадає, які теги і атрибути потрібно використовувати, а також для яких цілей це вам може знадобитися.
Тег select і створення списку
Отже, що випадає список в html створюється за допомогою парного тега select. в який поміщаються парні теги option. Саме в них записуються всі варіанти, які будуть запропоновані при кліці на список. приклад:
При цьому те, що виводиться між відкриває і закриває частиною option. ви побачите на екрані, а значення, яке міститься в атрибуті value. буде відправлено на сервер або оброблено за допомогою скрипта.
Список в html може бути звичайним, і з множинним вибором. Щоб зробити можливість вибирати кілька пунктів, потрібно додати в select порожній атрибут multiple. Щоб вибрати кілька значень, утримуйте ctrl і тисніть ліву кнопку миші.
Інший корисний атрибут - size. Він дозволяє вибирати, скільки рядків буде показувати в списку.
Required - html5-атрибут. Якщо він заданий, форма не буде відправлена без вибору значення із списку. Загалом, він стає обов'язковим для вибору. Поки атрибут працює далеко не у всіх браузерах.
Атрибути тега option
Власне, select служить лише контейнером для пунктів списку, самі вони задаються за допомогою тега option. У нього є параметр value. як ми вже з'ясували, але крім цього ще є й інші. наприклад:
Disabled - робить пункт списку недоступним для вибору. Відображається він буде, але клікнути на нього не можна.
Selected - елемент буде обраним за замовчуванням. У звичайному списку цей атрибут без значення можна задати тільки одним пунктом, у множині - кільком.
Важливе уточнення для правильної роботи
Якщо результат вибору потрібно буде відправити на сервер або обробити через скрипти, то пишіть select в форму, щоб не виникало ніяких помилок. Справа в тому, що список, що розкривається спочатку створювався саме як один з елементів форми.
Для чого потрібен select
Зазвичай він може стати в нагоді вам, якщо ви робите на своєму сайті реєстрація, або хочете провести опитування. Елемент має недолік - він не дуже добре змінює зовнішній вигляд через css.
За замовчуванням при натисканні на список з'являється синя рамка, таким же кольором виділяються ті пункти списку, на які наведений курсор. Щоб при натисканні рамка не з'являлася, або виділялася іншим кольором, можна написати такий селектор:
Тепер рамка буде помаранчевою.
Option теж можна стилізувати, але ось при наведенні на пункт його фон стає синім і через стилі це чомусь не змінюється.
До речі, може хтось із вас знає, як змінити фоновий колір при наведенні на пункт через css?
Якраз для цього і потрібно використовувати програмування, а саме цикл. Ну да ладно, це вже тема для іншої розмови, а на сьогодні це вся інформація, яку я хотів вам повідомити. З іншими основними тегами в html ви можете познайомитися тут.
Цікаве зі світу сайтобудування
Ви підписалися. Дякую.