HTML · lekcja 08

Formularze w HTML 2/2: wybór z listy, pola wyboru i pliki

Rozgrzewka: label, name, GET i POST
Jedna odpowiedź czy wiele: radio, checkbox, select
Data, suwak, kolor, plik i grupowanie pól w ramki
Ćwiczenie: ankieta o grach

Rozgrzewka · 3 minuty

Trzy pytania z poprzedniej lekcji

Po co label ma atrybut for?
Które pole dotrze do serwera: <input id="age"> czy <input name="age">?
Kiedy formularz wysyła się przez GET, a kiedy przez POST?

MDN: How to structure a web form
developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/How_to_structure_a_web_form

Część 1 · Pola wyboru

Jedna odpowiedź czy wiele?

<label><input type="radio" name="frequency" value="daily"> codziennie</label>
<label><input type="radio" name="frequency" value="rare"> rzadko</label>
<label><input type="checkbox" name="genre" value="rpg" checked> RPG</label>

Radio z tym samym name to jedna grupa: kliknięcie jednego odznacza resztę. Do serwera idzie tylko value zaznaczonego pola, checked zaznacza na start. label obejmujący pole działa bez for i id.

MDN: Basic native form controls
developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/Basic_native_form_controls

Część 1 · Lista rozwijana

Długa lista, jedna odpowiedź: select

<select name="className" id="className">
  <optgroup label="Klasy trzecie">
    <option value="3ti" selected>3TI</option>  <option value="3te">3TE</option>
  </optgroup>
</select>

MDN: Other form controls
developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/Other_form_controls

Część 2 · Nowe typy pól

Data, suwak, kolor i plik

Wystarczy zmienić type, a przeglądarka sama rysuje gotowy element:

type	Co pokazuje przeglądarka	Co warto dopisać
`date`	kalendarz: rok, miesiąc, dzień	`min`, `max` (najwcześniejsza i najpóźniejsza data)
`range`	suwak, bez liczby: dobry, gdy dokładna wartość nie jest ważna	`min`, `max`, `step`, `value`; skalę wpiszcie w `label`
`color`	próbnik kolorów, wysyła zapis typu `#4fc3f7`	nic
`file`	przycisk „Wybierz plik”	`accept="image/*"` (tylko obrazy), `multiple` (kilka plików)

Plik wymaga dwóch zmian w form. Pierwsza: method="post", bo plik nie zmieści się w adresie strony. Druga: enctype="multipart/form-data", bo dane idą jako paczka złożona z części, każde pole to osobna część, plik też.

Ciekawostka z MDN: range bez min, max, step i tak dostaje domyślnie 0, 100, 1.

MDN: The HTML5 input types · MDN: Sending form data (…/Forms/Sending_and_retrieving_form_data)
developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/HTML5_input_types · ciekawostka: developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input/range

Część 2 · Grupowanie pól

Pola, które należą do siebie: fieldset i legend

<fieldset>
  <legend>Jak często grasz?</legend>
  <label><input type="radio" name="frequency" value="daily"> codziennie</label>
  <label><input type="radio" name="frequency" value="rare"> rzadko</label>
</fieldset>

Zasada MDN: każda grupa przycisków radio siedzi w swoim fieldset. Pytanie idzie do legend, nie do zwykłego akapitu.

MDN: How to structure a web form
developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/How_to_structure_a_web_form

Część 3 · Sprawdzanie w przeglądarce

Przeglądarka pilnuje za Was

Kilka atrybutów i formularz nie wyśle się z błędnymi danymi. Przeglądarka sama pokaże dymek z komunikatem.

Atrybut	Co sprawdza	Przykład
`required`	pole nie może zostać puste	`<input type="text" required>`
`min`, `max`, `step`	zakres i skok liczby albo daty	`min="1" max="10" step="1"`
`maxlength`, `minlength`	długość wpisanego tekstu	`maxlength="30"`
`pattern`	wzór tekstu (wyrażenie regularne: opis dozwolonych znaków)	`pattern="[0-9]{2}-[0-9]{3}"` kod pocztowy
`type`	format: e-mail, liczba, adres strony	`type="email"`

To wygoda dla użytkownika, nie zabezpieczenie: ktoś złośliwy wyśle dane z pominięciem przeglądarki, więc serwer sprawdza wszystko jeszcze raz.

MDN: Client-side form validation
developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/Form_validation

