HTML · lekcja 07

Formularze 1/2: pola tekstowe i przycisk

Jak strona zbiera dane od użytkownika i wysyła je do serwera?

Po co jest formularz i którędy idą dane?
form, action, method: GET czy POST?
Pola input, textarea, etykieta label, przycisk
Ćwiczenie: formularz kontaktowy i odczyt danych z paska adresu

Rozgrzewka · 3 minuty

Trzy pytania na rozgrzewkę

Który znacznik tworzy wiersz tabeli, a który pojedynczą komórkę?
Czym różni się <th> od <td>?
Po co jest atrybut alt w znaczniku <img>?

Formularze · po co

Formularz: dane od Was do serwera

W urzędzie wypełniacie papierowy formularz i oddajecie go w okienku. Na stronie robi to formularz HTML: Wy wpisujecie dane, przeglądarka pakuje je i wysyła do serwera, a serwer je przetwarza (logowanie, zamówienie, komentarz).

MDN: Your first form · developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/Your_first_form

Formularze · znacznik form

Znacznik form: gdzie i jak wysłać

<form action="sent.html" method="get">
  … tu będą pola …
  <button type="submit">Wyślij</button>
</form>

form to koperta: wszystko, co jest w środku, zostanie wysłane razem.
action = adres, pod który idą dane (jak adres na kopercie). Tu: plik sent.html w tym samym folderze.
method = sposób wysyłki: get albo post. Za chwilę różnica.
button type="submit" = przycisk „Wyślij”. Bez niego formularz nie ma jak ruszyć.

MDN: <form> · developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/form · przycisk: MDN: Your first form

Formularze · method

GET czy POST: widać w adresie czy nie?

GET: dane widać w pasku adresu. Adres da się skopiować i wysłać koledze. Dobre do wyszukiwania i filtrów. To metoda domyślna, gdy nie wpiszecie method.
POST: dane jadą w środku, nie w adresie. Zawsze do haseł, rejestracji, zamówień.

MDN: <form> (method: get, post) · developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/form

Formularze · pola

Pola: input i textarea

Jedno pole = jeden znacznik <input> (bez zamknięcia). Atrybut type mówi, co można wpisać:

Znacznik	Co robi	Do czego
`<input type="text">`	jedna linia tekstu (domyślny typ)	imię, miasto, tytuł
`<input type="email">`	przeglądarka sprawdza, czy to wygląda jak e-mail; telefon pokazuje klawiaturę z @	adres e-mail
`<input type="password">`	wpisywane znaki zamienia na kropki	hasło
`<input type="number">`	tylko liczby, strzałki góra/dół, klawiatura numeryczna	wiek, ilość sztuk
`<textarea></textarea>`	wiele linii tekstu; ma zamknięcie	wiadomość, opinia

MDN: <input> · developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input · textarea: Your first form

Formularze · etykieta

Etykieta label: podpis przypięty do pola

label to podpis pola. for w etykiecie i id w polu dostają tę samą nazwę: tak przeglądarka wie, który podpis należy do którego pola.
Korzyść: kliknięcie w podpis zaznacza pole (większy cel na telefonie), a czytnik ekranu dla niewidomych czyta podpis zamiast „pole tekstowe puste”.

Ciekawostka z MDN: label da się połączyć z polem jeszcze inaczej, bez for i id. Wystarczy włożyć input prosto do środka znacznika label, a przeglądarka sama rozpozna, że należą do siebie.

MDN: <label> · developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/label · How to structure a web form · ciekawostka: ta sama strona MDN, sekcja „Usage notes”

Formularze · atrybuty pola

Trzy atrybuty: name, placeholder, required

<input type="email" id="email" name="email" placeholder="jan@szkola.pl" required>

name = klucz danych. Pod tą nazwą wartość trafia do serwera: email=jan@szkola.pl. Pole bez name w ogóle nie zostanie wysłane.
id jest dla etykiety (łączy label z polem), name jest dla serwera. Zwykle dajecie im tę samą wartość.
placeholder = szara podpowiedź w polu. Znika, gdy zaczniecie pisać. Nie zastępuje etykiety: bez label po wpisaniu tekstu nikt nie wie, czego pole dotyczy.
required = pole obowiązkowe. Puste pole: przeglądarka nie wyśle formularza i pokaże komunikat przy polu.

