03. HTML, część trzecia

Formularze

Formularze służą do pobierania danych od użytkowników odwiedzających naszą stronę internetową.

Do czego z grubsza dążymy?

<form>
     Imię:
     <br>
     <input type="text" name="firstname" value="">
     <br>
     Nazwisko:<br>
     <input type="text" name="lastname" value="">
 
     <p>
         Czas na dłuższą wypowiedź:
        <br>
        <textarea name="content" rows="12" cols="50"></textarea>
    </p>
    <input type="submit" value="Submit">
</form>

Struktura ogólna

  • formularz zawierający różne pola tworzy się za pomocą znacznika:
<form> różne pola </form>
  • aby informacje z formularza były wysyłane za pomocą poczty elektronicznej na podany adres, należy w znaczniku form dodać atrybut:
<form action="mailto:mejl@cos.pl?subject=temat_emaila" method="post"> różne pola </form>

"temat_emaila" - pojawi się w temacie wysłanej wiadomości

  • aby treść e-maila przyjmowała postać czytelnego tekstu należy dodać jeszcze atrybut:
<form enctype="text/plain">
różne pola
</form>

Kompletny przykład - struktura formularza:

<form enctype="text/plain" action="mailto:mejl@cos.pl?temat_mejla" method="post">
różne pola
</form>

Pole tekstowe

  • pola tekstowe w formularzu umieszcza się za pomocą znacznika:

<input type="text">

  • nazwa pola:

name="pole1"

  • zawartość domyślna (wpisana w polu początkowo):

value="costam"

  • rozmiar pola - liczba znaków:

size="50"

  • opis pola należy umieścić obok niego

przykład - pole tekstowe:

<p>wpisz tu coś mądrego: <input type="text" name="pole1" value="costam" size="50"></p>

Obszar tekstowy

  • obszary tekstowe w formularzu umieszcza się za pomoca znacznika:

<textarea>zawartość domyślna</textarea>

  • nazwa obszaru:

name="tekst1"

  • wymiary obszaru tekstowego - liczba wierszy i kolumn:

rows="3"
cols="30"

  • opis obszaru tekstowego należy umieścić obok niego

Przykład - obszar tekstowy:

<p>Czas na dłuższą wypowiedź: 
    <textarea name="tekst1" rows="8" cols="50">
    zawartość domyślna
    </textarea>
</p>

Jeśli chcemy się pozbyć wartości domyślnej wystarczy zamknąć tag <textarea> natychmiast po otwarciu go.

<p>Czas na dłuższą wypowiedź: 
    <textarea name="tekst1" rows="8" cols="50"></textarea>
</p>

Pole opcji

  • do wstawienia pola opcji służy znacznik:

<input type="radio">

  • nazwa pola:

name="nazwa_pola"

  • jeśli stworzymy kilka pól o tej samej nazwie, użytkownik będzie mógł zaznaczyć tylko jedno z nich jednocześnie
  • wartość pola:

value="opcja1"

  • domyślne zaznaczenie pola:

checked="checked"

  • opis danego pola opcji należy umieścić obok niego

Przykład - opcje:

<p><input type="radio" name="opcja" value="opcja nr 1" checked="checked"> wybieram opcję 1</p>
<p><input type="radio" name="opcja" value="opcja nr 2"> wybieram opcję 2</p>

Pole wyboru

  • do wstawienia pola wyboru słuzy znacznik:

<input type="checkbox">

  • nazwa pola:

name="wybor"

  • użytkownik może zaznaczyć jednocześnie wiele pól
  • wartość pola:

value="wybor 1"

  • opis danego pola wyboru należy umieścić obok niego

Przykład - wybór:

<p><input type="checkbox" name="wybor" value="wybor nr 1"> wybieram 1</p>
<p><input type="checkbox" name="wybor" value="wybor nr 2"> wybieram 2</p>
<p><input type="checkbox" name="wybor" value="wybor nr 3"> wybieram 3</p>

Lista

  • listę opcji do wyboru tworzy się za pomocą znacznika:

<select>

  • nazwa listy:

name="nazwa_listy"

  • liczba jednocześnie wyświetlanych pozycji listy:

size="3"

  • wybór więcej niż jednej opcji z listy umożliwia się dodając do znacznika <select> atrybut:

multiple="multiple"

  • opcję należącą do listy tworzy się za pomocą znacznika:

<option>pierwsza pozycja</option>

  • domyślne zaznaczenie danej opcji - dodanie do znacznika <option> atrybutu:

selected="selected"

Przykład - lista:

<p>
    <select name="kolor" size="3">
        <option selected="selected"> czarny </option>
        <option>czerwony</option>
        <option>zielony</option>
        <option>niebieski</option>
        <option>fioletowy</option>
    </select>
</p>

Wysyłanie/resetowanie zawartości formularza:

  • do wysyłania danych wpisanych w formularzu służy przycisk:

<input type="submit">

  • do resetowania danych wpisanych w formularzu (przywrócenia domyślnych wartość pól) również służy przycisk:

<input type="reset">

  • napis na przycisku:

value="wyślij"

Przykład - wysyłanie/resetowanie:

<p>
    <input type="submit" value="Chcę wysłać">
    <input type="reset" value="Rozmyśliłem się jednak">
</p>

Zadanie 03

Polecenie: do strony stworzonej podczas poprzednich zajęć dodać podstroną z formularzem, którego zawartość wysyłana będzie na adres e-mail autora strony, zawierającym:

  • pole tekstowe
  • obszar tekstowy
  • pola opcji
  • pola wyboru
  • listę
  • 2 przyciski umożliwiające wysłanie oraz zresetowanie zawartości formularza

! wszystkie pliki strony należy umieścić na swoim koncie ftp
Strony można zwalidować na stronie http://validator.w3.org/

Terminy:

  • grupy poniedziałkowe: niedziela (29.10), godzina 23:59 (północ z niedzieli na poniedziałek); spóźnienie: -1pkt/dzień; oddanie zadania po północy z wtorku na środę oznaczać będzie brak punktów.
  • grupy czwartkowe: środa (25.10), godzina 23:59 (północ z środy na czwartek); spóźnienie: -1pkt/dzień; oddanie zadania po północy z piątku na sobotę oznaczać będzie brak punktów.

Punkty: 3

Strona na licencji Creative Commons Attribution-ShareAlike 3.0. Autorzy: A. Czoska, M. Komosiński, B. Kowalczyk, A. Kupś, M. Lubawy