Formularze służą do zbierania danych od czytelnika strony i wysłanie ich później do obsługującego formularz skryptu php lub e-mailem np. do administratora serwisu. Najcześciej spotykanym formularzem jest okno rejestracji użytkownika i później okno logowania do serwisu.

<form action="mailto:adres e-mail?subject=temat" method="post">
Login: <input type="text" name="nazwa" /><br />
Hasło: <input type="password" name="haslo" /><br />
</form>
Login:
Hasło:

<form>...</form> - Tworzy ramy formularza. Dodatkowe parametry to:
action="adres email lub adres strony" - adres na który zostanie wysłany formularz
method="post lub get" - "post" wysyła dane z formularza "po cichu". Są niewidoczne. "get" - dołącza dane do adresu strony np: http://strona.php?imie=Franek&nazwisko=Kowalski
enctype="text/plain" - wysyłane dane są niezakodowane
<input /> - podstawowe pole formularza. Dodatkowe parametry:
name="nazwa" - nazwa danego pola po której program odbierający dane z formularza rozpozna o które pole chodzi
type="text"  - wyświetla pole tekstowe o szerokości jednej linii
type="password" - pole tekstowe, które zamiast wpisywanych znaków wyświetla gwiazdki "*"
type="checkbox" - pola wielokrotnego wyboru. Jeśli definiujemy kilka pól checkbox w obrębie jednego pytania, wszystkie muszą mieć tę samą nazwę "name". W polu tym istnieje dodatkowy atrybut "value", który w obrębie jednego pytania musi się zawsze różnić dla każdej odpowiedzi
type="radio" - pola jednokrotnego wyboru. Jeśli definiujemy kilka pól radio w obrębie jednego pytania, wszystkie muszą mieć tę samą nazwę "name". W polu tym istnieje dodatkowy atrybut "value", który w obrębie jednego pytania musi się zawsze różnić dla każdej odpowiedzi
<select>...</select> - definiuje początek i koniec listy rozwijanej o nazwie name="nazwa";. Domyślnie można wybrać jedną odpowiedź, ale wprowadzając do select parametr multiple="multiple" umożliwiamy użytkownikom wybrać kilka opcji z listy rozwijanej (po przytrzymaniu klawisza CTRL)
<option>...</option> - definiuje kolejne wartości do wyboru w liście rozwijanej.
<button>...</button> - definiuje przycisk w formularzu. Parametr type="rodzaj" określa: submit - wyślij dane, reset - resetuj formularz, button - zwykły przycisk. Tez znacznik umożliwia wstawienie do przycisku grafiki, tabeli i formatowania tekstu, czego nie umożliwia <input type="submit" value="wartość" /> - opis poniżej
<fieldset>...</fieldset> - grupuje kilka tematycznych pól formularza i otacza je ramką
<legend>...</legend> - dodaje opis dla grupy
<textarea>...</textarea> - definiuje duże pole tekstowe do wpisywania dłuższego, przeważnie dowolnego tekstu

Wysłanie danych z formularza.
<input type="submit" value="wartość" /> - przycisk służący do wysłania danych. Słowo wartość pojawi się na przycisku
<input type="reset" value="wartość" /> - przycisk służący wyczyszczeniu wprowadzonych danych. Słowo wartość pojawi się na przycisku

Rozbudowany formularz:

<form action="mailto:adres e-mail?subject=temat" method="post" enctype="text/plain">
<fieldset>
<legend>Dane podstawowe</legend>
Imię: <input type="type" name="imie" /><br />
Nazwisko: <input type="type" name="nazwisko" /><br />
Płeć: <input type="radio" name="Płeć" value="Kobieta" />K
<input type="radio" name="Płeć" value="Mężczyzna" />M<br />
Wiek<br />
<input type="radio" name="Wiek" value="mniej niż 15" />mniej niż 15<br />
<input type="radio" name="Wiek" value="15-19" />15-19<br />
<input type="radio" name="Wiek" value="20-29" />20-29<br />
<input type="radio" name="Wiek" value="30-39" />30-39<br />
<input type="radio" name="Wiek" value="40-60" />40-60<br />
<input type="radio" name="Wiek" value="więcej niż 60" />więcej niż 60
</fieldset>
<fieldset>
<legend>Zainteresowania</legend>
Interesuję się:
<fieldset>
<legend>Muzyka</legend>
Rock <input type="checkbox" name="Muzyka" value="Rock" />
Metal <input type="checkbox" name="Muzyka" value="Metal" />
Jazz <input type="checkbox" name="Muzyka" value="Jazz" />
POP <input type="checkbox" name="Muzyka" value="POP" />
Dance <input type="checkbox" name="Muzyka" value="Dance" />
</fieldset>
<fieldset>
<legend>Sport</legend>
Piłka nożna <input type="checkbox" name="Sport" value="Piłka nożna" />
Koszykówka <input type="checkbox" name="Sport" value="koszykówka" />
Siatkówka <input type="checkbox" name="Sport" value="Siatkówka" />
skoki narciarskie <input type="checkbox" name="Sport" value="Skoki" />
Lekka atletyka <input type="checkbox" name="Sport" value="lekka atletyka" />
</fieldset>
</fieldset>
<fieldset>
<legend>Mój komputer</legend>
Jakiej przeglądarki internetowej używasz?<br />
<select name="Przeglądarka">
<option selected="selected">Internet Explorer</option>
<option>Chrome</option>
<option>Opera</option>
<option>Mozilla</option>
<option>Inna</option>
</select><br /><br />
Jakie masz zainstalowane systemy operacyjne (możesz wybrać kilka opcji trzymając klawisz Ctrl)?<br />
<select name="System operacyjny" multiple="multiple" size="3">
<option selected="selected">Windows XP</option>
<option>Windows 7</option>
<option>Windows 8</option>
<option>Windows 10</option>
<option>Linux</option>
</select>
</fieldset>
Napisz coś o sobie:<br />
<textarea name="Komentarz" cols="50" rows="10">Powiedz nam kim jesteś ...</textarea><br />
<input type="submit" value="Wyślij formularz" />
<input type="reset" value="Wyczyść dane" />
</form>
Dane podstawowe Imię:
Nazwisko:
Płeć: K M
Wiek
mniej niż 15
15-19
20-29
30-39
40-60
więcej niż 60
Zainteresowania Interesuję się:
Muzyka Rock Metal Jazz POP Dance
Sport Piłka nożna Koszykówka Siatkówka skoki narciarskie Lekka atletyka
Mój komputer Jakiej przeglądarki internetowej używasz?


Jakie masz zainstalowane systemy operacyjne (możesz wybrać kilka opcji trzymając klawisz Ctrl)?
Napisz coś o sobie:

reveal-a

reveal-a

×

reveal-b

reveal-b

×

reveal-c

reveal-c

×