Тег select у HTML: як створити випадний список

Оригінальна публікація: HTML Select Tag – How to Make a Dropdown Menu or Combo List

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

Зазвичай тег select розташовується у формі, а варіанти вибору закодовані в тегу <option>. Це також може бути окремий елемент, який однаково буде пов’язаний з формою за допомогою одного зі своїх спеціальних атрибутів.

У цій публікації ми пройдемось по створенню випадного списку за допомогою тегу select, і ви зможете використовувати його у своїх проєктах. Я також торкнуся стилізації тегу select, оскільки це надзвичайно складно.

Ось інтерактивна платформа про те, як створити випадний список у HTML

Атрибути тегу select

Перед тим, як ми зануримось у створення випадного списку за допомогою тегу select, нам потрібно обговорити його атрибути.

Ось його атрибути:

• name потрібно прикріплювати до кожного елементу керування, оскільки його використовують як посилання на дані після їх надсилання на сервер;
• multiple дозволяє користувачу обирати декілька варіантів зі випадного списку;
• required зазвичай використовують для валідації. Завдяки цьому атрибуту форма не буде надіслана, якщо користувач не обере принаймні одну відповідь з випадного списку;
• disabled забороняє користувачу взаємодіяти з варіантами відповіді;
• size виражений у числах; його використовують, щоб вказати кількість видимих відповідей;
• autofocus вказує, що вхідні дані отримують фокус при завантаженні сторінки.

Як створити випадний список із тегом select

Щоб створити випадний список за допомогою тегу select, спочатку потрібно створити елемент form. Причина в тому, що ви також матимете кнопку відправки для надсилання даних на сервер.

<form action="#">
      <label for="lang">Language</label>
      <select name="languages" id="lang">
        <option value="javascript">JavaScript</option>
        <option value="php">PHP</option>
        <option value="java">Java</option>
        <option value="golang">Golang</option>
        <option value="python">Python</option>
        <option value="c#">C#</option>
        <option value="C++">C++</option>
        <option value="erlang">Erlang</option>
      </select>
      <input type="submit" value="Submit" />
</form>

Я додав трішки CSS, щоб відцентрувати список та кнопку, і надав тілу світло-сірого фону:

body {
     display: flex;
     align-items: center;
     justify-content: center;
     margin: 0 auto;
     height: 100vh;
     background-color: #f1f1f1;
   }

input {
     display: flex;
     align-items: center;
     justify-content: center;
     margin: 0 auto;
   }

Аби все було продуманіше та доступніше, до елемента label можна додати випадний список, щоб на ньому був фокус при натисканні на текст мітки. Для цього можна використати такий код:

<form action="#">
      <label for="lang">Language</label>
      <select name="languages" id="lang">
        <option value="javascript">JavaScript</option>
        <option value="php">PHP</option>
        <option value="java">Java</option>
        <option value="golang">Golang</option>
        <option value="python">Python</option>
        <option value="c#">C#</option>
        <option value="C++">C++</option>
        <option value="erlang">Erlang</option>
      </select>
      <input type="submit" value="Submit" />
</form>

Я написав символ # як значення атрибута action, щоб ви не отримали 404 при натисканні на кнопку надсилання.

А зараз трішки змінимо CSS:

 body {
     display: flex;
     align-items: center;
     justify-content: center;
     margin: 0 auto;
     height: 100vh; 
     background-color: #f1f1f1;
   }

input {
     display: flex;
     align-items: center;
     justify-content: center;
     margin: 0 auto;
   }

label {
     display: flex;
     align-items: center;
     justify-content: center;
     margin: 0 auto;
   }

select {
     margin-bottom: 10px;
     margin-top: 10px;
   }

Отримаємо такий результат:

Робота не закінчується тут. Один із елементів випадного списку з’являється за замовчуванням і буде вибраний, якщо користувач натисне кнопку надсилання одразу після переходу на сторінку.

Однак це поганий досвід користування. Цього можна позбутись, вказавши «select a language» як перший елемент списку.

 <form action="#">
      <label for="lang">Language</label>
      <select name="languages" id="lang">
        <option value="select">Select a language</option>
        <option value="javascript">JavaScript</option>
        <option value="php">PHP</option>
        <option value="java">Java</option>
        <option value="golang">Golang</option>
        <option value="python">Python</option>
        <option value="c#">C#</option>
        <option value="C++">C++</option>
        <option value="erlang">Erlang</option>
      </select>
      <input type="submit" value="Submit" />
