Пошук уроків, статей та іншого контенту
Як правильно розмічати форми — типи input, обов'язкові атрибути та зв'язок з label.
Тег <form> групує пов'язані поля вводу в одну логічну одиницю, яку браузер уміє валідувати й відправляти без жодного JavaScript — сама HTML-розмітка форми вже несе значну частину поведінки, яку інакше довелось би реалізовувати вручну.
<form action="/login" method="post">
<label for="email">Email</label>
<input type="email" id="email" name="email" required />
<label for="password">Пароль</label>
<input type="password" id="password" name="password" required minlength="8" />
<button type="submit">Увійти</button>
</form>Атрибут for у <label> повинен збігатися зі значенням id відповідного поля — це не просто стилістична конвенція: клік по тексту підпису переносить фокус на поле, а скрінрідери озвучують підпис разом із полем саме завдяки цьому зв'язку, а не візуальному розташуванню поруч.
type="email" — базова перевірка формату й мобільна клавіатура з символом @ напоготові.
type="password" — приховує введені символи.
type="number" — обмежує ввід числами, зі спінером збільшення/зменшення в більшості браузерів.
type="tel", type="date", type="checkbox", type="radio" — кожен зі своєю нативною поведінкою й типовим елементом керування браузера.
type="text" для геть усього (включно з email, номерами телефону) — поширена, але недбала звичка: конкретніший тип дає безкоштовну базову валідацію формату й правильну мобільну клавіатуру без жодного JavaScript.
<input type="text" required minlength="3" maxlength="20" pattern="[A-Za-z0-9_]+" />required, minlength, maxlength, pattern — браузер блокує відправлення форми, якщо значення не відповідає цим атрибутам, показуючи вбудоване повідомлення про помилку. Це не замінює серверну валідацію (вона обов'язкова так само, як і для будь-якого API — CLAUDE.md проєкту прямо вимагає валідувати вхідні дані на сервері), а лише дає миттєвий, зручний фідбек користувачу до відправлення запиту.
label без атрибута for (чи не обгортає поле напряму) — клік по підпису не переносить фокус, а скрінрідер не пов'язує підпис із полем.
type="text" для email, телефону, чисел — втрачається безкоштовна нативна валідація формату й правильна мобільна клавіатура.
Покладатись лише на HTML-атрибути валідації (required, pattern) без серверної перевірки — клієнтську HTML-валідацію легко обійти, надіславши запит напряму, в обхід форми.
Тег form групує поля вводу в логічну одиницю з нативною браузерною поведінкою; label, зв'язаний через for з id поля, — не косметика, а обов'язковий зв'язок для доступності й зручності кліку. Конкретний тип input (email, tel, number) дає безкоштовну базову валідацію формату й правильну мобільну клавіатуру, але не замінює обов'язкову серверну валідацію тих самих даних.