Урок 27

Створення форм за допомогою HTML та CSS

1. Структура HTML

Форма складається з елементів, які дозволяють користувачеві вводити дані:

• <form> — основний контейнер для форми. Вказуються атрибути action (URL, куди відправляються дані) та method (метод передачі, наприклад, POST чи GET).

• Поля введення:

  • <input> — текстові поля, паролі, електронна пошта тощо.

  • <textarea> — багаторядкове поле введення.

  • <select> — випадаючий список.

• <label> — пов'язує текст із відповідним полем введення через атрибут for. Це підвищує доступність.

• <button> або <input type="submit"> — кнопка для надсилання форми.

2. Стилізація CSS

Форми повинні бути візуально привабливими та функціональними:

• Контейнер: Використовуйте div для обгортання форми, додайте тінь, градієнт, закруглені кути для сучасного вигляду.

• Розміщення: Центруйте форму на сторінці за допомогою Flexbox або Grid.

• Поле введення: Додавайте відступи (padding), округлені кути та змінюйте фон для зручності введення.

• Фокус: Використовуйте :focus, щоб виділити активне поле.

• Кнопки: Застосовуйте градієнти, тіні та анімації для ефекту при натисканні або наведенні.

3. Кращі практики

• Семантика: Завжди використовуйте відповідні теги (label, input, fieldset, legend).

• Доступність: Поля обов’язково повинні бути зв’язані з label.

• Валідація: Використовуйте атрибути HTML (required, pattern, min, max) для валідації даних.

• Мобільна адаптивність: Додайте meta viewport і зробіть поля адаптивними за допомогою % або rem.

• Безпека: Використовуйте HTTPS і захист від CSRF.