Przejdź na stronę publikacji Niezbędnika Nauczyciela

Listy rozwijane, selektor plików, dane ukryte

Na tych zajęciach kontynuujemy poznawanie kolejnych pól formularzy.

Lista rozwijana typu select

Jak sama nazwa wskazuje jest to lista, z której użytkownik może wybrać jedną lub kilka pozycji. Podstawowa postać tego elementu jest następująca:

<select name="nazwa_listy">
    <option>Pierwsza pozycja listy</option>
    <option>Druga pozycja listy</option>
    <option>Trzecia pozycja listy</option>
    ...
</select>

Ćwiczenie 2_6_4_1

Wykonaj stronę, na której stosując element select, poprosisz użytkownika o wskazanie miejsca, gdzie najlepiej mu się wypoczywa. Zastosuj następujący kod:

<form action="mailto:jan_kowalski@example.com" method="post" enctype="text/plain">
  <select name="lista_1">
    <option>Nad morzem</option>
    <option>Nad jeziorem</option>
    <option>W lesie</option>
    <option>Na wsi</option>
    <option>W mieście</option>
  </select>
  <input type="submit" name="przycisk_1" value="Ok" />
</form>

Tak powinna wyglądać wykonana strona:

Zwróć uwagę, że wysłany został tekst wybranej opcji <option>tekst</option>

Powyższy sposób wysyłania danych jest jednak niewystarczający dla PHP - należy dla elementów option dodatkowo wprowadzić atrybut value, jeżeli zaś stosujemy atrybut multiple (patrz poniżej), to nazwę należy zapisać w postaci nazwa_listy[].

Atrybuty elementu select

  • autofocus, disabled, required - poznaliśmy wcześniej;
  • multiple="multiple" - umożliwia wybranie kilku pozycji z listy;
  • size="" - ile pozycji listy ma być pokazywane (domyślnie 0);

Podział listy na kategorie znacznikiem optgroup - grupy opcji

Znacznik ten stosuje się następująco:

<select name="nazwa_listy[]">
    <optgroup label="Pierwsza kategoria">
      <option value="pozycja_1">Pierwsza pozycja listy</option>
      <option value="pozycja_2">Druga pozycja listy</option>
      <option value="pozycja_3">Trzecia pozycja listy</option>
    </optgroup>
    <optgroup label="Druga kategoria">
      <option value="pozycja_4">Czwarta pozycja listy</option>
      <option value="pozycja_5">Piąta pozycja listy</option>
      <option value="pozycja_6">Szósta pozycja listy</option>
    </optgroup>
</select>

Ćwiczenie 2_6_4_2

Sprawdź działanie atrybutów multiple, size oraz optgroup. Zastosuj następujący kod:

<p>Wybierz miejsca, w którym najlepiej wypoczywasz</p>
<form action="mailto:jan_kowalski@example.com" method="post" enctype="text/plain">
  <select name="lista_1[]" size="7" multiple="multiple">
    <optgroup label="Nad wodą">
      <option value="nad_morzem">Nad morzem</option>
      <option value="nad_jeziorem">Nad jeziorem</option>
    </optgroup>
    <optgroup label="Na lądzie">
      <option value="w_lesie">W lesie</option>
      <option value="na_wsi">Na wsi</option>
      <option value="w_miescie">W mieście</option>
    </optgroup>
  </select>
  <input type="submit" name="przycisk_1" value="Ok" />
</form>

Tak powinna wyglądać wykonana strona:

  • Widzimy całą listę, ponieważ ustawiliśmy size="7";
  • możemy zaznaczać i wysyłać kilka pozycji listy, ponieważ ustawiliśmy multiple="multiple";
  • nazwy kategorii nie dają się zaznaczać, mają znaczenie tylko wizualne;
  • atrybut label="" określa nazwę grupy opcji.

Lista podpowiedzi datalist

Pełni zupełnie inną rolę jak lista typu select:

  • sama w sobie jest niewidoczna, zastępuje listę podpowiedzi automatycznie pokazywaną pod polem formularza, jeżeli autocomplete="on";
  • za pomocą tej listy nic nie wysyłamy, ułatwiamy jedynie użytkownikowi wypełnianie formularza - nawet jeżeli użytkownik pierwszy raz wypełnia formularz, od razu zobaczy podpowiedzi, które może wpisać w określonych polach;
  • datalist występuje w parze z polem typu input.

Konstrukcja datalist na przykładzie pola typu text jest następująca:

<input type="text" name="nazwa_pola" value="" list="identyfikator">
<datalist id="identyfikator">
  <option>Podpowiedź 1</option>
  <option>Podpowiedź 2</option>
  ...
</datalist>

Taki układ zadziała, jeżeli wartość atrybutu id będzie równa wartości atrybutu list - wtedy datalist oraz pole typu input "widzą się", stanowią parę.

Ćwiczenie 2_6_4_3

Sprawdź działanie elementu datalist w połączeniu z polem typu text. Zastosuj następujący kod:

<p>Wpisz miejsce, w którym najlepiej wypoczywasz</p>
<form action="mailto:jan_kowalski@example.com" method="post" enctype="text/plain">
  <input type="text" name="wakacje" value="" list="id_wakacje" />
  <datalist id="id_wakacje">
    <option>Nad morzem</option>
    <option>Nad jeziorem</option>
    <option>W lesie</option>
    <option>Na wsi</option>
    <option>W mieście</option>
  </datalist>
  <input type="submit" name="przycisk_1" value="Ok" />
</form>

Tak powinna wyglądać wykonana strona:

Selektor plików file

Służy do wysyłania plików z dysku komputera użytkownika na serwer. Atrybut multiple="multiple" umożliwia wysyłanie wielu plików". Aby wysyłanie było możliwe, należy dodać w znaczniku form atrybut enctype="multipart/form-data". W naszym ćwiczeniu, będziemy mogli jedynie pokazać jak działa wybieranie pliku, niestety wybrany plik nie jest dołączany jako załącznik do poczty. Do uploadu plików wrócimy poznając PHP - wtedy w całości przetestujemy działanie pola file.

Ćwiczenie 2_6_4_4

Wykonaj stronę, na której przetestujesz działanie pola typu file. Zastosuj następujący kod:

<form action="" method="post" enctype="multipart/form-data">
  <input type="file" name="plik">
  <input type="submit" name="przycisk_1" value="Ok" />
</form>

Tak powinna wyglądać wykonana strona:

Pole ukryte hidden

<input type="hidden" name="nazwa" value="wartość" /> - tworzy ukryte pole w formularzu. Nie jest ono widoczne ani dostępne dla użytkownika, ale jego wartość jest przesyłana wraz z formularzem. Może ono służyć np. dla podania informacji o numerze wersji ankiety, dacie jej ostatniej aktualizacji, adresu strony, z której została wysłana, opisu całego formularza lub też poszczególnych jego pól. Ukryte dane są często wykorzystywane do przekazywania informacji pomiędzy klientem a serwerem, znając podstawy PHP, będziemy mogli przetestować jego działanie.

Praca domowa

Wykonaj ponownie ćwiczenia z zajęć, wprowadzając do nich własne treści.


Jeżeli nie jesteś pewny, jak wykonane zadania zapisać na pendriwie, to zajrzyj do pierwszego ćwiczenia, w którym zostało to dokładnie wytłumaczone.