4 - HTML (10.03.2008)

Formularze

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

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:
action="mailto:mejl@cos.pl?subject=temat_mejla" method="post"
"temat_mejla" - pojawi się w temacie wysłanej wiadomości
- aby treść e-maila przyjmowała postać czytelnego tekstu należy dodać jeszcze atrybut:
enctype="text/plain"
- treść e-maila:
nazwa_pola = wartość_pola

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>

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 04

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
! wszystkie strony trzeba zwalidować na stronie http://validator.w3.org/

deadline: 15.03.2008
punkty: 3

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