</form>

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

Це можна змінити за допомогою атрибута size, який за замовчуванням показуватиме певну кількість елементів і смугу прокручування.

Це також дає змогу позбутися фіктивного першого елемента, оскільки деякі з елементів будуть видимі користувачеві автоматично.

 <form action="#">
      <label for="lang">Language</label>
      <select name="languages" id="lang" size="4">
        <option value="javascript">JavaScript</option>
        <option value="php">PHP</option>
        <option value="java">Java</option>
        <option value="golang">Golang</option>
        <option value="python">Python</option>
        <option value="c#">C#</option>
        <option value="C++">C++</option>
        <option value="erlang">Erlang</option>
      </select>
      <input type="submit" value="Submit" />
</form>

За допомогою атрибута multiple ви можете дозволити користувачеві вибирати декілька елементів з випадного списку.

 <form action="#">
      <label for="lang">Language</label>
      <select name="languages" id="lang" multiple>
        <option value="javascript">JavaScript</option>
        <option value="php">PHP</option>
        <option value="java">Java</option>
        <option value="golang">Golang</option>
        <option value="python">Python</option>
        <option value="c#">C#</option>
        <option value="C++">C++</option>
        <option value="erlang">Erlang</option>
      </select>
      <input type="submit" value="Submit" />
</form>

Це робить 4 елементи видимими за замовчуванням. Щоб вибрати декілька елементів, користувач має натиснути клавішу shift або ctrl, а потім вибрати відповіді за допомогою миші.

Це не все, що ви можете зробити за допомогою тегів <select> та <option>. Ви також можете створити багатошарове поле вибору з елементом <optgroup> всередині тегу <select>.

Ви можете перетворити вже створений список у багатошарове поле вибору:

<form action="#">
      <label for="lang">Language</label>
      <select name="languages" id="lang">
        <optgroup label="first-choice">
          <option value="select">Select a language</option>
          <option value="javascript">JavaScript</option>
          <option value="php">PHP</option>
          <option value="java">Java</option>
          <option value="golang">Golang</option>
        </optgroup>
        <optgroup label="second-choice">
          <option value="python">Python</option>
          <option value="c#">C#</option>
          <option value="C++">C++</option>
          <option value="erlang">Erlang</option>
        </optgroup>
      </select>
      <input type="submit" value="Submit" />
</form>

Як стилізувати елемент select

Стилізація елемента select часто викликає плутанину та непослідовно відображається у браузерах. Однак ви завжди можете спробувати наступне:

 <form action="#">
      <label for="lang">Language</label>
      <select name="languages" id="lang">
        <option value="select">Select a Language</option>
        <option value="javascript">JavaScript</option>
        <option value="php">PHP</option>
        <option value="java">Java</option>
        <option value="golang">Golang</option>
        <option value="python">Python</option>
        <option value="c#">C#</option>
        <option value="C++">C++</option>
        <option value="erlang">Erlang</option>
      </select>
      <input type="submit" value="Submit" />
</form>

 select {
        margin-bottom: 10px;
        margin-top: 10px;
        font-family: cursive, sans-serif;
        outline: 0;
        background: #2ecc71;
        color: #fff;
        border: 1px solid crimson;
        padding: 4px;
        border-radius: 9px;
      }

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

• сімейство шрифтів cursive та білий колір;
• outline зі значенням 0, щоб видалити виділення при фокусі;
• зелений фон;
• 1-піксельний малиновий кордон;
• 4-піксельний радіус кордону, щоб трішки заокруглити край;
• 4-піксельний відступ, щоб між елементами було більше місця.

Тепер поле вибору виглядає краще:

Висновок

Тег select дуже корисний, коли ви створюєте випадні списки в HTML. Це як радіокнопка і прапорець в одному пакеті.

Пам’ятайте, що з радіокнопками ви можете обрати лише один елемент з списку, а з прапорцем — декілька. select гнучкіший, оскільки ви можете налаштувати його для прийняття лише одного або декількох елементів.

Єдина проблема тегу select — його важко стилізувати. Розумним рішенням є використання бібліотеки CSS, яка пропонує чудові класи для стилізації форми разом із елементом select.

Сподіваюсь, завдяки цій публікації ви детальніше ознайомились з тегом select та тепер можете використовувати його у своїх проєктах.

Дякую, що прочитали. Продовжуйте програмувати.