foto1
foto1
foto1
foto1
foto1
foto5

FORMULARZE HTML

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:Ten adres pocztowy jest chroniony przed spamowaniem. Aby go zobaczyć, konieczne jest włączenie w przeglądarce obsługi JavaScript." 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>

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="50" maxlength"30" />

</form>

size - rozmiar pola

maxlength - maksymalna ilość znaków

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.

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.

OBSZAR TEKSTOWY

Obszar tekstowy ustalamy za pomocą text-area.

 

<form action="*">

<textarea name="texarea"></textarea>

</form>

LISTA WYBORU

Listę wyboru ustalamy za pomocą select.

 

Lista rozwijana

<form action="*">

<select name="select">

<option>Opcja</option>

</select>

</form>

Lista z możliwością zaznaczenia kilku opcji

<form action="*">

<select name="multiple" multiple="multiple">

<option>Opcja</option>

</select>

</form>

HASŁO

Hasło ustalamy za pomocą typu password.

 

<form action="*">

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

</form>

WYSYŁANIE

Wysyłanie ustalamy za pomocą typu submit.

 

<form action="*">

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

</form>

CZYSZCZENIE ZAWARTOŚCI

Czyszczenie zawartości ustalamy za pomocą typu reset.

 

<form action="*">

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

</form>

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

submit - wysyłanie

reset - kasowanie

<form action="*">

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

</form>

Poniżej przykład przycisku obrazkowego.

 

<form action="*">

<button type="submit"><img src="/sciezka_dostepu_do_obrazka" alt="wyślij" /></button>

</form>

 

Źródło

Copyright 2024  Studio Gabrielle