Formularze HTML

W starożytnym Egipcie skrybowie spisywali dane na papirusach - imiona, liczby, informacje o dostawach zboża. Formularze HTML to nowoczesny odpowiednik papirusu skryby! Są kluczowym narzędziem do zbierania informacji od użytkowników strony internetowej. Można je traktować jako interaktywny interfejs, przez który użytkownicy wprowadzają dane, które następnie mogą być przetwarzane, na przykład przez serwer i zapisywane w bazie danych. Formularze są niezbędne do realizacji wielu czynności, takich jak logowanie do serwisu, rejestracja nowego konta czy wysyłanie wiadomości.

Poniżej przedstawiamy podstawowe elementy, które wykorzystuje się przy tworzeniu formularzy:

<form>: To znacznik, który otacza cały formularz. Wszystkie elementy formularza zazwyczaj są zawarte wewnątrz tego znacznika.

<input>: To najbardziej uniwersalny element formularza. Umożliwia użytkownikom wprowadzanie różnego rodzaju danych - od tekstu, przez zaznaczanie opcji, po wysyłanie formularza. Rodzaj danych, które użytkownik może wprowadzić, zależy od atrybutu type tego elementu.

1<input type="text" name="username" placeholder="Wprowadź swoją nazwę użytkownika">
2    

<textarea>: Ten element umożliwia wprowadzenie tekstu o większej objętości. Jest to idealne miejsce na dłuższe komentarze czy opinie.

1<textarea id="comment" name="comment" rows="4" cols="50" placeholder="Wpisz tutaj swój komentarz..." required></textarea>

<select> i <option>: Znacznik <select> pozwala na stworzenie rozwijanej listy, z której użytkownik może wybrać jedną lub więcej opcji. Opcje te są zdefiniowane przez elementy <option> umieszczone wewnątrz <select>.

1<select name="choose">
2<option value="option1">Opcja 1</option>
3<option value="option2">Opcja 2</option>
4</select>

<button>: Umożliwia tworzenie przycisków o różnych funkcjach - mogą one służyć do wysyłania formularza, resetowania wprowadzonych danych czy wywołania określonej funkcji JavaScript.

1<button type="submit">Kliknij mnie!</button>

<label>: To element, który pozwala na dodanie opisu do innych elementów formularza, takich jak <input>. Jest to niezwykle ważne dla zrozumienia przez użytkownika, jakie dane powinien wprowadzić w danym polu.

1<label for="email">E-mail:</label>
2<input type="email" id="email" name="email_adres">

Tworząc formularz, często korzysta się również z różnych atrybutów, które pozwalają na identyfikowanie, etykietowanie i wypełnianie wartościami domyślnymi poszczególnych pól formularza. Przykładowe atrybuty to name, id, value czy placeholder. Za pomocą powyższych elementów i atrybutów, możemy stworzyć formularze o różnym stopniu skomplikowania, które będą adekwatnie odpowiadać na potrzeby naszych użytkowników.

Tworzenie prostego formularza

Podstawowy formularz zaczyna się od znacznika <form>, który określa, gdzie dane mają zostać wysłane, za pomocą atrybutów action i method.

1<form action="/submit" method="post">
2  <!-- Pola formularza -->
3</form>

Pola wprowadzania tekstu

Pola wprowadzania tekstu służą do zbierania małych ilości tekstowych informacji od użytkownika. Są tworzone za pomocą znacznika <input>.

1<label for="username">Nazwa użytkownika:</label>
2<input type="text" id="username" name="username">

Hasła

Do wprowadzania haseł używa się typu password, co powoduje, że wprowadzone znaki są ukryte.

1<label for="password">Hasło:</label>
2<input type="password" id="password" name="password">

Lista rozwijana

Lista rozwijana <select> pozwala wybrać jedną z przygotowanych opcji <option>.

1<label for="monument">Wybierz zabytek:</label>
2<select id="monument" name="monument">
3  <option value="pyramids">Piramidy w Gizie</option>
4  <option value="sphinx">Wielki Sfinks</option>
5</select>

Przesyłanie plików

Formularze mogą także obsługiwać przesyłanie plików, pozwalając użytkownikom na wysyłanie dokumentów, zdjęć itp.

