Formularze, tworzenie formularzy
Formularze są kluczowym elementem interakcji użytkowników z witryną internetową, umożliwiając przesyłanie danych, takich jak informacje logowania, dane kontaktowe czy zamówienia. Bez formularzy nie mogłaby funkcjonować większość dostępnych witryn.
Tworzenie formularzy
Formularze składają się z kilku elementów. Całość formularza zebrana jest w tagu <form> </form>, w którym znajdują się inne elementy i atrybuty różnych typ pól, przycisków czy metody przesyłania danych.
<form>— Ten element definiuje początek i koniec formularza. Wszystkie elementy formularza muszą być umieszczone wewnątrz tego tagu. Atrybutactiondefiniuje adres URL, do którego zostaną przesłane dane formularza, amethodokreśla sposób przesyłania danych (np.POSTlubGET).Pola tekstowe —
<input>o typietextto podstawowe pole tekstowe, w którym użytkownik może wprowadzać dowolny tekst. Atrybutnamesłuży do identyfikacji pola w przesłanych danych.
<label for="username">Nazwa użytkownika:</label>
<input type="text" id="username" name="username">- Przyciski —
<button>lub<input>o typiesubmitsłuży do przesyłania danych formularza. Przyciski mogą mieć atrybuttypez wartościami takimi jaksubmit,resetczybutton.
<button type="submit">Wyślij</button>
<input type="submit" value="Wyślij">- Listy rozwijane —
<select>pozwala na tworzenie list rozwijanych z opcjami do wyboru. Opcje są definiowane za pomocą tagu<option>, który zawiera atrybutvaluez wartością przypisaną do danej opcji.
<label for="country">Kraj:</label>
<select id="country" name="country">
<option value="poland">Polska</option>
<option value="usa">Stany Zjednoczone</option>
<option value="germany">Niemcy</option>
</select>Przykład prostego formularza z różnymi typami pól:
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
</head>
<body>
<form action="/submit" 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">
<label for="email">Email:</label>
<input type="email" id="email" name="email">
<label for="age">Wiek:</label>
<input type="number" id="age" name="age">
<label for="country">Kraj:</label>
<select id="country" name="country">
<option value="poland">Polska</option>
<option value="usa">Stany Zjednoczone</option>
<option value="germany">Niemcy</option>
</select>
<label for="terms">Akceptuję regulamin:</label>
<input type="checkbox" id="terms" name="terms">
<button type="submit">Wyślij</button>
</form>
</body>
</html>W powyższym przykładzie formularz zawiera różne typy pól, takie jak text, password, email, number, select oraz checkbox. Po wypełnieniu i przesłaniu formularza dane zostaną przekazane do adresu URL określonego w atrybucie action, przy użyciu metody POST.
Warto zapamiętać
Należy zauważyć, że oprócz podstawowych typów pól dostępne są również inne, takie jak radio, file, range, date czy color, które umożliwiają tworzenie bardziej zaawansowanych formularzy. Podobnie jak w przypadku innych elementów HTML stylowanie formularzy oraz walidacja danych wejściowych mogą być zrealizowane również za pomocą CSS i JavaScript.
Czy ten poradnik był pomocny?
Mateusz Turek
Swoją przygodę z projektowaniem stron internetowych rozpocząłem z kursem od Komputer Świat wydanym w marcu 2003 roku w formie małej książeczki. Na przestrzeni 20 lat zaprojektowałem niezliczoną ilość witryn i aplikacji internetowych. Projektowałem dla małych i dużych firm takich jak Oriflame, Top Market, Bezpieczna Rodzina czy Helping Hand.
