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.

Pola wyboru, obszar tekstowy, hasło

Poznaliśmy do tej pory następujące pola elementy formularzy: text, number oraz submit. Podzas dzisiejszych zajęć poznamy kolejne pola.

Pola wielokrotnego wyboru - checkbox

<input type="checkbox" name="nazwa" value="wartość" />Opis pola

Stosujemy, gdy chcemy dać użytkownikowi możliwość wybrania kilku spośród wielu zaproponowanych opcji. Klasycznym przykładem jest test wielokrotnego wyboru, kiedy na postawione pytanie, można udzielić kilka poprawnych odpowiedzi.

Ćwiczenie 2_6_3_1

Wykonaj stronę, na której stosując pola checkbox, poprosisz użytkownika o wskazanie miejsc do których wybrałby się na wakacje. Zastosuj następujący kod:

<form action="mailto:jan_kowalski@example.com" method="post" enctype="text/plain">
  <fieldset style="width:350px;">
    <legend>Zaznacz miejsca, w które udałbyś się na wakacje</legend>
    <p><label><input type="checkbox" name="checkbox_1" value="gory" />W góry</label></p>
    <p><label><input type="checkbox" name="checkbox_2" value="morze" />Nad morze</label></p>
    <p><label><input type="checkbox" name="checkbox_3" value="jezioro" />Nad jezioro</label></p>
    <p><label><input type="checkbox" name="checkbox_4" value="las" />Do lasu</label></p>
    <p><label><input type="checkbox" name="checkbox_5" value="wies" />Na wieś</label></p>
    <p><label><input type="checkbox" name="checkbox_6" value="miasto" />Do miasta</label></p>
    <input type="submit" name="przycisk_1" value="Ok" />
  </fieldset>
</form>  
  • style="width:350px;" zapis CSS, który wyznacza szerokość pola fieldset.
  • Etykieta pola label powoduje, że również po kliknięciu w opis pola checkbox zostaje ono zaznaczone. Inny sposób zastosowania etykiety pokazany jest w ćwiczeniu 3_2_15_1.
  • Znaczniki akapitów powodują, że kolejne checkboxy znajdują się jeden pod drugim.
  • Zastosowano nazwy checkbox_1..checkbox_6, jednak dla odebrania przez PHP powinniśmy napisać np. checkbox[]. Pomimo iż name każdego checkboxa będzie miało ten sam zapis checkbox[], to PHP odbierze wszystkie zaznaczone checkboxy jako oddzielne elementy.

Tak powinna wyglądać wykonana strona:

  • Zauważ, że wysyłane są wartości name oraz value, tylko zaznaczonych checkboxów,
  • checkboxy zaznaczają się podczas klikania w ich opis - sprawdź czy będzie tak po usunięciu znaczników label,
  • checkboxy znajdują się jeden pod drugim, zmień kod tak, aby znajdowały się w jednej linii.

Pola jednokrotnego wyboru - radio

<input type="radio" name="nazwa" value="wartość" />Opis pola

Stosujemy, gdy chcemy dać użytkownikowi możliwość wybrania jednej spośród wielu zaproponowanych opcji. Klasycznym przykładem jest test jednokrotnego wyboru, kiedy na postawione pytanie, może istnieć tylko jedna poprawna odpowiedź. Należy zwrócić uwagę na to, że wszystkie pola radio należące do jednej grupy opcji muszą mieć taką samą nazwę. To jest wymóg niezbędny do tego, aby użytkownik mógł zaznaczyć tylko jedną opcję.

Ćwiczenie 2_6_3_2

Wykonaj stronę na której stosując pola radio poprosisz użytkownika o wskazanie jednego miescja, do którego wybrałbyś się na wakacje. Zastosuj następujący kod:

<form action="mailto:jan_kowalski@example.com" method="post" enctype="text/plain">
  <fieldset>
    <legend>Zaznacz miejsce, w które udałbyś się na wakacje</legend>
    <input type="radio" name="opcja" value="gory" />W góry
    <input type="radio" name="opcja" value="morze" />Nad morze
    <input type="radio" name="opcja" value="jezioro" />Nad jezioro
    <input type="radio" name="opcja" value="las" />Do lasu
    <input type="radio" name="opcja" value="wies" />Na wieś
    <input type="radio" name="opcja" value="miasto" />Do miasta
    <input type="submit" name="przycisk" value="Ok" />
  </fieldset>
