Formularze w HTML

Formularze w HTML są używane do zbierania danych od użytkowników. Mogą zawierać różne typy pól, takie jak pola tekstowe, przyciski radiowe, przyciski wyboru (checkbox), listy rozwijane, oraz wiele innych. Wszystkie elementy formularza są zamknięte w tagu <form>, który określa, jak dane mają zostać wysłane.

Podstawowa struktura formularza

              <form action="submit_form.php" method="POST">
                <!-- Zawartość formularza -->
              </form>
            

• action: Określa URL, do którego dane będą wysyłane po wysłaniu formularza.
• method: Określa metodę wysyłania danych. Zwykle używa się POST (dane nie są widoczne w adresie URL) lub GET (dane są dołączane do adresu URL).

Przykłady formularzy i ich wyjaśnienia:

1. Formularz tekstowy

Formularz, który zawiera pole tekstowe, gdzie użytkownicy mogą wpisać swoje imię.

              <form action="/submit_name" method="POST">
                <label for="name">Imię:</label>
                <input type="text" id="name" name="name" placeholder="Wpisz swoje imię">
                <button type="submit">Wyślij</button>
              </form>
            

• <input type="text">: Umożliwia użytkownikowi wpisanie tekstu.
• <label>: Etykieta przypisana do pola formularza. Jest związana z polem przez atrybut for, który powinien odpowiadać id pola input.
• <button type="submit">: Przycisk wysyłający formularz.

2. Formularz z polem hasła

Formularz logowania z polem hasła, które maskuje wprowadzone znaki.

              <form action="/login" method="POST">
                <label for="username">Nazwa użytkownika:</label>
                <input type="text" id="username" name="username">
                
                <label for="password">Hasło:</label>
                <input type="password" id="password" name="password">
                
                <button type="submit">Zaloguj</button>
              </form>
            

• <input type="password">: Pole umożliwiające wprowadzenie hasła, które maskuje wprowadzone znaki.

3. Formularz z przyciskiem radiowym

Formularz z przyciskami radiowymi, które umożliwiają wybór jednej opcji.

              <form action="/survey" method="POST">
                <p>Wybierz swoją płeć:</p>
                <label for="male">Mężczyzna</label>
                <input type="radio" id="male" name="gender" value="male">
                
                <label for="female">Kobieta</label>
                <input type="radio" id="female" name="gender" value="female">
                
                <button type="submit">Wyślij</button>
              </form>
            

• <input type="radio">: Umożliwia wybór jednej opcji z grupy.
• Atrybut name grupuje przyciski radiowe, co oznacza, że tylko jedna opcja w grupie może być wybrana.

4. Formularz z polem wyboru (checkbox)

Formularz z polem wyboru, które pozwala na wybór wielu opcji.

              <form action="/newsletter" method="POST">
                <p>Wybierz subskrypcję newslettera:</p>
                
                <label for="sports">Sporty</label>
                <input type="checkbox" id="sports" name="interests" value="sports">
                
                <label for="music">Muzyka</label>
                <input type="checkbox" id="music" name="interests" value="music">
                
                <label for="movies">Filmy</label>
                <input type="checkbox" id="movies" name="interests" value="movies">
                
                <button type="submit">Zapisz się</button>
              </form>
            

• <input type="checkbox">: Umożliwia użytkownikowi zaznaczenie jednej lub wielu opcji.

5. Formularz z rozwijaną listą

Formularz z rozwijaną listą (select), w którym użytkownik wybiera jedną opcję.

              <form action="/preferences" method="POST">
                <label for="color">Wybierz ulubiony kolor:</label>
                <select id="color" name="color">
                  <option value="red">Czerwony</option>
                  <option value="blue">Niebieski</option>
                  <option value="green">Zielony</option>
                </select>
                
                <button type="submit">Wyślij</button>
              </form>
            

• <select>: Tworzy rozwijaną listę opcji.
• <option>: Określa pojedynczą opcję w liście rozwijanej.

6. Formularz z polem tekstowym (textarea)

Formularz, w którym użytkownik może wprowadzić dłuższy tekst (np. komentarz).

              <form action="/feedback" method="POST">
                <label for="comments">Twoja opinia:</label>
                <textarea id="comments" name="comments" rows="4" cols="50" placeholder="Wpisz swoją opinię..."></textarea>
                
                <button type="submit">Wyślij</button>
              </form>
            

• <textarea>: Umożliwia wprowadzenie dłuższego tekstu. Atrybuty rows i cols określają rozmiar pola tekstowego.

7. Formularz z ukrytym polem

Formularz zawierający ukryte pole, które nie jest widoczne dla użytkownika, ale jest wysyłane na serwer.

              <form action="/purchase" method="POST">
                <input type="hidden" name="product_id" value="12345">
                
                <button type="submit">Kup teraz</button>
              </form>
            

• <input type="hidden">: Ukryte pole, które nie jest wyświetlane, ale przesyła dane (np. identyfikator produktu).

8. Formularz z przyciskiem do resetowania

Formularz, który zawiera przycisk resetujący wszystkie pola do wartości domyślnych.

              <form action="/submit" method="POST">
                <label for="email">Adres email:</label>
                <input type="email" id="email" name="email">
                
                <button type="reset">Resetuj</button>
                <button type="submit">Wyślij</button>
              </form>
            

• <button type="reset">: Przycisk, który resetuje wszystkie pola formularza do wartości początkowych.