Оригінальна публікація: Forms in HTML – How to Build Basic Forms with HTML
Форми є фундаментальною частиною веброзробки, що дозволяє користувачам ефективно вводити та надсилати дані.
Створення форм в HTML — це досить простий процес. У цій статті ми розглянемо, як створювати базові форми за допомогою елементів <form>, <input> та <button>. Ми також розглянемо різні типи вводу, серед яких текст, пароль, радіокнопки, прапорці та кнопки відправки.
Що таке форма в HTML?
Форма в HTML — це контейнер, який використовується для збору та відправлення даних від відвідувачів вебсайту. Вона діє як інтерактивна область, де користувачі можуть вводити інформацію, таку як текст, варіанти вибору та параметри, які потім можна відправити на сервер для обробки.
Форми є фундаментальним компонентом веброзробки, що дозволяє взаємодіяти з користувачем та обмінюватись даними.
Форми в HTML не обмежуються лише простими введеннями тексту. Вони охоплюють різноманітні функції та типи введення, які покращують функціональність. Форми можуть містити введення тексту, поля для паролів, радіокнопки, прапорці та кнопки відправки, що дозволяє ефективно збирати та обробляти дані від користувачів.
Елемент <form>
Щоб почати створення форми, використайте елемент <form>. Цей елемент визначає контейнер для всіх елементів форми. Ось базовий приклад форми:
<form>
<!-- Елементи форми розташовуються тут -->
</form>
Введення тексту
Поля введення тексту використовують, щоб зібрати текстові дані в одному рядку (наприклад, ім’я чи адреса електронної пошти). Для цього можна використати елемент <input> з атрибутом type зі значенням "text".
<label for="name">Ім’я:</label>
<input type="text" id="name" name="name" placeholder="Введіть своє ім’я">
Результат:
У цьому фрагменті коду атрибут for в елементі <label> пов’язує мітку з полем введення, роблячи її більш доступною та зручною для користувачів.
Введення пароля
Поля введення пароля схожі на поля введення тексту, але введені символи приховуються крапками або зірочками з метою безпеки.
Щоб створити поле введення пароля, встановіть атрибут type на "password".
<label for="password">Пароль:</label>
<input type="password" id="password" name="password" placeholder="Введіть свій пароль">
Результат:
Радіокнопки
Радіокнопки використовують, щоб користувачі вибрали один варіант зі списку. Кожен варіант представлений радіокнопкою.
Щоб створити радіокнопку, використайте елемент <input> з атрибутом type зі значенням "radio".
<form>
<label>Оберіть спосіб оплати:</label>
<input type="radio" id="creditCard" name="paymentMethod" value="creditCard">
<label for="creditCard">Банківська картка</label><br>
<input type="radio" id="paypal" name="paymentMethod" value="paypal">
<label for="paypal">PayPal</label><br>
<input type="radio" id="bitcoin" name="paymentMethod" value="bitcoin">
<label for="bitcoin">Bitcoin</label><br>
</form>
Результат:
У цьому прикладі для груп радіокнопок використано однаковий атрибут name, що групує їх разом та дозволяє користувачеві вибрати лише один варіант з кожної групи.
Прапорці
Прапорці використовують, щоб користувачі вибрали один чи декілька варіантів зі списку. Кожен варіант представлений прапорцем.
Щоб створити прапорець, використайте елемент <input> з атрибутом type зі значенням "checkbox".
<label>Хобі:</label>
<input type="checkbox" id="music" name="interest" value="music">
<label for="music">Музика</label>
<input type="checkbox" id="sports" name="interest" value="sports">
<label for="sports">Спорт</label>
<input type="checkbox" id="reading" name="interest" value="reading">
<label for="reading">Читання</label>
Результат:
За допомогою прапорців користувачі можуть вибрати декілька варіантів відповіді на основі своїх уподобань.
Кнопка відправки
Кнопку відправки використовують, щоб надіслати дані форми на сервер для обробки. Щоб створити кнопку відправки, використайте елемент <button> з атрибутом type зі значенням "submit".
<button type="submit">Надіслати</button>
Результат:
Якщо натиснути на цю кнопку, форму буде надіслано.
Доступність
Ми розглянули основи, однак важливо поглибитись в доступність форм HTML.
Доступність у веброзробці полягає в тому, щоб забезпечити можливість всім користувачам, незалежно від їхніх здібностей чи порушень, сприймати, розуміти, навігувати та взаємодіяти з вмістом вебсайту.
Цей принцип розповсюджується і на форми HTML. Доступні форми не лише етичні, але й часто юридично обов’язкові, оскільки багато країн встановили стандарти та правила доступності в інтернеті для сприяння інклюзивності.
Як створити доступні форми в HTML
Семантичний HTML
Почніть з використання семантичних елементів HTML. Наприклад, використовуйте елемент <form> для обгортання форми, елементи <label> для позначення полів форми та елементи <input> з відповідними атрибутами type.
Семантика допомагає читачам екрана та іншим технологіям зрозуміти вміст.
Позначення
Завжди пов’язуйте поля форми з мітками, використовуючи атрибут for в елементі <label> та атрибут id у відповідному елементі <input>. Це дозволяє користувачам читачів екрана почути мітку, коли вони фокусуються на полі введення, забезпечуючи контекст та ясність.
<label for="name">Ім’я:</label>
<input type="text" id="name" name="name" placeholder="Введіть своє ім’я">
Описовий текст
Використовуйте чіткі та лаконічні мітки, які описують призначення кожного поля форми. Уникайте загальних міток, таких як «Поле 1» або «Введіть дані».
Доступність за допомогою клавіатури
Тестуйте форми, використовуючи для навігації лише клавіатуру. Переконайтеся, що користувачі можуть взаємодіяти з елементами форми (наприклад, вибирати радіокнопки та прапорці) за допомогою клавіш «Tab» та «Enter».
Обробка помилок
Якщо користувач робить помилку, надайте чіткі та допоміжні повідомлення про помилку. Використайте атрибут aria-invalid, щоб вказати, що введення містить помилку.
<input type="text" aria-invalid="true" />
Ролі та атрибути ARIA
Специфікація Accessible Rich Internet Applications (ARIA) надає ролі та атрибути, щоб покращити доступність вмісту вебсайту.
Наприклад, ви можете використати aria-describedby, щоб об’єднати поле з додатковою описовою інформацією.
<label for="password">Пароль:</label>
<input type="password" id="password" name="password" placeholder="Введіть свій пароль" aria-describedby="password-hint">
<div id="password-hint">Пароль повинен містити не менше 8 символів.</div>
Результат:
Fieldset та Legend
Якщо форма містить групи пов’язаних полів, використайте елемент <fieldset> з елементом <legend>, щоб надати заголовок для групи. Це допоможе користувачам зрозуміти групування елементів форми.
<fieldset>
<legend>Інформація про адресу</legend>
<!-- Поля адреси розташовуються тут -->
</fieldset>
Інклюзивний досвід
Створення доступних форм — це не лише юридична вимога, але й можливість надати інклюзивний досвід всім користувачам.
Якщо форма розроблена з урахуванням доступності, ви гарантуєте, що кожен, незалежно від своїх здібностей, може отримати доступ до інформації та послуг, які надає вебсайт.
Доступні форми HTML дотримуються найкращих практик у маркуванні, структурі, навігації за допомогою клавіатури та обробці помилок. Враховуючи ці фактори, ви можете створити форми, які є зручними для всіх користувачів, включно з людьми з порушеннями.
Адаптивність до мобільних пристроїв
У сучасному світі, орієнтованому на мобільність, важливо, щоб форми були адаптованими до різних розмірів екрана. Тестуйте форми на різних пристроях, щоб забезпечити правильну роботу та відтворення як на настільних, так і на мобільних платформах.
Адаптивний дизайн є невіддільною частиною створення позитивного користувацького досвіду.
Об’єднуючи все разом
Тепер, коли ми розглянули різні елементи форми та типи введення, об’єднаємо їх в одну форму. Ось приклад простої форми реєстрації:
<form>
<label for="name">Ім’я:</label>
<input type="text" id="name" name="name" placeholder="Введіть своє ім’я"><br>
<label for="email">Електронна пошта:</label>
<input type="text" id="email" name="email" placeholder="Введіть адресу електронної пошти"><br>
<fieldset>
<legend>Стать:</legend>
<input type="radio" id="male" name="gender" value="male">
<label for="male">Чололовік</label>
<input type="radio" id="female" name="gender" value="female">
<label for="female">Жіноча</label>
</fieldset>
<fieldset>
<legend>Хобі:</legend>
<input type="checkbox" id="music" name="interest" value="music">
<label for="music">Музика</label>
<input type="checkbox" id="sports" name="interest" value="sports">
<label for="sports">Спорт</label>
<input type="checkbox" id="reading" name="interest" value="reading">
<label for="reading">Читання</label>
</fieldset>
<label for="password">Пароль:</label>
<input type="password" id="password" name="password" placeholder="Введіть свій пароль"><br>
<button type="submit">Надіслати</button>
</form>
Результат:
Так виглядає повна форма з полями введення тексту, радіокнопками, прапорцями, полем введення пароля та кнопкою відправки.
Висновок
Створення форм в HTML є важливою навичкою для веброзробки. За допомогою елементів <form>, <input> та <button>, а також розуміння різних типів введення, ви можете створювати інтерактивні та зручні для користувачів форми для збору даних.
Форми є ключовою складовою залучення користувачів, а володіння їх створенням є значним кроком у веброзробці.
У цій статті ми дослідили основи створення форм, включно з полями введення тексту та пароля, радіокнопками, прапорцями та кнопками відправки. Тепер ви знаєте, як створювати та налаштовувати форми для різних потреб на вебсайтах.
Почніть експериментувати та покращуйте вебзастосунки за допомогою форм вже сьогодні :)