Урок 05 · 13 хв

Форми й поля

Поле без підпису — пастка. Кнопка без type — сюрприз.

Форма збирає дані й надсилає їх. Навіть якщо потім надсилання перехопить JavaScript, розмітка має працювати сама: підписи пов'язані з полями, обов'язковість видно, кнопка робить те, що на ній написано.

Поле з підписом

Можна спитати про це правило«label пов'язаний із полем»

Можна спитати про цей пункт«Суть уроку»

Типи полів

Різний type — різна клавіатура й перевірка

type="email" — браузер перевірить, що це схоже на пошту, на телефоні відкриє зручну клавіатуру.
password приховує введення. Не клади пароль у value заздалегідь.
checkbox — незалежне так/ні. Кілька галочок можуть бути ввімкнені одночасно.
radio з одним name — вибір одного з групи.
required не замінює нормальної перевірки на сервері. Це підказка до надсилання.

Список, довгий текст, кнопка

У button усередині форми тип за замовчуванням — submit. Забув type="button" на «Порахувати» — форма поїде. action — куди надсилати, method — get (параметри в адресі, пошук) або post (тіло запиту, реєстрація і все, що змінює дані). Кожному полю потрібен name: без імені значення не піде.

Документація

MDN · form — action, method, надсилання
MDN · label — зв'язок підпису й поля
MDN · input — типи полів
MDN · button — submit проти button

Можна спитати про цей пункт«Типи полів»

Перевірка

Закріпи, поки не пішов далі

1. Як пов'язати підпис із полем?
2. Кнопка всередині form без type. Що вона зробить після кліку?
3. Чи можна замінити label на placeholder?
4. Навіщо полю атрибут name?