Część 3 · Przyciski

Wyślij, wyczyść i kiedy nie dawać „wyczyść”

<button type="submit">Wyślij ankietę</button>   wysyła dane na serwer
<button type="reset">Wyczyść</button>           cofa pola do wartości startowych
<button type="button">Pokaż</button>            nic nie robi bez JavaScriptu

button bez type też wysyła. button zamiast input type="submit": łatwiej go ostylować, może mieć w środku inne znaczniki. reset to jedyny sposób, by odznaczyć grupę radio, gdy już coś kliknięto.

Kiedy nie dawać „wyczyść”: na ankiecie czy zamówieniu jedno kliknięcie obok „Wyślij” kasuje kilka minut pisania. Dawajcie go tylko tam, gdzie zaczynanie od nowa ma sens, np. kalkulator albo filtr wyszukiwania.

MDN: Basic native form controls
developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/Basic_native_form_controls

Formularze 2 · egzamin

Tak pytają na egzaminie

1. <input type = "checkbox" name = "text1" value = "text2">
Przedstawione pole input umożliwi

wpisanie hasła.
zaznaczenie opcji.
wpisanie dowolnego tekstu.
wybranie opcji z listy o wartościach text1 i text2.

CKE, E.14 czerwiec 2018, zad. 4

Ćwiczenie 1 · przy komputerze · 15 minut

Ćwiczenie 1: ankieta o grach

Plik survey.html w Twoim folderze, jeden form z method="get" i action="sent.html" (plik z poprzedniej lekcji). Po wysłaniu odczytaj adres: birthYear=2009&genre=rpg.
Ramka fieldset z legend „O Tobie”: radio „Rocznik” (trzy roczniki, wspólne name="birthYear", jedno required) i select „Klasa” z dwoma optgroup.
Ramka „Gry”: cztery checkbox (name="genre"), type="date" „Kiedy ostatnio grałeś?”, type="range" 1–10 z podpisem w label.
Każde pole ma label. Na końcu button „Wyślij ankietę”. Otwórz plik w przeglądarce i sprawdź wysyłkę.

Ma się pojawić: dwie ramki z podpisami, w roczniku jedno zaznaczenie, w gatunkach kilka, kalendarz, suwak. „Wyślij” bez rocznika: dymek i brak wysyłki.

odbiór danych w PHP: rozkład, klasa 4

Ćwiczenie 2 · na kartce · 5 minut

Ćwiczenie 2: radio, checkbox czy select?

Do każdego pytania ankiety dopisz jedno z trzech: radio, checkbox, select.

Ulubiony gatunek gier, jeden z czterech.
Wszystkie języki programowania, które znasz, z listy ośmiu.
Województwo, w którym mieszkasz.
Zgoda na regulamin: tak albo nic.
Ocena lekcji od 1 do 5, jedna cyfra.
Miesiąc urodzenia.

Pytania kontrolne

Trzy pytania na koniec

Co się stanie, gdy trzy przyciski radio dostaną trzy różne name?
Formularz ma method="get" i pole type="file". Czego mu brakuje?
Po co legend, skoro pytanie można napisać nad ramką zwykłym akapitem?

Na następnej lekcji: dodatkowe elementy HTML.

zapowiedź: rozkład SIAI, lekcja 10 „Dodatkowe elementy HTML”

Z realnych wdrożeń

A jak to wygląda w produkcji?

Na lekcji	W produkcji	Status
`label for` przy każdym polu	Standard: audyty dostępności to sprawdzają, czytniki ekranu na tym polegają, a klik w podpis trafia w małe kółko radio.	nadal w użyciu
Pole z `name`	Dochodzi `autocomplete="email"`, `"postal-code"`, `"given-name"`: przeglądarka sama wypełnia dane klienta. Sklepy i logowanie mają to wszędzie.	nadal w użyciu
`required`, `pattern`	Pierwsza warstwa. Serwer sprawdza to samo raz jeszcze, a JavaScript pokazuje własne komunikaty przy polu.	nadal w użyciu
`type="reset"`	W formularzach dla klientów prawie nie występuje: za łatwo skasować wpisane dane.	unikane
`select` z `multiple`	Wymaga trzymania Ctrl, użytkownicy tego nie znają. Zamiast tego lista checkboxów albo gotowy komponent z wyszukiwarką.	zastąpione

autocomplete: MDN, atrybut autocomplete
developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/autocomplete