1<label for="file">Wybierz plik:</label>
2<input type="file" id="file" name="file">

Przycisk wysyłania

Aby umożliwić użytkownikowi wysłanie formularza, musisz dodać przycisk wysyłania.

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

Oto przykładowy formularz HTML, który zawiera różne elementy formularza:

1<form>
2  <label for="name">Imię:</label>
3  <input type="text" id="name" name="name">
4  <label for="email">E-mail:</label>
5  <input type="email" id="email" name="email">
6  <label for="password">Hasło:</label>
7  <input type="password" id="password" name="password">
8  <label for="age">Wiek:</label>
9  <input type="number" id="age" name="age" min="0" max="120">
10
11  <label for="gender">Płeć:</label>
12  <select id="gender" name="gender">
13    <option value="">Wybierz</option>
14    <option value="female">Kobieta</option>
15    <option value="male">Mężczyzna</option>
16    <option value="other">Inne</option>
17  </select>
18
19  <label for="newsletter">Subskrybuj newsletter:</label>
20  <input type="checkbox" id="newsletter" name="newsletter">
21
22  <label for="message">Wiadomość:</label>
23  <textarea id="message" name="message"></textarea>
24  <button type="submit">Wyślij</button>
25  <button type="reset">Wyczyść</button>
26</form>

1<form>
2<label for="name">Imię:</label>
3<input type="text" id="name" name="name" placeholder="Wpisz swoje imię" required>
4
5<label for="email">E-mail:</label>
6<input type="email" id="email" name="email" placeholder="Wpisz swój adres e-mail" required>
7
8<label for="password">Hasło:</label>
9<input type="password" id="password" name="password" placeholder="Wpisz swoje hasło" required>
10
11<label for="age">Wiek:</label>
12<input type="number" id="age" name="age" min="0" max="120">
13
14<label for="gender">Płeć:</label>
15<select id="gender" name="gender">
16<option value="">Wybierz</option>
17<option value="female">Kobieta</option>
18<option value="male">Mężczyzna</option>
19<option value="other">Inne</option>
20</select>
21
22<label for="newsletter">Subskrybuj newsletter:</label>
23<input type="checkbox" id="newsletter" name="newsletter">
24
25<label for="message">Wiadomość:</label>
26<textarea id="message" name="message" placeholder="Wpisz swoją wiadomość"></textarea>
27
28<button type="submit">Wyślij</button>
29<button type="reset">Wyczyść</button>
30</form>

Ten przykładowy formularz obejmuje różne elementy formularza, takie jak <input>, <select>, <textarea> i <button>. Użytkownik może wprowadzić swoje imię, adres e-mail, hasło, wiek, płeć, zdecydować, czy chce subskrybować newsletter oraz wpisać wiadomość. Po wypełnieniu formularza, użytkownik może go wysłać, klikając przycisk "Wyślij" lub wyczyścić formularz, klikając przycisk "Wyczyść".

Praktyczne zastosowania formularzy

Formularze HTML są wykorzystywane wszędzie w internecie - od prostych formularzy kontaktowych, przez rejestrację i logowanie, po zaawansowane systemy płatności. Opanowanie tworzenia formularzy to kluczowa umiejętność każdego web developera.

Ćwiczenie: Tworzenie formularzy HTML

W tym ćwiczeniu nauczysz się tworzyć formularze HTML, które są kluczowym narzędziem do zbierania informacji od użytkowników strony internetowej. Twoim zadaniem będzie stworzenie strony internetowej zawierającej formularz rejestracyjny.

Krok 1: Stwórz podstawową strukturę dokumentu HTML

Najpierw stwórz nowy plik HTML i dodaj podstawową strukturę dokumentu HTML.

1<!DOCTYPE html>
2<html lang="pl">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <title>Formularz Rejestracyjny</title>
7</head>
8<body>
9    <main>
10        <!-- Tutaj umieścisz swój formularz -->
11    </main>
12</body>
13</html>

Krok 2: Dodaj formularz HTML

Teraz dodaj formularz wewnątrz elementu <main>. Zacznij od zdefiniowania formularza oraz podstawowych pól tekstowych.

