Formularze w HTML

Formularze w HTML służą do pobierania danych od użytkownika (np. logowanie, rejestracja, wyszukiwanie, ankiety). Podstawowy element to <form>, w którym umieszcza się pola wejściowe, przyciski i inne kontrolki.

1. Struktura formularza

Wynik w przeglądarce:

Imię: [ pole tekstowe ]  [Wyślij]

• action – adres, do którego zostaną wysłane dane
• method – sposób przesyłania danych (GET, POST)

2. Pola tekstowe

2.1. Jednolinijkowe pole tekstowe – <input type="text">

Wynik:

[ Wpisz swoje imię ]

2.2. Wielolinijkowe pole tekstowe – <textarea>

Wynik:

[ Wpisz wiadomość
  ...
]

3. Pola specjalne

3.1. Hasło – <input type="password">

Wynik:

[ ******** ]

3.2. Email – <input type="email">

Wynik:

[ Wpisz email ]

(przeglądarka sprawdza poprawność adresu email)

3.3. Liczby – <input type="number">

Wynik:

[ pole z przyciskami + i - ]

3.4. Data i czas

Wynik:

[ wybór daty ] [ wybór godziny ] [ data + godzina ]

4. Przyciski

4.1. Przycisk wysyłania – <input type="submit">

Wynik:

[Wyślij]

4.2. Przycisk resetowania – <input type="reset">

Wynik:

[Wyczyść]

4.3. Przycisk niestandardowy – <button>

Wynik:

[Kliknij mnie]

5. Pola wyboru

5.1. Checkbox – wiele wyborów

Wynik:

☑ Sport   ☐ Muzyka

5.2. Radio button – jeden wybór

Wynik:

◉ Mężczyzna   ○ Kobieta

6. Listy rozwijane – <select>

Wynik:

[ Polska ▼ ]

7. Grupowanie pól – <fieldset> i <legend>

Wynik:

[Dane osobowe]
Imię: [  ] 
Nazwisko: [  ]

8. Atrybuty formularzy

• required – pole obowiązkowe
• placeholder – podpowiedź w polu
• readonly – pole tylko do odczytu
• disabled – pole nieaktywne
• maxlength – maksymalna liczba znaków

Przykład:

9. Przykładowy kompletny formularz

Wynik (uproszczony widok):

[Formularz rejestracyjny]
Imię: [   ]
Email: [   ]
Hasło: [   ]
Płeć: ○ Mężczyzna  ○ Kobieta
Hobby: ☐ Sport  ☐ Muzyka
Kraj: [Polska ▼]
[Zarejestruj się]