<input>, <textarea>, <select>, <button>).Всесвітня павутина починалася як інструмент для обміну статичними документами. Проте дуже скоро виникла потреба в двосторонній комунікації — можливості для користувача не лише читати інформацію, але й передавати власні дані на сервер. Для цього і були створені веб-форми.
Сьогодні форми є критично важливим компонентом будь-якого веб-додатка. Ми використовуємо їх скрізь: для реєстрації чи авторизації (введення логіна і пароля), написання коментарів чи повідомлень у чаті, оформлення покупок в інтернет-магазині, завантаження файлів чи навіть використання рядка пошуку в Google.
З розвитком стандарту HTML5 робота з формами зазнала значних покращень. З’явилися нові типи полів, які підказують мобільним пристроям, яку саме клавіатуру відкрити (наприклад, цифрову для введення номера телефону), а також вбудовані механізми перевірки правильності введених даних (валідації) без необхідності писати складний код на JavaScript.
Завдання розробника — не просто розмістити поля для вводу, але й зробити процес заповнення форми максимально зручним, інтуїтивно зрозумілим, і таким, що страхує користувача від помилок.
Будь-яка форма на сторінці починається і закінчується парним тегом <form>. Всередині цього тегу розміщуються різноманітні елементи управління — поля вводу, чекбокси, списки та кнопки відправки.
Тег <form> виступає як “контейнер”, що збирає всі дані зі своїх внутрішніх елементів і готує їх до відправки на сервер.
Основні атрибути тегу <form>:
action: Визначає URL-адресу сервера (або скрипта обробника), куди будуть відправлені дані форми. Наприклад, action="/submit-registration". Якщо атрибут відсутній, дані будуть відправлені на поточну URL-адресу сторінки.method: Визначає HTTP-метод, який буде використано для відправки даних. Два найпопулярніших:
GET: Дані форми приєднуються безпосередньо до URL (наприклад, ?query=cats&sort=asc). Використовується для безпечних запитів, що не змінюють стан сервера (пошук, фільтрація). Не підходить для передачі паролів чи великих обсягів даних.POST: Дані передаються в тілі HTTP-запиту, приховано від очей користувача. Використовується для відправки конфіденційної інформації (паролі), завантаження файлів або коли дані призводять до створення/зміни записів на сервері (реєстрація, оформлення замовлення).Приклад базової структури:
<form action="/login" method="POST">
<!-- Тут будуть розміщені елементи форми -->
</form>
HTML пропонує багатий арсенал елементів (віджетів) для взаємодії з користувачем.
<input>Це найуніверсальніший і найчастіше використовуваний елемент у формах. Його зовнішній вигляд та поведінка кардинально змінюються залежно від значення атрибута type. За замовчуванням type="text".
Це порожній (одинарний) тег: він не вимагає закриваючого тегу.
Ключові стандартні типи:
type="text": Звичайне однорядкове текстове поле.type="password": Поле для введення пароля (символи маскуються крапками або зірочками).type="radio": Перемикач. Використовується в групах, коли користувач має обрати тільки один варіант із декількох (наприклад, вибір статі). Усі radio-кнопки однієї групи повинні мати однаковий атрибут name.type="checkbox": Прапорець. Використовується, коли користувач може обрати одразу кілька варіантів (наприклад, додаткові опції замовлення), або для згоди (“Я погоджуюсь з умовами”).<textarea>Якщо користувачу потрібно ввести багато тексту (кілька абзаців), наприклад, коментар або відгук, замість <input> використовують багаторядкове текстове поле <textarea>. Це парний тег. Текст, розміщений між відкриваючим і закриваючим тегами, стане початковим значенням. Розмір можна задати атрибутами rows (кількість видимих рядків) та cols (кількість видимих символів у рядку), але на практиці розмір частіше контролюють через CSS.
<textarea
name="message"
rows="5"
placeholder="Введіть ваше повідомлення..."
></textarea>
<select> (Випадний список)Дозволяє створити випадний список варіантів. Сам список створюється тегом <select>, а кожен варіант вибору всередині нього визначається тегом <option>. Значення, яке реально піде на сервер при виборі опції, задається в атрибуті value тегу <option>, в той час як текст між тегами <option> та </option> — це те, що бачить користувач.
<select name="city">
<option value="kyiv">Київ</option>
<option value="lviv">Львів</option>
<option value="kharkiv">Харків</option>
</select>
<button>Кнопка може використовуватися як всередині, так і поза формою. Всередині форми вона зазвичай слугує для її відправки.
Атрибут type для кнопки принципово важливий:
type="submit" (за замовчуванням у формі): Натискання призводить до валідації та відправки даних форми на сервер.type="reset": Скидає всі поля форми до їх початкових значень (рідко використовується на практиці сьогодні, бо часто призводить до випадкової втрати даних користувачем).type="button": Звичайна кнопка. Натискання не здійснює жодної стандартної дії. Використовується, коли до кнопки за допомогою JavaScript прив’язується якась кастомна логіка.HTML5 приніс велику кількість нових значень для атрибута type елемента <input>. Вони призначені для більш спеціалізованого введення даних і мають дві значні переваги:
type, він безпечно зведе його до базового type="text".Основні HTML5 типи:
type="email": Очікується електронна адреса (повинна містити @ та домен).type="url": Очікується абсолютна URL-адреса (наприклад, https://google.com).type="tel": Для номерів телефонів (як правило, викликає спеціальну цифрову клавіатуру на телефонах, але формату номерів не перевіряє суворо, оскільки в різних країнах вони відрізняються).type="number": Для введення чисел. Включає стрілочки (спінер) для збільшення/зменшення значення. Дозволяє обмежити ввід атрибутами min, max та встановити крок змін step.type="range": Створює повзунок (слайдер) для вибору числа із заданого діапазону.type="date" / time / datetime-local: Відкривають зручні нативні календарі (date pickers) та селектори часу операційної системи для вибору дати і часу без потреби в JavaScript-бібліотеках.type="color": Викликає системну палітру вибору кольору.type="file": Дозволяє обрати файл (або декілька, з атрибутом multiple) з файлової системи комп’ютера.Окрім type, існують важливі атрибути, які керують поведінкою полів вводу:
name: Критично важливий атрибут. Він задає ім’я за яким дані цього конкретного поля будуть відправлені на сервер. Наприклад, якщо name="username", а користувач ввів “Ivan”, сервер отримає пару username=Ivan. Елемент без атрибута name не бере участі у відправленні форми.
<input type="text" name="user_name"> <!-- Сервер отримає: user_name=значення -->
value: Задає початкове або поточне значення для поля. Це те, що буде написано в ньому при завантаженні сторінки. Для елементів type="radio" чи type="checkbox" це значення відправиться на сервер, якщо цей елемент буде позначений.
<input type="text" value="Початковий текст">
placeholder: Підказка (сірий текст), яка відображається всередині текстового поля (text, email, password тощо), коли воно порожнє. Вона зникає, як тільки користувач починає набирати текст.
<input type="email" placeholder="example@gmail.com">
disabled: Робить поле недоступним для редагування і кліків. Воно виглядає сірим (неактивним). Важливо: Дані з disabled-полів не відправляються на сервер.
<input type="text" value="Тільки для перегляду" disabled>
readonly: Схоже на disabled, користувач не може змінити значення, але поле може отримувати фокус, текст можна виділяти і копіювати, і головне — дані з нього будуть відправлені з формою.
<input type="text" value="ID-123456" readonly>
Валідація — це процес перевірки того, чи дані, які ввів користувач, відповідають вимогам та очікуваному формату, до того, як ці дані будуть прийняті та оброблені.
Формально, справжня, безпечна валідація має проводитися виключно на сервері (Back-end), оскільки будь-яку перевірку в браузері зловмисник може обійти. Проте, клієнтська (браузерна) валідація є життєво необхідною для хорошого UX (User Experience). Вона дозволяє миттєво повідомити користувача про помилки (скажімо, забутий символ “@” в email або занадто короткий пароль), не змушуючи його чекати відповіді сервера після кожного кліку.
Ранні веб-розробники писали багато коду на JavaScript (JS) лише для обробки базових перевірок. HTML5 значно спростив це завдання, ввівши декларативну (вбудовану) перевірку за допомогою спеціальних атрибутів.
Коли користувач натискає кнопку <button type="submit">, браузер автоматично перевіряє поля. Якщо якісь дані введені некоректно, браузер скасовує відправку форми і показує біля помилкового поля стандартизоване повідомлення-підказку (наприклад, “Будь ласка, заповніть це поле”).
Ключові атрибути для HTML5-валідації:
required: Робить поле обов’язковим. Без його заповнення браузер не дозволить відправити форму.minlength та maxlength: Для текстових полів. Визначають мінімальну і максимальну дозволену кількість символів (включно з пробілами).min та max: Для числових полів (type="number", type="range") або дат (type="date"). Визначають найменше і найбільше допустиме значення.pattern: Найпотужніший інструмент валідації. Дозволяє перевірити введене значення на відповідність регулярному виразу (Regular Expression).Популярні приклади регулярних виразів для pattern:
| Ціль валідації | Патерн (Regex) | Пояснення |
|---|---|---|
| Тільки цифри | [0-9]+ |
Дозволяє введення лише цифр (однієї або більше). |
| Поштовий індекс | \d{5} |
Рівно 5 цифр (для України). |
| Номер телефону | \+380\d{9} |
Формат +380 та ще 9 цифр. |
| Логін (Username) | [a-zA-Z0-9_]{3,15} |
Від 3 до 15 символів (літери, цифри, підкреслення). |
| Складний пароль | (?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,} |
Мінімум 8 символів, одна велика, одна мала літера та цифра. |
Важливі нюанси використання pattern:
title: Браузер використовує текст із title, щоб показати його користувачу в спливаючому вікні, якщо перевірка не пройшла. Без title користувач може не зрозуміти, чому його ввід вважається помилковим.pattern має відповідати всьому введеному значенню (автоматично додаються символи початку ^ та кінця $ рядка).pattern не спрацює, якщо поле порожнє. Щоб зробити поле і обов’язковим, і валідним за патерном, використовуйте pattern разом із required.Приклад розширеної валідації:
<!-- Поле для введення українського номера телефону -->
<label for="phone">Телефон (+380...):</label>
<input
type="tel"
id="phone"
name="phone"
placeholder="+380XXXXXXXXX"
pattern="\+380\d{9}"
title="Формат: +380 та 9 цифр (наприклад, +380501234567)"
required
/>
<!-- Поле для створення пароля -->
<label for="password">Пароль:</label>
<input
type="password"
id="password"
name="pwd"
pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}"
title="Пароль має містити мінімум 8 символів, хоча б одну велику літеру, одну малу та одну цифру"
required
/>
Розробники можуть стилізувати елементи в CSS залежно від стану їх валідності за допомогою псевдокласів :valid та :invalid.
Форми — це часто бар’єр для користувачів з обмеженими можливостями (наприклад, незрячі користувачі, які використовують програми зчитування екрану — Screen Readers). Створення правильної структури за допомогою семантичних тегів вирішує більшість проблем.
<label>Він визначає підпис до елемента форми. Це не просто візуальний текст. <label> створює програмний зв’язок між текстом та відповідним <input>.
Коли екранний диктор натрапляє на поле, він читає текст з його <label>. З точки зору UI це також корисно: клік мишкою по тексту <label> автоматично встановлює курсор (фокус) всередину відповідного <input> або перемикає чекбокс.
Зв’язування відбувається через атрибут for на <label>, який має точно співпадати зі значенням атрибуту id на <input>.
<label for="user-email">Електронна пошта:</label>
<input type="email" id="user-email" name="email" />
<!-- Інший спосіб (вкладеність, без атрибута for) -->
<label>
<input type="checkbox" name="subscribe" /> Підписатися на новини
</label>
<fieldset> та <legend>Коли форма велика, її зручно (і семантично правильно) ділити на логічні частини: наприклад, “Особисті дані”, “Адреса доставки”, “Метод оплати”.
<fieldset>: Групує кілька елементів керування всередині форми. Зазвичай браузер малює навколо групи тонку рамку.<legend>: Задає заголовок (назву) для групи <fieldset>, розміщуючись прямо на її верхній рамці.<form>
<fieldset>
<legend>Налаштування сповіщень</legend>
<label><input type="radio" name="notify" value="email" /> Email</label
><br />
<label><input type="radio" name="notify" value="sms" /> SMS</label>
</fieldset>
</form>
<form>, атрибути action і method).<input> є універсальним інструментом. Змінюючи його тип (type), ми змінюємо його поведінку (текст, чекбокси, радіо-кнопки тощо).email, date, number) суттєво покращило взаємодію з мобільними пристроями шляхом відображення оптимізованих клавіатур та інтерфейсів.required, minlength, pattern) дозволяє без написання скриптів перевіряти введені дані і показувати повідомлення про помилки, підвищуючи загальний UX. Втім, вона ніколи не повинна заміняти перевірку на сервері.<label>, <fieldset>, та <legend> забезпечує високий рівень доступності (Accessibility), роблячи форми зручними для користувачів зі сліпотою чи іншими вадами.action у тегу <form>?GET та POST при відправці форми?type="radio" від групи елементів type="checkbox"? Завдяки якому атрибуту групуються радіо-кнопки?name на елементі вводу. Що станеться, якщо його пропустити?type="email", type="date").<label>? Як саме його “пов’язують” із текстовим полем?disabled та readonly?