</form> 

Tak powinna wyglądać wykonana strona:

  • Zauważ, że wysyłane są wartości name oraz value, tylko jednego zaznaczonego radio.
  • Zmień nazwy na opcja1..opcja6 i sprawdź działanie formularza, co zauważyłeś?
  • Ponownie zmień nazwy na opcja.
  • Zmień kod tak, aby pola radio zaznaczały się podczas klikania w ich opis.
  • Zmień kod tak, aby pola radio znajdowały się jeden pod drugim.
  • Do tej nie zwracaliśmy na to uwagi, teraz trzeba to wyraźnie podkreślić - zawsze z formularzem wysyłane są wartości atrybutów name oraz value przycisku submit.

Obszar tekstowy (pole tekstowe wielowierszowe) - textarea

<textarea name="nazwa" cols="x" rows="y">tekst</textarea>, gdzie cols="x" (liczba kolumn) oraz rows="y" (liczba wierszy) określają rozmiary pola. Jak widać nie ma tutaj atrybutu value - razem z nazwą name jest wysyłany tekst.

Ćwiczenie 2_6_3_3

Wykonaj stronę na umieścisz formularz z polem tekstowym typu textarea. Zastosuj następujący kod:

<form action="mailto:jan_kowalski@example.com" method="post" enctype="text/plain">
  <textarea name="opis_dnia" cols="30" rows="10">Tutaj opiszę swój dzisiejszy dzień. 
  Wstałem o godz 6. Umyłem się, zjadłem pyszne śniadanko i poszedłem na spacer ze swoim 
  psem Reksiem. Potem poszedłem do szkoły gdzie się męczyłem przez 6 godzin. Po szkole 
  wróciłem do domu i zjadłem obiadek.</textarea>
  <br />
  <input type="submit" name="przycisk" value="Ok" />
</form>

Zwróć uwagę że:

  • tekst jest pisany zaraz za znacznikiem otwierającym <textarea>,
  • znacznik zamykający </textarea> jest wstawiony tuż za tekstem

Tak powinna wyglądać wykonana strona:

  • textarea pokazuje tekst wpisany w kodzie;
  • rozmiary textarea są określone poprzez cols oraz rows;
  • można zmieniać wielkość pola, chwytając myszką jego prawy, dolny róg (za pomocą CSS można tą właściwość zablokować);
  • ten tekst jest wysyłany z formularzem, jeżeli widzisz jakieś znaki zamiast polskich liter, to się tym nie przejmuj, ponieważ PHP odbierze tekst prawidłowo, ale jeżeli chcesz, to spóbuj dopasować kodowania dokumentu i programu pocztowego;
  • zastosuj i sprawdź działanie poznanych już atrybutów autofocus, disabled, required, maxlength, placeholder oraz readonly;
  • zastosuj i sprawdź działanie atrybutu wrap - służy on do określania, w jaki sposób mają być traktowane zawinięcia wiersza podczas wysyłania tekstu na serwer, wartość hard wymusza dodanie podziału wierszy, wartość soft, pozostawia tekst bez zmian (domyślną wartością jest soft).

Pole wpisywania hasła - password

<input type="password" name="nazwa" value="hasło" />, pole to różni się od pola typu text tylko tym, że podczas pisania pojawiają się w nim gwiazdki , kółka lub kwadraciki zamiast liter.

Ćwiczenie 2_6_3_4

Wykonaj stronę, na której umieścisz formularz z polem typu password. Zastosuj następujący kod:

<form action="mailto:jan_kowalski@example.com" method="post" enctype="text/plain">
  <input type="password" name="haslo" value="" />
  Wpisz hasło i kliknij przycisk Ok	
  <input type="submit" name="przycisk" value="Ok" />
</form>  

Tak powinna wyglądać wykonana strona:

Jeżeli hasło zostanie wysłane na serwer, to odpowiedni kod PHP porówna je z hasłem zapisanym na serwerze.

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.