HTML з нуля: HTML форми. Урок №18 Overcod.net

HTML з нуля: HTML форми. Урок №18

HTML-форми є одним із найважливіших елементів у веб-розробці, оскільки вони дозволяють взаємодіяти з користувачем і збирати дані, які потім можуть бути надіслані на сервер для обробки.

Де і як використовуються форми

Форми використовуються практично на кожному інтерактивному сайті:

Реєстрація та Авторизація: Поля для введення логіна, пароля, електронної пошти.
Контактні форми: Збір імені, email та повідомлення користувача.
Інтернет-магазини: Кошик, оформлення замовлення, введення платіжних даних та адреси доставки.
Пошук: Поле для введення пошукового запиту.
Опитування та тести: Збір відповідей на запитання з різними варіантами вибору.
Завантаження файлів: Дозволяють користувачеві вибрати та надіслати файл на сервер.

Основні теги для форм

Усі елементи форми мають бути укладені в тег <form>.

Тег	Призначення
`<form>`	Визначає HTML-форму. Контейнер для всіх елементів керування.
`<input>`	Найпоширеніший тег для полів введення. Його тип задається атрибутом `type`.
`<label>`	Створює підпис (мітку) для елемента форми, покращує доступність.
`<textarea>`	Визначає багаторядкове текстове поле (для великих обсягів тексту).
`<select>`	Створює спадний список.
`<option>`	Визначає опцію (елемент) у спадному списку `<select>`.
`<button>`	Визначає клікабельну кнопку.
`<fieldset>`	Групує пов’язані елементи у формі.
`<legend>`	Визначає заголовок для групи елементів усередині `<fieldset>`.

Важливі атрибути тегу `<form>`

Атрибут	Значення	Опис
`action`	URL-адреса	Обов’язковий: Вказує адресу скрипта на сервері, куди будуть надіслані дані форми після натискання кнопки “Надіслати”.
`method`	`GET`, `POST`	Визначає HTTP-метод надсилання даних: `GET` (дані передаються в URL, для пошуку) або `POST` (дані в тілі запиту, для реєстрації, паролів). За замовчуванням: `GET`.
`name`	текст	Унікальне ім’я форми (для звернення через JavaScript).
`autocomplete`	`on`, `off`	Вмикає/вимикає автозаповнення полів браузером.
`enctype`	`application/x-www-form-urlencoded`, `multipart/form-data`, `text/plain`	Спосіб кодування даних під час надсилання. `multipart/form-data` використовується під час завантаження файлів.

Основні типи полів `<input>` (Атрибут `type`)

Тег <input> є універсальним, його функціональність визначається атрибутом type.

type	Опис
`text`	Звичайне однорядкове текстове поле. (За замовчуванням, якщо `type` не вказано)
`password`	Поле для пароля (символи приховані).
`submit`	Кнопка для надсилання форми.
`reset`	Кнопка для очищення (скидання) всіх полів форми.
`button`	Звичайна клікабельна кнопка (часто використовується з JavaScript).
`checkbox`	Прапорець (можна вибрати кілька).
`radio`	Перемикач (можна вибрати лише один із групи).
`email`	Поле для введення email-адреси (включає перевірку формату).
`number`	Поле для введення чисел (з можливістю задання `min` та `max`).
`file`	Кнопка для вибору файлу для завантаження.
`hidden`	Приховане поле (не відображається, використовується для передачі технічних даних).

Важливі атрибути полів `<input>`

Атрибут	Призначення
`name`	Обов’язковий: Ім’я поля, яке використовується на сервері для ідентифікації отриманих даних.
`value`	Значення поля за замовчуванням або значення, яке буде надіслано на сервер (для `checkbox`, `radio`).
`placeholder`	Підказка всередині порожнього поля введення.
`required`	Робить поле обов’язковим для заповнення перед надсиланням.
`disabled`	Робить поле неактивним (не можна редагувати і не надсилається).
`checked`	Використовується для `checkbox` та `radio`, щоб відмітити його за замовчуванням.

Приклад коду форми

Створимо просту форму зворотного зв’язку, використовуючи розглянуті теги та атрибути.

<!DOCTYPE html>
<html lang="uk">
<head>
    <meta charset="UTF-8">
    <title>Урок 18: HTML Форми</title>
</head>
<body>

    <h2>Форма зворотного зв'язку</h2>

    <form action="/submit-form" method="POST"> 
        
        <fieldset>
            <legend>Особисті дані</legend>
            
            <div>
                <label for="user_name">Ваше ім'я:</label><br>
                <input type="text" id="user_name" name="user_name" placeholder="Іван" required>
            </div>
            <br>
            
            <div>
                <label for="user_email">Email:</label><br>
                <input type="email" id="user_email" name="user_email" placeholder="example@domain.com" required>
            </div>
            <br>

            <div>
                <label for="user_pass">Пароль:</label><br>
                <input type="password" id="user_pass" name="user_pass" minlength="8" required>
            </div>
            <br>
        </fieldset>

        <div>
            <label for="message_topic">Тема повідомлення:</label><br>
            <select id="message_topic" name="message_topic" required>
                <option value="" disabled selected>-- Виберіть тему --</option>
                <option value="question">Запитання щодо продукту</option>
                <option value="support">Технічна підтримка</option>
                <option value="suggestion">Пропозиція</option>
            </select>
        </div>
        <br>

        <div>
            <label for="message_text">Ваше повідомлення:</label><br>
            <textarea id="message_text" name="message_text" rows="5" cols="40" placeholder="Введіть ваше повідомлення тут..." required></textarea>
        </div>
        <br>
        
        <div>
            <input type="checkbox" id="agreement" name="agreement" required>
            <label for="agreement">Я погоджуюсь з умовами обробки даних</label>
        </div>
        <br>

        <div>
            <input type="submit" value="Надіслати форму">
            <input type="reset" value="Очистити">
        </div>

    </form>

</body>
</html>

Це була основа роботи з HTML-формами. Освоєння цих елементів є ключовим кроком для створення інтерактивних веб-сторінок.

ДОДАТОК — додаткові поля та атрибути HTML-форм

Додаткові типи `<input>`

Вибір файлу з комп’ютера

Вибір кольору

Дата

Дата і час без часових поясів

Вибір місяця

Вибір часу

Вибір номера тижня

Поле для введення числа

Повзунок (range)

Поле для пошуку

Поле для телефону

Поле для URL-адреси