📖
Formularze HTML
Formularze do rejestracji, wyszukiwania i opinii
Tag <form> — kontener formularza
html
<form action="/wyslij" method="POST">
<!-- pola formularza -->
</form>action— URL do którego wysyłane są danemethod— metoda:GET(dane w URL, do wyszukiwania) lubPOST(w ciele zapytania, do haseł)
Pola tekstowe <input>
<input> to tag samozamykający. Atrybut type określa rodzaj pola:
| type | Wygląd | Gdzie używać |
|---|---|---|
text | Zwykłe pole tekstowe | Imię, wyszukiwanie |
email | Waliduje format email | |
password | Znaki ukryte | Hasło |
number | Tylko liczby | Wiek, ilość |
checkbox | Pole wyboru ✓ | Zgoda, ustawienia |
radio | Okrągły przycisk ○ | Wybór jednej z kilku opcji |
submit | Przycisk wysyłania | Wyślij formularz |
range | Suwak | Głośność, ocena |
Kluczowe atrybuty:
name— klucz pod którym dane są wysyłane do serweraplaceholder— podpowiedź w polu (znika przy wpisywaniu)required— pole jest obowiązkowevalue— wartość początkowa
<label> — etykieta pola
Zawsze dodawaj etykietę! Bez niej nie wiadomo co wpisać. Dwa sposoby:
html
<!-- Sposób 1: for + id (etykieta i input osobno) -->
<label for="email">Email:</label>
<input type="email" id="email" name="email">
<!-- Sposób 2: owinięcie input wewnątrz label -->
<label>
Email:
<input type="email" name="email">
</label>Gdy etykieta jest powiązana z inputem — kliknięcie tekstu etykiety automatycznie fokusuje pole. Wygodne i ważne dla dostępności.
html
💬
Prawdziwy formularz rejestracyjny. Atrybut required zapobiega wysłaniu gdy pole jest puste — przeglądarka sama pokazuje błąd.
Używaj <button type='submit'> zamiast <input type='submit'> — przycisk jest łatwiejszy do stylizowania CSS i może zawierać HTML (np. ikonę).
Komentarze
Zaloguj się lub Zacznij aby zostawić komentarz.