6. Pola formularza – najpopularniejsze inputy

Najczęściej spotykane pola, które naprawdę używasz na 95% stron z formularzami.

Podstawowy szkielet formularza

<form action="/wyslij" method="post">
  
  <button type="submit">Wyślij</button>
</form>

Najważniejsze typy inputów

<!-- 1. Zwykłe pole tekstowe -->
<label for="imie">Imię:</label>
<input type="text" id="imie" name="imie" placeholder="Jan" required>

<!-- 2. Pole na email (sprawdza @) -->
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>

<!-- 3. Hasło (ukryte znaki) -->
<label for="haslo">Hasło:</label>
<input type="password" id="haslo" name="haslo" required>

<!-- 4. Pole numer telefonu -->
<label for="telefon">Telefon:</label>
<input type="tel" id="telefon" name="telefon" placeholder="501-234-567">

<!-- 5. Checkbox (zgoda) -->
<label>
  <input type="checkbox" name="regulamin" value="akceptuje" required>
  Akceptuję regulamin
</label>

<!-- 6. Radio (wybór jednej opcji) -->
<p>Płeć:</p>
<label>
  <input type="radio" name="plec" value="kobieta" required> Kobieta
</label>
<label>
  <input type="radio" name="plec" value="mezczyzna"> Mężczyzna
</label>

<!-- 7. Przycisk wyślij -->
<button type="submit">Zarejestruj się</button>

Najczęściej popełniane błędy

• brak name → dane nie dochodzą
• brak label lub złe powiązanie
• radio bez tej samej wartości name

Najczęściej używane pola + jak działa wysyłanie danych.

Formularz – najważniejsze atrybuty

<form 
  action="/kontakt" 
  method="post"
>
  <!-- pola inputów -->
  <button type="submit">Wyślij</button>
</form>

action – dokąd wysłać dane

• action="/kontakt" → adres, na który polecą dane po kliknięciu „Wyślij”
• action="https://example.com/save" → można wysyłać na inny serwer
• action="" lub brak → wysyła na ten sam adres strony

method – jak wysłać dane

• method="post" – najczęściej używany (dane w treści żądania, nie widać w adresie)
• method="get" – dane w pasku adresu (używane do wyszukiwania, filtrowania)

Zadanie

Stwórz prosty formularz rejestracyjny zawierający:

• pole imię (text, required)
• pole email (type=email, required)
• pole hasło (type=password, required)
• checkbox „Zapoznałem się z regulaminem” (required)
• przycisk „Zarejestruj się”