KATEGORIA:

Lista rozwijana – HTML5

lista rozwijana html5

ELEMENT SELECT

Aby dodać listę rozwijaną na stronę internetową, należy skorzystać ze znacznika <select>. Każda z możliwych opcji, musi znajdować się w tagu <option>. Do <select> dodajemy atrybut name – nazywamy nim naszą listę, natomiast do <option> dodajemy atrybut value – zazwyczaj jest to skrócona nazwa opcji – bardziej intuicyjna.

<select name="nazwa_calej_listy">
    <option value="1">Pierwsza opcja</option>
    <option value="2">Druga opcja</option>
    <option value="3">Trzecia opcja</option>
</select>

Domyślnie na naszej liście pokazuje się pierwsza opcja. Możemy sami zdecydować, która opcja będzie widoczna, używając atrybutu selected.

<select name="nazwa_calej_listy">
    <option value="1">Pierwsza opcja</option>
    <option value="2">Druga opcja</option>
    <option value="3" selected>Trzecia opcja</option>
</select>

Ponadto nasze opcje możemy grupować, używając tagu <optgroup>

<select>
  <optgroup label="Wroclawskie teatry">
    <option value="capitol">Teatr Muzyczny Capitol</option>
    <option value="tpl">Teatr Polski we Wroclawiu</option>
    <option value="wtw">Wroclawski Teatr Wspolczesny</option>
  </optgroup>
  <optgroup label="Wroclawskie uczelnie">
    <option value="uniwroc">Uniwersytet Wroclawski</option>
    <option value="pwr">Politechnika Wroclawska</option>
    <option value="up">Uniwersytet Przyrodniczy</option>
  </optgroup>
</select>

SELECT – WIELOKROTNY WYBÓR

Czasami potrzebna jest możliwość wyboru wielu opcji z listy rozwijanej. Do znacznika <select> dodajemy wtedy atrybut multiple. Aby dokonać zaznaczenia kilku opcji, należy przytrzymać klawisz ctrl lub shift podczas zaznaczania.

<select name="nazwa_calej_listy" multiple>
    <option value="1">Pierwsza opcja</option>
    <option value="2">Druga opcja</option>
    <option value="3">Trzecia opcja</option>
</select>

SELECT – LICZBA ELEMENTÓW DO WYŚWIETLENIA

Atrybut size określa, ile elementów ma zostać wyświetlonych. Ten atrybut musi być liczbą dodatnią większą od zera. Wyświetla się lista ograniczona do wybranej liczby, którą możemy przesuwać za pomocą suwaków.

<select name="nazwa_calej_listy" size="4">
    <option value="1">Pierwsza opcja</option>
    <option value="2">Druga opcja</option>
    <option value="3">Trzecia opcja</option>
    <option value="4">Czwarta opcja</option>
    <option value="5">Piata opcja</option>
    <option value="6">Szosta opcja</option>
</select>

SELECT – REQUIRED

Jeżeli używamy na stronie formularza, w którym użytkownik ma wpisać imię i wybrać płeć, możemy określić, że formularz nie zostanie przesłany jeżeli płeć nie zostanie wybrana z listy. Używamy do tego celu atrybutu required.

<select name="plec" required>
    <option value="man">Mezczyzna</option>
    <option value="woman">Kobieta</option>
</select>

SELECT – ATRYBUT FORM

Używamy go, aby jednoznacznie określić właściciela listy rozwijanej, którym może być formularz.

SELECT – ATRYBUT AUTOFOCUS

Używamy go, aby kursor od razu był na naszej liście, czyli po wczytaniu strony, jeżeli klikniemy na strzałkę w dół lub tab, to nie zjedziemy niżej na stronie, ale zaznaczymy kolejną opcję na liście.

<select name="plec" autofocus>
    <option value="man">Mezczyzna</option>
    <option value="woman">Kobieta</option>
</select>

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *