Lekcje >> Podstawy HTML 5
Polimax

Drukarnia w Warszawie realizująca druk wizytówek, plakatów jak również fotoksiążki, fotoobrazy i fotokalendarze - z wysyłką na terenie całego kraju.

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.