4.5. Tworzenie pól wyboru i list rozwijanych

W czwartej lekcji z serii dotyczącej formularzy, będziemy zgłębiać tajniki tworzenia pól wyboru oraz list rozwijanych. Te elementy formularzy umożliwiają użytkownikom dokonywanie wyborów spośród dostępnych opcji. Zapraszam do zapoznania się z omówieniem, przykładami oraz kodem, który pomoże Ci opanować te ważne aspekty tworzenia interaktywnych formularzy.

Tworzenie pól wyboru

Znaczenie pól wyboru w formularzach: Pola wyboru pozwalają użytkownikom na wybór jednej lub wielu opcji spośród dostępnych możliwości.

Użycie znacznika <select>: Tworzenie pola wyboru odbywa się za pomocą znacznika <select>, który otacza opcje do wyboru.

Dodawanie opcji za pomocą znacznika <option>: Każda opcja jest definiowana za pomocą znacznika <option>, a tekst opcji znajduje się między znacznikami otwierającym i zamykającym.

Przykład:

<select>
  <option value="apple">Jabłko</option>
  <option value="banana">Banan</option>
  <option value="orange">Pomarańcza</option>
</select>

Tworzenie list rozwijanych

Wprowadzenie do list rozwijanych: Listy rozwijane to alternatywny sposób prezentacji opcji do wyboru.

Użycie znacznika <select> i <option>: Tworzenie listy rozwijanej odbywa się podobnie jak pól wyboru, używając znaczników <select> i <option>.

Dodawanie domyślnego wyboru: Możesz ustawić domyślną opcję, która będzie wyświetlana jako pierwsza w liście.

Przykład:

<select>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>

Ustawianie wielokrotnego wyboru

Omówienie zezwalania na wybór wielu opcji: Dzięki temu użytkownicy mogą wybrać więcej niż jedną opcję.

Użycie atrybutu „multiple”: Aby umożliwić wielokrotny wybór, używamy atrybutu multiple w znaczniku <select>.

Praktyczne zastosowanie: Przykładem może być wybór wielu kategorii produktów w formularzu zamówienia.

<select multiple>
  <option value="red">Czerwony</option>
  <option value="green">Zielony</option>
  <option value="blue">Niebieski</option>
</select>

Grupowanie opcji

Stworzenie logicznych grup opcji: Grupowanie opcji w polach wyboru i listach rozwijanych ułatwia użytkownikom nawigację.

Użycie znacznika <optgroup>: Definiowanie grup odbywa się za pomocą znacznika <optgroup>.

<select>
  <optgroup label="Warzywa">
    <option value="carrot">Marchewka</option>
    <option value="tomato">Pomidor</option>
  </optgroup>
  <optgroup label="Owoce">
    <option value="apple">Jabłko</option>
    <option value="banana">Banan</option>
  </optgroup>
</select>

Przykładowy formularz z opcjami wyboru i przyciskiem

Oczywiście, oto przykład formularza zawierającego pole wyboru (checkbox) oraz listę rozwijaną (select) w języku HTML:

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Przykładowy Formularz</title>
</head>
<body>
    <h1>Formularz Wyboru i Lista Rożwijana</h1>
    <form>
        <p>Wybierz swoje ulubione kolory:</p>
        <label>
            <input type="checkbox" name="color" value="red">
            Czerwony
        </label>
        <label>
            <input type="checkbox" name="color" value="blue">
            Niebieski
        </label>
        <label>
            <input type="checkbox" name="color" value="green">
            Zielony
        </label>

        <p>Wybierz swój ulubiony owoc:</p>
        <select name="fruit">
            <option value="apple">Jabłko</option>
            <option value="banana">Banan</option>
            <option value="orange">Pomarańcza</option>
            <option value="strawberry">Truskawka</option>
            <option value="grape">Winogrono</option>
        </select>

        <button type="submit">Wyślij</button>
    </form>
</body>
</html>

Ten formularz zawiera pole wyboru umożliwiające wybranie ulubionych kolorów oraz listę rozwijaną, w której można wybrać ulubiony owoc. Po wypełnieniu formularza użytkownik może kliknąć przycisk „Wyślij”.

Pola wyboru z obrazkami zamiast tekstu

możesz użyć znacznika <img> w połączeniu z polem wyboru typu checkbox, aby osiągnąć efekt, który opisałeś. Możesz umieścić znacznik <img> wewnątrz znacznika <label>, który jest powiązany z polem wyboru. W ten sposób obrazek będzie działał jaketykietapola wyboru, a użytkownik będzie mógł kliknąć na obrazek, aby zaznaczyć lub odznaczyć pole wyboru. Oto przykład:

<form>
  <label>
    <input type="checkbox" name="option1" value="value1">
    <img src="sciezka/do/obrazka1.jpg" alt="Obrazek 1" width="50" height="50">
  </label>
  
  <label>
    <input type="checkbox" name="option2" value="value2">
    <img src="sciezka/do/obrazka2.jpg" alt="Obrazek 2" width="50" height="50">
  </label>
  
  <!-- Dodaj inne opcje obrazków tutaj -->
  
  <input type="submit" value="Wyślij">
</form>

W powyższym przykładzie, każde pole wyboru jest opakowane w znacznik <label>, który zawiera również znacznik <img>. Po kliknięciu na obrazek pole wyboru zostanie zaznaczone lub odznaczone, a użytkownik będzie mógł wybrać żądane obrazki jako opcje formularza.