Przejdź do treści

Centrum Kształcenia Zawodowego i Ustawicznego w Mrągowie

Lista wyboru select

poniedziałek,

Lista wyboru select

Jak wskazuje sama nazwa element select to lista, z której użytkownik może wybrać jedną lub kilka pozycji.

Znacznik select bez żadnych atrybutów i żadnej zawartości jest poprawny składniowo, jednak oczywiście nie ma sensu. Należy go uzupełnić o możliwe do wybrania opcje w postaci elementów option. Znacznik option powinien mieć atrybut value, zarówno ze względu na poprawność składniową, jak i dostępność. Dodatkowo lista wyboru powinna zostać opisana, służy do tego znacznik label. Aby skutecznie odebrać dane po stronie serwera, znacznik select powinien mieć atrybut name.

<label>Wybierz zawód:
<select name="zawod">
  <option value="ti">technik informatyk</option>
  <option value="tm">technik mechanik</option>
  <option value="tr">technik reklamy</option>
</select>
</label>

Domyślnie w polu select wybrana jest pierwsza opcja. Można to zmienić stosując atrybut selected dla wybranego elementu.

<label>Wybierz zawód:
<select name="zawod">
  <option value="ti">technik informatyk</option>
  <option value="tm">technik mechanik</option>
  <option value="tr" selected>technik reklamy</option>
</select>
</label>

Opcje dostępne z poziomu listy select można grupować, służy do tego znacznik optgroup z atrybutem label. Oczywiście widocznych etykiet nie można zaznaczyć.

<label>Wybierz system:
<select name="os">
  <optgroup label="Systemy Windows">
  	<option value="w10">Windows 10</option>
  	<option value="w8">Windows 8</option>
  	<option value="w7">Windows 7</option>
  </optgroup>
  <optgroup label="Systemy Linux">
  	<option value="deb">Debian GNU/Linux</option>
  	<option value="ubu">Ubuntu</option>
  	<option value="kno">Knoppix Linux</option>
  </optgroup>
</select>
</label>

Jeśli istnieje potrzeba zapewnienia możliwości zaznaczenia kilku opcji można skorzystać z dostępnego dla znacznika select atrybutu miltiple. Zaznaczanie kilku opcji jest podobne jak w przypadku jednoczesnego wyboru kilku plików w systemie operacyjnym. Może się to trochę różnić w różnych systemach, najczęściej trzeba przytrzymać wciśnięty klawisz control albo shift i klikać wybrane opcje lewym przyciskiem myszy. W tym miejscu trzeba się chwilę zastanowić, ilu tzw. przeciętnych użytkowników będzie miało problem z obsłużeniem opcji wielokrotnego wyboru. Co więcej, choć zaznaczanie kilku opcji jest możliwe z poziomu klawiatury (control, shift, spacja, klawisze strzałek), to jednak synchroniczne wciskanie kilku klawiszy naraz może być niemożliwe do wykonania w przypadku niektórych schorzeń. Warto rozważyć zastąpienie listy select wielokrotnego wyboru kilkoma polami input typu checkbox.

<label>Wybierz system:
<select name="os" multiple>
    <option value="w10">Windows 10</option>
    <option value="w8">Windows 8</option>
    <option value="w7">Windows 7</option>
    <option value="deb">Debian GNU/Linux</option>
    <option value="ubu">Ubuntu</option>
    <option value="kno">Knoppix Linux</option>
</select>
</label>
Artykuł: Konkurs z Języka Angielskiego Zawodowego

Konkurs z Języka Angielskiego Zawodowego

Artykuł: Testujemy kontroler ARGB

Testujemy kontroler ARGB

Artykuł: Olimpiada Zdrowia PCK

Olimpiada Zdrowia PCK

Artykuł: Zostań dawcą szpiku!

Zostań dawcą szpiku!

Artykuł: Przeglądarka Vivaldi

Przeglądarka Vivaldi

Nasze technikum

Technik informatyk

Szkoły dla dorosłych

Nasza szkoła

Pełna oferta edukacyjna

Oferta szkoły