Formularze HTML

Bez wątpienia formularze HTML są nieodłączną częścią interaktywnych stron internetowych. Przede wszystkim pozwalają użytkownikom wprowadzać dane, wysyłać je na serwer i otrzymywać odpowiedzi. W HTML tworzenie formularzy jest stosunkowo proste, ale wymaga zrozumienia kilku podstawowych elementów i atrybutów. Dlatego w tym artykule omówię, jak tworzyć formularze HTML krok po kroku, wraz z przykładami.

Formularze HTML – struktura

Element <form> jest podstawowym kontenerem dla formularza. Wszystkie elementy formularza, takie jak pola tekstowe, przyciski submit i inne, powinny być umieszczone wewnątrz tego elementu.

<form action="adres_do_przetworzenia_formularza.php" method="POST">
  <!-- Elementy formularza będą umieszczane tutaj -->
</form>

• action – określa adres URL, do którego zostaną wysłane dane po zatwierdzeniu formularza.
• method – określa metodę, jaką przeglądarka użyje do wysłania danych. Najczęściej stosowane są GET i POST.

Wysyłanie poczty

Aby wysłać wiadomość ze strony w poleceniu action należy podać adres e-mail oraz określić metodę:

• method=”POST” – przesyła dane w żądaniu HTTP, co czyni ją bezpieczniejszą dla poufnych informacji, takich jak hasła
• method=”GET” – przesyła dane jako część adresu URL

Przykład

<form action="mailto:przykladowy_adres@mail.pl" method="post">
Pola formularza
</form>

Formularze HTML – rodzaje pól

• pole tekstowe
• obszar tekstowy
• pole wyboru
• pole zaznaczenia
• lista wyboru
• hasło
• walidacja danych
• wysyłanie
• czyszczenie zawartości
• przycisk

Pole tekstowe

Pole tekstowe (<input>) jest podstawowym sposobem pozyskiwania danych tekstowych od użytkownika.

<label for="name">Imię</label> <input type="text" id="name" name="imie">

• type – określa typ pola, w tym przypadku text
• name – nazwa pola, która zostanie przesłana na serwer wraz z wartością pola
• for="name" w elemencie <label> wskazuje, że etykieta odnosi się do pola tekstowego o identyfikatorze „username”. Dzięki temu, gdy użytkownik kliknie na etykietę „Username:”, pole „username” otrzyma fokus, co ułatwia interakcję użytkownika ze stroną, zwłaszcza osobom korzystającym z czytników ekranowych.

Przykład

Alternatywny sposób zapisu

<label>Imię <input type="text" id="name" name="imie"></label>

Przykład

Formatowanie pola tekstowego

<label for="name">Imię</label> <input type="text" id="name" name="imie" size="30" maxlength="20" />

• size – rozmiar pola
• maxlength – maksymalna ilość znaków

Przykład

Opis bezpośrednio w polu – placeholder

Przede wszystkim atrybut placeholder w HTML jest używany w polach formularza do wyświetlenia krótkiego opisu lub wskazówki dotyczącej oczekiwanego formatu danych, których oczekuje się od użytkownika. Jest to szczególnie przydatne, gdy chcemy zaoferować użytkownikowi wskazówki dotyczące tego, co powinien wprowadzić do danego pola formularza, bez konieczności umieszczania takich informacji w etykietach, co pomaga oszczędzić miejsce na stronie.

<input type="text" name="imie" placeholder="Imię" />

Obszar tekstowy „textarea”

Pole tekstowe wielowierszowe pozwala użytkownikowi wprowadzić dłuższy tekst.

<label>Wiadomość: <textarea name="texarea" rows="4" cols="50"></textarea></label>

• <textarea> – definiuje pole tekstowe wielowierszowe.
• rows i cols – określają liczbę wierszy i kolumn w polu tekstowym.

Przykład

Pole wyboru „radio”

Pole wyboru pozwala użytkownikowi wybrać jedną opcję spośród wielu, ale tylko jedną naraz.

<input type="radio" name="radio" value="wartość" />

• type="radio" – określa, że jest to pole wyboru
• name – wszystkie pola radio z tą samą nazwą tworzą grupę, z której użytkownik może wybrać tylko jedną opcję.

Przycisk typu radio umożliwia zaznaczenie jednej opcji. Przykład A B C

Pole zaznaczenia „checkbox”

Pole zaznaczenia pozwala użytkownikowi zaznaczyć lub odznaczyć daną opcję.

<input type="checkbox" name="checkbox" value="wartość" />