1<form action="/submit" method="post">
2    <label for="name">Imię:</label>
3    <input type="text" id="name" name="name">
4    <label for="email">E-mail:</label>
5    <input type="email" id="email" name="email">
6    <label for="password">Hasło:</label>
7    <input type="password" id="password" name="password">
8</form>

Krok 3: Dodaj dodatkowe pola formularza

Rozszerz formularz o dodatkowe pola, takie jak liczba, wybór płci, checkbox do subskrypcji newslettera oraz textarea na wiadomość.

1<form action="/submit" method="post">
2    <label for="name">Imię:</label>
3    <input type="text" id="name" name="name">
4    <label for="email">E-mail:</label>
5    <input type="email" id="email" name="email">
6    <label for="password">Hasło:</label>
7    <input type="password" id="password" name="password">
8    <label for="age">Wiek:</label>
9    <input type="number" id="age" name="age" min="0" max="120">
10
11    <label for="gender">Płeć:</label>
12    <select id="gender" name="gender">
13        <option value="">Wybierz</option>
14        <option value="female">Kobieta</option>
15        <option value="male">Mężczyzna</option>
16        <option value="other">Inne</option>
17    </select>
18
19    <label for="newsletter">Subskrybuj newsletter:</label>
20    <input type="checkbox" id="newsletter" name="newsletter">
21
22    <label for="message">Wiadomość:</label>
23    <textarea id="message" name="message"></textarea>
24</form>

Krok 4: Dodaj przyciski do formularza

Dodaj przyciski do wysyłania i resetowania formularza.

1<form action="/submit" method="post">
2    <label for="name">Imię:</label>
3    <input type="text" id="name" name="name">
4    <label for="email">E-mail:</label>
5    <input type="email" id="email" name="email">
6    <label for="password">Hasło:</label>
7    <input type="password" id="password" name="password">
8    <label for="age">Wiek:</label>
9    <input type="number" id="age" name="age" min="0" max="120">
10
11    <label for="gender">Płeć:</label>
12    <select id="gender" name="gender">
13        <option value="">Wybierz</option>
14        <option value="female">Kobieta</option>
15        <option value="male">Mężczyzna</option>
16        <option value="other">Inne</option>
17    </select>
18
19    <label for="newsletter">Subskrybuj newsletter:</label>
20    <input type="checkbox" id="newsletter" name="newsletter">
21
22    <label for="message">Wiadomość:</label>
23    <textarea id="message" name="message"></textarea>
24    <button type="submit">Wyślij</button>
25    <button type="reset">Wyczyść</button>
26</form>

Wynik

Po wykonaniu wszystkich kroków twój plik HTML powinien wyglądać następująco:

1<!DOCTYPE html>
2<html lang="pl">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <title>Formularz Rejestracyjny</title>
7</head>
8<body>
9    <main>
10        <form action="/submit" method="post">
11            <label for="name">Imię:</label>
12            <input type="text" id="name" name="name">
13            <label for="email">E-mail:</label>
14            <input type="email" id="email" name="email">
15            <label for="password">Hasło:</label>
16            <input type="password" id="password" name="password">
17            <label for="age">Wiek:</label>
18            <input type="number" id="age" name="age" min="0" max="120">
19
20            <label for="gender">Płeć:</label>
21            <select id="gender" name="gender">
22                <option value="">Wybierz</option>
23                <option value="female">Kobieta</option>
24                <option value="male">Mężczyzna</option>
25                <option value="other">Inne</option>
26            </select>
27
28            <label for="newsletter">Subskrybuj newsletter:</label>
29            <input type="checkbox" id="newsletter" name="newsletter">
30
31            <label for="message">Wiadomość:</label>
32            <textarea id="message" name="message"></textarea>
33            <button type="submit">Wyślij</button>
34            <button type="reset">Wyczyść</button>
35        </form>
36    </main>
37</body>
38</html>

Teraz masz kompletną stronę internetową z formularzem rejestracyjnym. Możesz dalej eksperymentować, dodając więcej pól, zmieniając atrybuty lub stylizując elementy za pomocą CSS, aby poprawić wygląd formularza.