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.
Hasło: <input type="password" name="haslo" /><br />
<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:
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>
Interesuję się:
<fieldset>
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>
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>
Jakiej przeglądarki internetowej używasz?<br />
<select name="Przeglądarka">
<option>Chrome</option>
<option>Opera</option>
<option>Mozilla</option>
<option>Inna</option>
Jakie masz zainstalowane systemy operacyjne (możesz wybrać kilka opcji trzymając klawisz Ctrl)?<br />
<select name="System operacyjny" multiple="multiple" size="3">
<option>Windows 7</option>
<option>Windows 8</option>
<option>Windows 10</option>
<option>Linux</option>
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" />
