Formularze i Dane Użytkownika

Witaj ponownie.

W poprzedniej lekcji nauczyłeś się tworzyć tabele dla danych strukturalnych.

Teraz przechodzimy do formularzy.

Formularze to moment, w którym użytkownicy wreszcie odpowiadają twojej stronie.

Mogą wpisać swoje imię.

Wysłać wiadomość.

Wybrać opcję.

Kliknąć przycisk.

W praktyce formularze zamieniają statyczną stronę w rozmowę.

A czasem w chaos.

Ale uprzejmy chaos.

Czego Się Nauczysz

W tej lekcji nauczysz się:

• czym są formularze HTML;
• jak używać elementu form;
• jak tworzyć pola tekstowe;
• jak używać label;
• dlaczego atrybut name jest ważny;
• jak tworzyć przyciski;
• jak używać textarea;
• jak tworzyć menu select;
• jak używać required;
• częstych błędów z formularzami.

Czym Jest Formularz?

Formularz zbiera informacje od użytkownika.

Przykłady:

• formularze kontaktowe;
• formularze logowania;
• formularze rejestracji;
• pola wyszukiwania;
• zapisy na newsletter;
• formularze opinii;
• formularze zamówień.

Formularz zwykle zawiera pola i przycisk.

Przykład:

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

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

To bardzo mały formularz.

Ale ma już strukturę.

Jak małe biuro z jednym biurkiem i jednym przyciskiem.

Element form

Formularz zaczyna się od form:

<form>
  ...
</form>

Wszystko w środku należy do formularza.

Inputy.

Labele.

Przyciski.

Text area.

Menu select.

Element form jest kontenerem.

Mówi:

Ta grupa elementów działa razem, aby zebrać informacje.

Bardzo oficjalnie.

Prawie jak papierologia.

Ale z mniejszą liczbą pieczątek.

Pola Tekstowe

Pole tekstowe pozwala użytkownikowi wpisać jedną linię tekstu.

Przykład:

<input type="text" name="username">

type="text" oznacza zwykłe pole tekstowe.

Używaj go dla:

• imion;
• nazw użytkownika;
• krótkich wiadomości;
• miast;
• prostych odpowiedzi.

Przykład:

<form>
  <label for="username">Username</label>
  <input id="username" name="username" type="text">
</form>

Użytkownik może pisać w polu.

Strona słucha.

Chociaż raz.

Label

Label opisuje input.

Przykład:

<label for="email">Email</label>
<input id="email" name="email" type="email">

Atrybut for powinien pasować do id inputa.

Tutaj:

<label for="email">
<input id="email">

Oba używają email.

To łączy label z inputem.

Dlaczego to jest przydatne?

• użytkownicy rozumieją, co wpisać;
• czytniki ekranu mogą wyjaśnić pole;
• kliknięcie label aktywuje input;
• formularz staje się bardziej dostępny.

Formularz bez label jest jak drzwi bez napisu.

Może działa.

Ale nikt nie wie, co się dzieje.

Atrybut name

Atrybut name daje inputowi nazwę, gdy formularz zostaje wysłany.

Przykład:

<input type="text" name="firstName">

Bez name, pole może nie zostać poprawnie wysłane.

To ważne.

Przykład:

<input id="name" name="name" type="text">

id łączy input z label.

name identyfikuje dane.

To nie jest to samo.

HTML lubi szczegóły.

Czasem za bardzo.

Placeholder

Placeholder pokazuje tymczasowy tekst wewnątrz inputa.

Przykład:

<input type="text" name="name" placeholder="Wpisz swoje imię">

Może pomóc użytkownikowi zrozumieć, co wpisać.

Ale nie używaj placeholdera zamiast label.

Źle:

<input type="email" placeholder="Email">

Lepiej:

<label for="email">Email</label>
<input id="email" name="email" type="email" placeholder="ty@example.com">

Placeholder znika, gdy użytkownik pisze.

Label zostaje.

Labele są lojalne.

Placeholdery są dramatyczne i znikają.

Input Email

Dla adresów email używaj type="email":

<input type="email" name="email">

Przykład:

<label for="email">Adres email</label>
<input id="email" name="email" type="email">

Przeglądarka może sprawdzić, czy użytkownik wpisał coś podobnego do emaila.

Nie idealnie.

Ale użytecznie.

HTML daje małą pomoc.

Nie cud.

Małą pomoc.

Input Password

Dla haseł używaj type="password":

<input type="password" name="password">

Przeglądarka ukrywa znaki.

Przykład:

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

To przydatne dla formularzy logowania.

Nie używaj zwykłych pól tekstowych dla haseł.

To nie jest “proste”.

To kłopot w kapeluszu.

Pola Wymagane

Możesz zrobić pole wymagane:

<input type="text" name="name" required>

Przeglądarka nie wyśle formularza, jeśli pole jest puste.

Przykład:

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

Używaj required dla ważnych pól.

Ale nie rób wszystkiego wymaganym.

Nikt nie lubi formularza, który pyta o historię życia tylko po to, żeby wysłać “cześć”.

Textarea

Dla dłuższych wiadomości używaj textarea.

Przykład:

<label for="message">Wiadomość</label>
<textarea id="message" name="message"></textarea>

Używaj textarea dla:

• wiadomości kontaktowych;
• komentarzy;
• opisów;
• opinii;
• dłuższych odpowiedzi.

Przykład:

<textarea id="message" name="message" rows="5"></textarea>

Atrybut rows kontroluje widoczną wysokość.

Nie głębię emocjonalną.

Niestety.

Menu Select

Menu select pozwala użytkownikowi wybrać opcję.

Przykład:

<label for="course">Wybierz kurs</label>
<select id="course" name="course">
  <option value="html">HTML</option>
  <option value="css">CSS</option>
  <option value="javascript">JavaScript</option>
</select>

select to menu.

Każde option to jedna opcja.

value to wartość wysyłana z formularzem.

To przydatne, gdy użytkownik ma wybrać z ustalonej listy.

Bardzo cywilizowane.

Bez chaosu z klawiatury.

Przyciski

Formularz zwykle ma przycisk.

Przykład:

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

type="submit" oznacza, że przycisk wysyła formularz.

Przykład:

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

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

Możesz też użyć:

<button type="reset">Reset</button>

Ale ostrożnie.

Przycisk reset może skasować wszystko, co użytkownik wpisał.

To szybka droga do utraty sympatii.

action i method

Formularze mogą mieć action i method.

Przykład:

<form action="/contact" method="post">
  ...
</form>

action mówi, gdzie idą dane formularza.

method mówi, jak są wysyłane.

Popularne metody:

• get;
• post.

Na razie skupiamy się na strukturze HTML.

Obsługa backendu przyjdzie później.

HTML buduje formularz.

Serwer zajmuje się wiadomością.

Jak recepcja i biuro.

Stwórz Formularz Kontaktowy

Stwórz plik:

touch form.html

Dodaj:

<!DOCTYPE html>
<html lang="pl">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Formularz Kontaktowy</title>
</head>
<body>
  <h1>Skontaktuj się ze mną</h1>

  <p>Użyj tego formularza, aby wysłać prostą wiadomość.</p>

  <form action="#" method="post">
    <label for="name">Imię</label>
    <input id="name" name="name" type="text" required>

    <label for="email">Email</label>
    <input id="email" name="email" type="email" required>

    <label for="topic">Temat</label>
    <select id="topic" name="topic">
      <option value="question">Pytanie</option>
      <option value="project">Projekt</option>
      <option value="feedback">Opinia</option>
    </select>

    <label for="message">Wiadomość</label>
    <textarea id="message" name="message" rows="5" required></textarea>

    <button type="submit">Wyślij Wiadomość</button>
  </form>
</body>
</html>

Otwórz go w przeglądarce.

Nie wyśle jeszcze prawdziwego emaila.

Do tego potrzeba backendu albo usługi formularzy.

Ale struktura HTML jest poprawna.

Jeden krok naraz.

Nie trzeba budować Rzymu, Stripe i CRM w jedno popołudnie.

Częste Błędy

Inputy bez label

Źle:

<input type="text" name="name">

Lepiej:

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

Labele są ważne.

Używaj ich.

Brak name

Źle:

<input id="email" type="email">

Lepiej:

<input id="email" name="email" type="email">

Bez name, dane mogą nie zostać poprawnie wysłane.

Text input do wszystkiego

Nieidealnie:

<input type="text" name="message">

Lepiej dla długich wiadomości:

<textarea name="message"></textarea>

Używaj właściwego elementu do zadania.

Nie używaj łyżki do ścinania drzewa.

Praktyka

Stwórz plik:

signup.html

Zbuduj formularz rejestracji z:

• jednym h1;
• jednym akapitem;
• inputem imienia;
• inputem email;
• inputem hasła;
• menu select dla kursu;
• textarea dla wiadomości;
• przyciskiem submit;
• label dla każdego pola;
• required na ważnych polach.

Bez CSS.

Bez JavaScriptu.

Tylko HTML.

Mini Wyzwanie

Stwórz formularz opinii.

Powinien zawierać:

• imię;
• email;
• menu select dla oceny;
• textarea wiadomości;
• przycisk submit;
• użyteczne label;
• placeholdery tam, gdzie pomagają;
• pola wymagane tylko tam, gdzie naprawdę trzeba.

Zachowaj prostotę.

Dobry formularz pyta o to, czego potrzebuje.

Zły formularz pyta o duszę, przepis babci i kod pocztowy dwa razy.

Podsumowanie

Dzisiaj nauczyłeś się, że:

• formularze zbierają dane użytkownika;
• form grupuje elementy formularza;
• input tworzy różne typy pól;
• label opisuje pola i poprawia dostępność;
• id łączy input z label;
• name identyfikuje wysyłane dane;
• placeholder daje tymczasowe wskazówki;
• required robi pole obowiązkowym;
• textarea jest dla dłuższego tekstu;
• select i option tworzą menu rozwijane;
• button type="submit" wysyła formularz;
• action i method opisują, gdzie i jak wysyłane są dane.

Formularze są potężne.

Pozwalają użytkownikom wchodzić w interakcję ze stroną.

Ale buduj je ostrożnie.

Bo formularze to miejsce, gdzie strony przestają mówić i zaczynają słuchać.

Następna Lekcja

W następnej lekcji poznamy semantyczny HTML.

Bo HTML to nie tylko tagi.

To znaczenie.

A znaczenie oddziela czystą stronę od katastrofy typu div soup.