MDN: <input> (name, placeholder, required) · developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input

Egzamin INF.03

Tak pytają na egzaminie

1. Aby pobrać dane z formularza HTML, tak aby nie były one widoczne w adresie URL, należy zastosować

metodę GET.
metodę POST.
jedynie funkcje z biblioteki PDO.
same kontrolki bez użycia formularza.

2. W formularzu zdefiniowano kontrolki do wpisania imienia i nazwiska. Który atrybut reprezentuje podpowiedź umiejscowioną w polu kontrolki, znikającą w momencie, gdy użytkownik rozpocznie wpisywanie wartości?

<label for="firstName">Imię: </label> <input id="firstName" value="Wpisz dane" title="Wpisz imię"><br>
<label for="lastName">Nazwisko: </label> <input id="lastName" placeholder="Wpisz dane" title="Wpisz nazwisko">

for
title
value
placeholder

CKE, EE.09 styczeń 2023, zad. 26 i 30

Ćwiczenie 1 · przy komputerze · 15 minut

Ćwiczenie 1: formularz kontaktowy

W swoim folderze w htdocs: plik form.html ze szkieletem i h1 „Napisz do nas”.
Obok zrób plik sent.html: szkielet i h1 „Dziękujemy za wiadomość”.
W form.html dodaj form z action="sent.html" i method="get".
W środku cztery pola, każde z label (for = id) i name: imię (text), e-mail (email), wiek (number), wiadomość (textarea). Imię i e-mail z required. Każde pole w osobnym <p>.
Na końcu button type="submit" z napisem „Wyślij”.
Otwórz localhost/nazwisko/form.html, wypełnij, wyślij. Odczytaj dane z paska adresu. Czy klik w etykietę zaznacza pole? Czy pusty e-mail blokuje wysyłkę?

Ma się pojawić: po wysłaniu strona „Dziękujemy…”, a w adresie sent.html?firstName=…&email=…&age=…&message=…. Spacje i polskie litery przeglądarka zamienia na kody (+, %C5%82), to normalne.

wzór: MDN: Your first form

Ćwiczenie 2 · na kartce · 4 minuty

Ćwiczenie 2: dobierz typ pola

Do każdej danej dopiszcie, jakiego pola użyjecie (input type="…" albo textarea):

Hasło do konta.
Adres e-mail do potwierdzenia zamówienia.
Liczba biletów (od 1 do 10).
Nazwa miasta.
Opinia o produkcie, kilka zdań.

Dodatkowo: które z tych danych wysłalibyście metodą GET, a których nie?

Pytania kontrolne

Sprawdźcie się: trzy pytania

Po co polu potrzebny jest atrybut name i co się stanie, gdy go zabraknie?
Formularz logowania ma pole z hasłem. Którą metodę wybieracie i dlaczego?
Co zyskujecie, gdy label ma for równe id pola?

Na następnej lekcji: pola wyboru (checkbox, radio), lista rozwijana select i grupowanie pól.

Rozkład: Formularze w HTML (godzina 2 z 2)

Z realnych wdrożeń

A jak to wygląda w produkcji?

Na lekcji	W produkcji	Status
`required` w przeglądarce	Dane sprawdza także serwer, zawsze. Kontrolę w przeglądarce da się wyłączyć albo wysłać dane bez formularza.	nadal w użyciu, nigdy samo
`method="get"`	Tylko wyszukiwarki i filtry (adres da się zapisać i podesłać). Hasła, dane osobowe, zamówienia: POST.	nadal w użyciu
Hasło w `input type="password"`	Tylko przez HTTPS (kłódka w adresie). Bez tego hasło leci przez sieć jawnym tekstem, a przeglądarka ostrzega użytkownika.	wymóg
`placeholder` zamiast `label`	Wciąż spotykane w „ładnych” formularzach; audyty dostępności to wytykają.	unikane
`label` z `for` = `id`	Standard: każde pole ma etykietę, sprawdzają to testy dostępności.	nadal w użyciu

MDN: <input> · developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input