Lekcja4

Lekcja 4: Tworzenie formularzy – Bo prosić o e-mail na żywo to trochę niezręczne

Witaj w Lekcji 4! Teraz, gdy twoja strona ma już obrazy i linki, czas przejść na wyższy poziom i zacząć interakcję z odwiedzającymi. Jak? Przez formularze! Niezależnie od tego, czy chcesz zbierać e-maile, pytać o opinie, czy rozstrzygnąć wieloletni spór, czy ananas powinien być na pizzy, HTML-owe formularze załatwią sprawę (i nie będą wymagały niezręcznych rozmów).

Tag `<form>`: Kręgosłup każdego formularza

W HTML formularze tworzy się za pomocą tagu <form>. Wyobraź sobie go jako magiczne pudełko, które zbiera wszystkie dane wprowadzone przez użytkownika i przesyła je do ciebie. Oto podstawowa struktura:

<form action="twoj-url-serwera" method="post">
    <!-- Tutaj będą elementy formularza -->
</form>

action: Tutaj będą wysyłane dane z formularza (zazwyczaj na serwer).
method: Zwykle używa się post (dane wysyłane w tle) lub get (dane pojawiają się w URL, jak w wyszukiwarce Google).

Prosty przykład:

<form action="/submit" method="post">
    <!-- Elementy formularza -->
    <input type="text" name="name" placeholder="Twoje imię">
    <input type="email" name="email" placeholder="Twój e-mail">
    <button type="submit">Wyślij</button>
</form>

Zadanie: Stwórz swój pierwszy formularz

Spróbuj stworzyć prosty formularz zbierający imię i e-mail. Nie przejmuj się teraz serwerem, na razie uczymy się podstaw (i unikamy niezręcznych próśb w rzeczywistości).

Pola tekstowe: Gdzie dzieje się magia

Formularze bez pól tekstowych to jak pizza bez sera — coś brakuje. Pola tekstowe to miejsca, gdzie użytkownicy wpisują swoje dane. Oto kilka najczęściej używanych:

<input type="text"> dla zwykłego tekstu (np. imię).
<input type="email"> dla adresu e-mail (albo przynajmniej próby jego uzyskania).
<input type="password"> dla ukrytych pól (np. hasło lub przepis na babciowy piernik).

Przykład z wieloma polami:

<form action="/submit" method="post">
    <label for="name">Imię:</label>
    <input type="text" id="name" name="name" placeholder="Twoje imię">
    
    <label for="email">E-mail:</label>
    <input type="email" id="email" name="email" placeholder="Twój e-mail">
    
    <label for="password">Hasło:</label>
    <input type="password" id="password" name="password" placeholder="Twoje hasło">
    
    <button type="submit">Zarejestruj się</button>
</form>

Zadanie: Dodaj więcej pól

Stwórz formularz zbierający imię, e-mail i hasło. Chcesz trochę urozmaicić? Zapytaj o ulubiony kolor lub preferencje dotyczące pizzy (bo to zawsze gorący temat).

Przycisk radiowy i checkboxy: Daj ludziom wybór

Chcesz, aby użytkownicy wybierali? Użyj przycisków radiowych lub checkboxów:

Przyciski radiowe: Użytkownik może wybrać tylko jedną opcję.
Checkboxy: Można zaznaczyć więcej niż jedną opcję.

Przykład z przyciskami radiowymi i checkboxami:

<form action="/submit" method="post">
    <label>Wybierz swój ulubiony kolor:</label><br>
    <input type="radio" id="red" name="color" value="red">
    <label for="red">Czerwony</label><br>
    
    <input type="radio" id="blue" name="color" value="blue">
    <label for="blue">Niebieski</label><br>
    
    <label>Wybierz ulubioną pizzę:</label><br>
    <input type="checkbox" id="margherita" name="pizza" value="margherita">
    <label for="margherita">Margherita</label><br>
    
    <input type="checkbox" id="diavola" name="pizza" value="diavola">
    <label for="diavola">Diavola</label><br>
    
    <button type="submit">Wyślij</button>
</form>

Zadanie: Dodaj przyciski radiowe i checkboxy

Stwórz formularz, który pozwala użytkownikowi wybrać ulubiony kolor i ulubioną pizzę. Kto nie lubi dobrego quizu o pizzy?

Hostowanie swojej strony z pomocą Caddy

Gdy już dodasz formularz na swoją stronę, czas ponownie skorzystać z Caddy, aby zaprezentować ją światu (lub przynajmniej znajomym).

Krok 1: Otwórz terminal

Przejdź do katalogu, gdzie zapisany jest twój plik HTML:

cd ~/my-website

Krok 2: Uruchom Caddy

Uruchom tę komendę, aby lokalnie hostować swoją stronę na porcie 8080:

caddy file-server --listen :8080

Krok 3: Otwórz swoją stronę

Otwórz przeglądarkę i wejdź na http://localhost:8080, aby zobaczyć swoją nową, interaktywną stronę. Teraz możesz zbierać ciekawe (lub totalnie przypadkowe) informacje od odwiedzających!

Podsumowanie:

W tej lekcji nauczyłeś się:

Jak tworzyć formularze HTML za pomocą taga <form>.
Jak dodawać pola tekstowe do zbierania danych.
Jak używać przycisków radiowych i checkboxów, aby dać użytkownikom wybór.
Jak hostować swoją zaktualizowaną stronę za pomocą Caddy do testowania.

Twoja strona jest teraz interaktywna i gotowa do zbierania wszelkich informacji (na przykład, kto jest za ananasem na pizzy, a kto przeciw!). W kolejnym odcinku zajmiemy się stylizacją strony za pomocą CSS. Przygotuj się na więcej przygód w świecie projektowania stron!

HTML Początkujący Web Design