• type="checkbox" – określa, że jest to pole zaznaczenia
• value – wartość, która zostanie przesłana na serwer, jeśli pole zostanie zaznaczone.

Przycisk typu checkbox umożliwia zaznaczenie wielu opcji. Przykład A B C

Lista wyboru „select”

Pole wyboru (<select>) pozwala użytkownikowi wybrać jedną opcję spośród wielu.

• Lista rozwijana

<select name="select">
<option>Opcja</option>
</select>

Przykład

• Lista z możliwością zaznaczenia kilku opcji (jednocześnie wciskamy lewy klawisz „CTRL”)

<select name="multiple" multiple="multiple">
<option>Opcja</option>
</select>

Przykład

Hasło „password”

Pole hasła pozwala użytkownikowi wprowadzić hasło.

<label>Hasło</label> <input type="password" name="password" />

Przykład

Walidacja danych

Aby zapewnić poprawność danych wprowadzanych przez użytkownika, można użyć wbudowanych mechanizmów walidacji w HTML lub JavaScript.

Atrybut „required”

Atrybut required wskazuje, że dane pole formularza jest obowiązkowe do wypełnienia przed wysłaniem formularza. Jeśli użytkownik spróbuje przesłać formularz bez wypełnienia tego pola, przeglądarka wyświetli komunikat o błędzie i uniemożliwi wysłanie formularza.

Przykład użycia atrybutu required:

<form action="/submit-form" method="post">
    <label for="name">Imię:</label>
    <input type="text" id="name" name="name" required><br>
    <label for="email">Email:</label>
    <input type="email" id="email" name="email" required><br>
    
    <input type="submit" value="Wyślij">
</form>

Przykład użycia atrybutu pattern:

<form action="/submit-form" method="post">
    <label for="username">Nazwa użytkownika (tylko litery i cyfry):</label>
    <input type="text" id="username" name="username" pattern="[A-Za-z0-9]+" required><br>
    <label for="phone">Numer telefonu (xxx-xxx-xxxx):</label>
    <input type="tel" id="phone" name="phone" pattern="\d{3}-\d{3}-\d{4}" required><br>
    
    <input type="submit" value="Wyślij">
</form>

W powyższym przykładzie:

• Pole Nazwa użytkownika musi zawierać tylko litery i cyfry. Wyrażenie regularne [A-Za-z0-9]+ oznacza dowolną kombinację liter (zarówno małych, jak i wielkich) oraz cyfr, przy czym + oznacza co najmniej jeden znak.
• Pole Numer telefonu musi być w formacie xxx-xxx-xxxx. Wyrażenie regularne \d{3}-\d{3}-\d{4} oznacza trzy cyfry, myślnik, trzy cyfry, myślnik, cztery cyfry.

Atrybut „pattern”

Atrybut pattern pozwala na określenie wyrażenia regularnego, które dane wejściowe muszą spełniać. Jest to szczególnie przydatne, gdy potrzebujesz, aby dane były w określonym formacie, takim jak numer telefonu, kod pocztowy, itp. Jeśli dane wejściowe nie pasują do wzoru, przeglądarka wyświetli komunikat o błędzie i uniemożliwi wysłanie formularza.

Wysyłanie „submit”

Przycisk submit służy do wysłania formularza.

<input type="submit" value="Wyślij" />

• type="submit" – określa, że jest to przycisk submit
• value – tekst wyświetlany na przycisku.

Przykład

Czyszczenie zawartości „reset”

Przycisk reset służy do resetowania formularza do jego pierwotnego stanu.

<input type="reset" value="Wyczyść formularz" />

• type="reset" – określa, że jest to przycisk reset
• value – tekst wyświetlany na przycisku.

Przykład

Przycisk „button”

Domyślny przycisk button. W odróżnieniu od dwóch powyższych sposobów daje więcej możliwości sformatowania jego wyglądu.

<button type="typ"></button>

Typy przycisku:

• button – domyślny, klikalny przycisk
• submit – wysyłanie
• reset – kasowanie

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

Formularze HTML – podsumowanie

Bez wątpienia formularze HTML są kluczowym elementem tworzenia interaktywnych stron internetowych. Dlatego w tym artykule omówiłem podstawy tworzenia formularzy, różne typy pól, walidację danych oraz przesyłanie danych do serwera. Co więcej zdobycie tych umiejętności pozwoli Ci na budowanie funkcjonalnych i użytecznych formularzy, które poprawią interakcję użytkownika z Twoimi stronami internetowymi.