Tworzenie formularzy internetowych jest niezwykle przydatne i często niezbędne w procesie projektowania stron internetowych. Formularze pozwalają użytkownikom wprowadzać dane i przesyłać je do serwera w celu przetworzenia. W tym artykule omówimy, jak stworzyć formularz w HTML i zapewnimy wskazówki dotyczące budowy efektywnego formularza.
Struktura formularza
Formularz w HTML jest tworzony za pomocą znacznika <form>. Zazwyczaj znajduje się on wewnątrz znacznika <body> strony internetowej. Poniżej przedstawiona jest podstawowa struktura formularza:
<form action="przetwarzanie.php" method="POST">
<!-- Elementy formularza -->
</form>
Znacznik <form> definiuje formularz i określa, jakie działanie (adres URL przetwarzania) powinno zostać podjęte po zatwierdzeniu formularza. Atrybut action wskazuje adres URL, do którego będą wysyłane dane formularza. Atrybut method określa metodę wysyłania danych – w tym przypadku używamy metody POST.
Pola formularza
Pola formularza służą do wprowadzania różnych typów danych. Poniżej przedstawione są przykładowe typy pól formularza:
Pole tekstowe
Pole tekstowe jest używane do wprowadzania krótkiego tekstu. Może to być np. pole służące do wprowadzenia imienia:
<label for="imie">Imię:</label>
<input type="text" id="imie" name="imie">
W powyższym przykładzie używamy znacznika <label> do utworzenia etykiety dla pola tekstowego. Atrybut for wskazuje identyfikator pola tekstowego, a atrybut id określa identyfikator pola tekstowego. Atrybut name jest używany do określenia nazwy pola, która będzie używana do identyfikacji danych wysłanych przez formularz.
Pole wyboru
Pole wyboru pozwala użytkownikowi wybrać jedną lub wiele opcji z dostępnej listy. Może to być na przykład pole służące do wyboru preferowanego języka:
<label>Preferowany język:</label>
<select name="jezyk">
<option value="pl">Polski</option>
<option value="en">Angielski</option>
<option value="de">Niemiecki</option>
</select>
W powyższym przykładzie używamy znacznika <select> do utworzenia pola wyboru. Każda opcja jest reprezentowana przez znacznik <option>. Atrybut name w znaczniku <select> określa nazwę pola wyboru, a atrybuty value określają wartość przypisaną do danej opcji.
Przyciski
Przyciski służą do zatwierdzania formularza lub wykonania innych akcji. Możemy używać różnych typów przycisków, na przykład:
<input type="submit" value="Wyślij">
<input type="reset" value="Resetuj">
W powyższych przykładach używamy znacznika <input> do utworzenia przycisków. Atrybut type określa rodzaj przycisku – „submit” oznacza przycisk zatwierdzania formularza, a „reset” oznacza przycisk resetowania formularza. Atrybut value określa tekst wyświetlany na przycisku.
Walidacja formularza
Walidacja formularza jest ważnym krokiem, który zapewnia poprawność danych wprowadzanych przez użytkowników. Możemy używać atrybutów HTML5, takich jak required, pattern, min i max, aby narzucić określone wymagania dla pól formularza.
Wymagane pola
Aby oznaczyć pole jako wymagane, możemy dodać atrybut required do znacznika pola. Przykład:
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
W powyższym przykładzie pole email jest oznaczone jako wymagane. Użytkownik będzie musiał wprowadzić prawidłowy adres email, aby móc wysłać formularz.
Wzorce pola
Możemy również używać atrybutu pattern, aby narzucić określony format danych. Na przykład, jeśli chcemy, aby pole zawierało tylko liczby, możemy użyć:
<label for="numer">Numer:</label>
<input type="text" id="numer" name="numer" pattern="[0-9]+">
W powyższym przykładzie pole numer będzie akceptować tylko liczby.
Przetwarzanie danych formularza
Po wysłaniu formularza dane są przesyłane do serwera w celu przetworzenia. Możemy używać różnych języków programowania, takich jak PHP, do obsługi przetwarzania danych. W poniższym przykładzie przedstawiona jest prosta metoda obsługi formularza w PHP:
<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") {
$imie = $_POST["imie"];
$email = $_POST["email"];
// Przetwarzanie danych...
}
?>
W powyższym przykładzie pobieramy dane z formularza za pomocą tablicy $_POST. Każde pole formularza jest dostępne poprzez jego nazwę, np. $_POST[„imie”] pobierze wartość wprowadzoną w polu o nazwie „imie”. Następnie możemy przetwarzać te dane według naszych potrzeb.
Jak dodać walidację formularza w HTML?
Aby dodać walidację formularza w HTML, możemy używać atrybutów HTML5, takich jak required, pattern, min i max. Atrybut required oznacza pole jako wymagane, a atrybut pattern narzuca określony format danych.
Jak przetworzyć dane formularza w PHP?
W celu przetworzenia danych formularza w PHP możemy użyć tablicy $_POST. Każde pole formularza jest dostępne za pomocą jego nazwy, np. $_POST[„imie”] pobierze wartość wprowadzoną w polu o nazwie „imie”. Następnie możemy przetwarzać te dane według naszych potrzeb.
Jak dodać przycisk do zatwierdzania formularza?
Aby dodać przycisk do zatwierdzania formularza, możemy użyć znacznika <input> z atrybutem type=”submit”. Na przykład: <input type=”submit” value=”Zatwierdź”>.
Jak zresetować formularz?
Aby zresetować formularz, możemy użyć znacznika <input> z atrybutem type=”reset”. Na przykład: <input type=”reset” value=”Resetuj”>. Kliknięcie przycisku reset spowoduje usunięcie wprowadzonych danych z formularza.
Zobacz także:
