Formularze - Edutago

Formularze HTML są podstawowym narzędziem interakcji między użytkownikiem a stroną internetową, pozwalając na zbieranie danych od użytkowników. Mogą one przyjmować różne formy, od prostych pól tekstowych po zaawansowane kontrolki, takie jak suwaki, przyciski wyboru czy datowniki. W tej lekcji przyjrzymy się różnym elementom formularzy HTML, ich atrybutom oraz sposobom ich wykorzystania do tworzenia interaktywnych i użytecznych formularzy.

Przykład formularza

Poniższy kod HTML demonstruje prosty formularz z różnymi typami kontrolek, wraz z komentarzami wyjaśniającymi poszczególne sekcje.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Przykład formularza w HTML</title>
</head>
<body>
    <!-- Formularz z różnymi typami kontrolek -->
    <form action="/submit_form" method="post">
        <!-- Pole tekstowe -->
        <label for="name">Imię:</label>
        <input type="text" id="name" name="name" required><br><br>

        <!-- Adres email -->
        <label for="email">Email:</label>
        <input type="email" id="email" name="email" required><br><br>

        <!-- Hasło -->
        <label for="password">Hasło:</label>
        <input type="password" id="password" name="password" required><br><br>

        <!-- Data urodzenia -->
        <label for="birthdate">Data urodzenia:</label>
        <input type="date" id="birthdate" name="birthdate"><br><br>

        <!-- Lista rozwijana -->
        <label for="country">Kraj:</label>
        <select id="country" name="country">
            <option value="poland">Polska</option>
            <option value="

Opis kontrolek

Pole tekstowe (<input type="text">): pozwala użytkownikowi na wprowadzenie pojedynczej linii tekstu.
Email (<input type="email">): specjalne pole tekstowe przeznaczone do wprowadzania adresów email, z walidacją formatu adresu.
Hasło (<input type="password">): pole tekstowe, które ukrywa wprowadzone znaki, służące do wprowadzania haseł.
Data (<input type="date">): kontrolka umożliwiająca wybór daty.
Lista rozwijana (<select>): pozwala na wybór jednej opcji z predefiniowanej listy.
Przyciski radio (<input type="radio">): umożliwiają wybór jednej opcji z grupy.
Checkbox (<input type="checkbox">): pozwala na zaznaczenie lub odznaczenie opcji
Pole tekstowe wieloliniowe (<textarea>): pozwala na wprowadzenie tekstu na wiele linii, idealne do dłuższych wiadomości lub komentarzy.
Przycisk wysyłania (<input type="submit">): przycisk, który przesyła formularz do serwera na adres określony w atrybucie action formularza.

Dodatkowe elementy i atrybuty

Atrybut required: dodany do kontrolek formularza, wymusza na użytkowniku wypełnienie danego pola przed wysłaniem formularza.
Atrybut placeholder: pozwala na wyświetlenie w polu tekstowym krótkiego tekstu podpowiedzi, który znika po kliknięciu w pole.
Atrybut value: określa domyślną wartość kontrolki.
Atrybut name: nazwa kontrolki, ważna dla przetwarzania danych formularza na serwerze.

Jak działa formularz?

Kiedy użytkownik wypełnia formularz i naciska przycisk wysyłania, przeglądarka zbiera dane z wszystkich kontrolek w formularzu (które mają atrybut name) i wysyła je do serwera używając metody określonej w atrybucie method formularza (GET lub POST). Serwer przetwarza dane, może zwrócić odpowiedź, na przykład potwierdzenie odbioru lub przekierować użytkownika na inną stronę.

Podsumowanie

Formularze HTML są niezwykle potężnym narzędziem umożliwiającym interakcję z użytkownikiem. Pozwalają na zbieranie, walidację i przesyłanie danych w prosty i efektywny sposób. Dzięki różnorodności kontrolek możliwe jest tworzenie formularzy dostosowanych do konkretnych potrzeb, od prostych ankiet po skomplikowane systemy rejestracji i logowania. Zrozumienie działania i właściwe stosowanie formularzy jest kluczowe dla tworzenia użytecznych i dostępnych stron internetowych.

Jeżeli chcesz przyśpieszyć swoją naukę tworzenia stron chciałbym polecić mój kurs WebDevelopera od podstaw w którym nauczysz się tego języka od podstaw do zaawansowanych jego aspektów.

Poprzedni

Następny