Formularze

Stosowanie formularzy na stronie umożliwia zebranie informacji oraz ułatwia komunikację z użytkownikami.

Struktura formularza

<form action="*">
Pola formularza
</form>

* – adres e-mail, ścieżka dostępu do skryptu

Wysyłanie poczty

Aby wysłać wiadomość ze strony w poleceniu action należy podać adres e-mail oraz określić metodę:

• method=”post” (wysyłamy)
• method=”get” (pobieramy)

Przykład

<form action="mailto:przykladowy_adres@mail.pl" method="post">
Pola formularza
</form>

Rodzaje pól formularza

• pole tekstowe
• pole opcji
• pole wyboru
• obszar tekstowy
• lista wyboru
• hasło
• wysyłanie
• czyszczenie zawartości
• przycisk

Pole tekstowe

Pole tekstowe określamy za pomocą input.

<form action="*">
<label>Nazwisko</label> <input type="text" name="nazwisko" />
</form>

Przykład

• type – typ pola
• name – nazwa powinna być inna dla każdego pola

Formatowanie pola tekstowego.

<form action="*">
<label>Nazwisko</label> <input type="text" name="nazwisko" size="30" maxlength"20" />
</form>

• size – rozmiar pola
• maxlength – maksymalna ilość znaków

Przykład

Pole opcji

Pole opcji ustalamy za pomocą typu radio.

<form action="*">
<input type="radio" name="radio" value="wartość" />
</form>

• type – typ pola
• name – nazwa powinna być inna dla każdego pola
• value – wartość inna dla każdej odpowiedzi

Przycisk typu radio umożliwia zaznaczenie jednej opcji. Przykład A B C

Pole wyboru

Pole wyboru ustalamy za pomocą typu checkbox.

<form action="*">
<input type="checkbox" name="checkbox" value="wartość" />
</form>

• type – typ pola
• name – nazwa powinna być inna dla każdego pola
• value – wartość inna dla każdej odpowiedzi

Przycisk typu checkbox umożliwia zaznaczenie wielu opcji. Przykład A B C

Obszar tekstowy

Obszar tekstowy ustalamy za pomocą text-area.

<form action="*">
<textarea name="texarea"></textarea>
</form>

Przykład

Lista wyboru

Listę wyboru ustalamy za pomocą select.

• Lista rozwijana

<form action="*">
<select name="select">
<option>Opcja</option>
</select>
</form>

Przykład

• Lista z możliwością zaznaczenia kilku opcji

<form action="*">
<select name="multiple" multiple="multiple">
<option>Opcja</option>
</select>
</form>

Przykład

Hasło

Hasło ustalamy za pomocą typu password.

<form action="*">
<label>Hasło</label> <input type="password" name="haslo" />
</form>

Przykład

Wysyłanie

Wysyłanie ustalamy za pomocą typu submit.

<form action="*">
<input type="submit" value="Wyślij" />
</form>

Przykład

Czyszczenie zawartości

Czyszczenie zawartości ustalamy za pomocą typu reset.

<form action="*">
<input type="reset" value="Wyczyść formularz" />
</form>

Przykład

Przycisk

Przycisk ustalamy za pomocą button. W odróżnieniu od dwóch powyższych sposobów daje więcej możliwości sformatowania jego wyglądu.

<form action="*">
<button type="typ"></button>
</form>

Typy przycisku:

• button – domyślny, klikalny przycisk
• submit – wysyłanie
• reset – kasowanie

<button type="submit">Wyślij formularz</button>