Ostatnia aktualizacja 19 czerwca, 2023
Kodowanie formularzy jest jedną z kluczowych umiejętności przydatnych przy późniejszym tworzeniu stron internetowych. Formularze w HTML-u umożliwiają użytkownikom wprowadzanie danych, które następnie przetwarzane są na serwerze. Dzięki temu użytkownik może np. zapisać się na newsletter lub uzupełnić dane do wykonania transakcji.
Formularz HTML składa się z kilku podstawowych elementów, które obejmują:
<form>: tag, który definiuje formularz,<input>: tag, który definiuje pole do wprowadzania danych. Atrybut “type” określa rodzaj pola do wprowadzania,<label>: tag, który definiuje opis pola do wprowadzania.
Możemy użyć następującego kodu, aby stworzyć formularz zapisu na newsletter. W tej wersji wymaga on jedynie podstawowych informacji typu: imię i nazwisko, adres e-mail i zgoda na przetwarzanie danych. Jest to jeszcze kod w najbardziej surowej formie, ponieważ nie zawiera żadnych stylów ani bardziej skomplikowanego formatowania.
<form action="/submit-newsletter" method="post">
<label for="name">Imię i Nazwisko:</label><br>
<input type="text" id="name" name="name" required><br>
<label for="email">Adres e-mail:</label><br>
<input type="email" id="email" name="email" required><br>
<label for="consent">Zgoda na przetwarzanie danych:</label><br>
<input type="checkbox" id="consent" name="consent" required><br>
<input type="submit" value="Zapisz się">
</form>Co oznaczają poszczególne tagi i atrybuty?
action="/submit-newsletter": określa miejsce wysłania danych z formularza po naciśnięciu przycisku “submit”,method="post": ten atrybut określa, jakie dane będą wysyłane. Metody “post” używa się, gdy dane z formularza przesyła się do serwera,type="text": atrybut określa, że pole do wprowadzania danych jest tekstem,type="email": w tym przypadku atrybut określa pole do wprowadzania danych jako e-mail,type="checkbox": ten atrybut definiuje, że pole do wprowadzania danych jest polem wyboru. Użytkownik musi zaznaczyć to pole, aby wyrazić zgodę na przetwarzanie danych,required: ten atrybut określa, że pole jest wymagane, czyli nie ma możliwości wysłania formularza bez wypełnienia tego pola.
Powyższy formularz stanowi już podstawę do rozbudowy, do której możemy wykorzystać CSS oraz JavaScript.
Weryfikacja poprawności danych w formularzu
Automatyczne sprawdzenie poprawności danych w formularzu można zrealizować za pomocą wbudowanego walidatora formularza HTML5.
Na przykład, chcąc zweryfikować poprawność adresu mailowego, powinniśmy zawrzeć w kodzie formularza atrybut type="email". Sprawdzi on automatycznie, czy wprowadzony ciąg jest prawidłowym adresem mailowym. Współpracuje z atrybutem required, który sprawdza, czy pole nie jest puste.
Sprawdź: Jak zrobić stronę internetową w HTML-u?
Przykładowy kod wygląda następująco:
<form action="/submit-email" method="post">
<label for="email">Adres e-mail:</label><br>
<input type="email" id="email" name="email" required pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$"><br>
<input type="submit" value="Wyślij">
</form>Co oznaczają atrybuty w powyższym kodzie?
type="email": ten atrybut definiuje pole do wprowadzania danych jako e-mail. Wbudowany walidator HTML5 sprawdzi poprawność ciągu znaków,required: atrybut sprawdza, czy pole nie jest puste,pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$": ten atrybut określa dodatkowy wzorzec dla adresu e-mail. Wyrażenie regularne sprawdza, czy wprowadzony adres e-mail składa się z co najmniej jednej części przed znakiem @, zawierającej małe litery, cyfry, kropki, procenty, plusy lub minusy, następnie znaku @, następnie co najmniej jednej części zawierającej małe litery, cyfry, kropki lub minusy, a na końcu co najmniej dwuliterowego kodu kraju lub domeny najwyższego poziomu.
Czytaj także:
InfranView – darmowy program graficzny
LanguageTool – gramatyka, ortografia, interpunkcja w pluginie
