Formularze HTML — podstawy

Formularze HTML pozwalają zbierać dane od użytkowników. Składają się z pól (inputów) różnych typów, etykiet (label) oraz przycisków wysyłania. Poniżej omówione są podstawowe elementy formularza oraz proste wskazówki dotyczące ich układu i stylowania.

Struktura formularza

<form> – kontener całego formularza. Posiada atrybuty takie jak action (URL, do którego zostaną wysłane dane) i method (metoda wysyłki, np. GET lub POST). <form> grupuje pola i określa, co się stanie po wysłaniu.

Elementy wewnątrz <form>

• <input> – uniwersalne pole wprowadzania danych. Atrybut type definiuje rodzaj pola:
  • type="text" – jednolinijkowe pole tekstowe.
  • type="email" – pole tekstowe oczekujące adresu e-mail (przeglądarka może walidować format i na telefonie wyświetli odpowiednią klawiaturę).
  • type="password" – pole do haseł (tekst maskowany).
  • type="checkbox" – pole typu checkbox (zaznaczanie wielokrotnego wyboru).
  • type="radio" – pole typu radio (wybór jednej opcji z grupy).
  • type="submit" – przycisk wysyłający formularz.
  • Istnieją też inne typy jak number, date, file itp., ale tu skupiamy się na podstawowych.
• <label> – etykieta opisująca pole. Kliknięcie na tekst etykiety ustawia fokus w powiązanym polu, co ułatwia wypełnianie formularza (szczególnie na urządzeniach mobilnych). Aby powiązać <label for="id"> z polem, używamy atrybutu for odpowiadającego id inputa. Alternatywnie można umieścić input wewnątrz labela.
• <textarea> – pole wielolinijkowe (np. na komentarz). Ma atrybuty rows i cols, ale lepiej kontrolować wymiary CSS-em.
• <button> – przycisk. Może mieć type="submit" do wysyłania formularza lub type="button" do innych akcji. Wewnątrz <button> można umieścić HTML (np. ikonę).
• <select> – lista rozwijana (dropdown) z elementami <option>. Można ustawić domyślnie wybraną opcję atrybutem selected.

Przykład prostego formularza

<form action="/wyslij" method="POST">
    <label for="fname">Imię:</label><br>
    <input type="text" id="fname" name="fname"><br><br>

    <label for="email">E-mail:</label><br>
    <input type="email" id="email" name="email"><br><br>

    <label>
        <input type="checkbox" name="newsletter">
        Zapisz się do newslettera
    </label><br><br>

    <label>Wybierz płeć:</label><br>
    <label><input type="radio" name="gender" value="m"> Mężczyzna</label><br>
    <label><input type="radio" name="gender" value="f"> Kobieta</label><br><br>

    <label for="msg">Wiadomość:</label><br>
    <textarea id="msg" name="msg" rows="4" cols="30"></textarea><br><br>

    <button type="submit">Wyślij</button>
</form>

W przykładzie użyto różnych pól: pola tekstowe (imię, email), checkbox, grupa radio (płeć), pole wielowierszowe (wiadomość) oraz przycisk. Etykiety dla niektórych pól używają atrybutu for powiązanego z id, a checkbox i radio mają etykiety obejmujące input, co poprawia wygodę użycia.

Układ pól formularza

Zazwyczaj formularze układa się w kolumnie (jedno pole pod drugim) z etykietą nad lub obok pola. W prostych przykładach używa się <br> do łamania linii, ale w produkcyjnych formularzach lepiej stosować CSS (np. display: block, flexbox albo opakowanie każdego pola w <p> lub <div>), by uzyskać czytelny i dostępny układ. Pogrupuj powiązane pola (np. zestaw radio) pod wspólnym opisem.

Stylowanie przycisków (przykład)

button {
    background-color: #4CAF50; /* zielony przycisk */
    color: white;
    padding: 10px 16px;
    border: none;
    border-radius: 4px;
    font-size: 16px;
    cursor: pointer;
}
button:hover {
    background-color: #45a049; /* ciemniejszy zielony na hover */
}

Ten styl sprawi, że wszystkie elementy <button> będą miały spójny, estetyczny wygląd. Podobnie można ostylować input[type="submit"]. Można też stylować pola tekstowe i listy rozwijane (np. obramowanie, tło, rozmiar czcionki), ale najważniejsze to poprawne ułożenie i używanie etykiet dla dostępności.

Dobre praktyki

• Zawsze używaj <label> dla pól — poprawia to dostępność (np. dla czytników ekranu) i użyteczność.
• Stosuj semantyczne znaczniki i logiczny porządek pól, by formularz był czytelny i prosty do wypełnienia.
• W produkcji unikaj <br> do układu; użyj CSS (bloków, flexboxa itp.).
• Na dalszych etapach możesz dodać walidację (HTML5 i JavaScript) oraz bardziej zaawansowane inputy i obsługę dynamiczną.

Podsumowanie

Formularz HTML to podstawowe narzędzie do interakcji z użytkownikiem. Poznaliśmy główne elementy formularza, ich przeznaczenie oraz proste metody prezentacji i stylowania, dzięki czemu można stworzyć czytelny i dostępny formularz.