Від автора: вітаю вас, друзі. Дана стаття написана для тих, хто тільки почав робити свої перші кроки у світі верстки. Сьогодні ми поговоримо про те, як створити форму на сайті і для чого взагалі потрібні ці самі форми. Почнемо?
Отже, почнемо з того, для чого ж потрібні форми на сайті? Форма на сайті — це основний спосіб передачі даних від клієнта на сервер. Саме тому форми є практично на будь-якому сучасному сайті. Ми зустрічаємо їх часто-густо: форма авторизації, контактна форма реєстрації, форма реєстрації та інші.
Як бачимо, форми — річ потрібна. Як же створити форму на сайті. Для цього потрібно почати з тега form в HTML, саме тег form дає зрозуміти браузеру, що всередині будуть йти всілякі елементи форми (поля форми), які необхідно промалювати на сторінці.
Тег форм має цілий ряд всіляких атрибутів. На практиці найчастіше ви зіткнетеся з трьома з них (інші атрибути використовуються рідко). Отже, це атрибути:
action — адресу сторінки, на яку повинні бути відправлені дані форми;
method — метод надсилання даних форми (POST або GET);
enctype — спосіб кодування даних форми.
Всередині форми розташовуються необхідні поля, список яких досить широкий: текстові поля, текстові поля, що випадають списки, чекбокси і т. д. З усіма ними ми познайомимося в інших статтях. Ну а поки давайте створимо найпростішу форму зворотного зв’язку з трьома полями: ім’я, email, питання і кнопкою надсилання даних форми. Підсумковий код буде приблизно таким:
Ім’я:
Email:
Питання:
Відправити
В результаті ми отримали ось таку простеньку форму:
Виглядає невибагливо, але стилізація форми — це вже справа CSS.
Давайте коротко пройдемося по коду. Отже, ми використовували тег form без атрибутів. Як ви пам’ятаєте, вище я писав, що для тега form часто використовуються атрибути action і method. Якщо їх не вказати, тоді форма буде працювати за замовчуванням. Що це означає?
Атрибут action дозволяє вказати адресу сторінки, на яку буде відправлено дані форми. Відповідно, ця сторінка прийме ці дані і обробляє їх, наприклад, відправить ці дані на email. Для обробки вже необхідний мову програмування, наприклад PHP, але це вже інша тема.
Так от, якщо атрибут action не використовується, тоді дані будуть відправлені на поточну сторінку. Що стосується атрибут method, то він дозволяє вказати спосіб передачі даних. За замовчуванням використовується метод GET, який передає дані через адресний рядок (т. зв. GET-параметри). Також ми можемо вказати в якості методу передачі даних — POST. На відміну від GET, метод POST передає дані в запиті браузера і вони не видно користувачеві. Найчастіше ви будете використовувати саме метод POST.
Тепер щодо полів форми. Для них ми використовували теги input, textarea і button. Тег input з атрибутом type=’text’ створить звичайне текстове поле. Тег input з типом email аналогічний типу text з тією різницею, що браузер перед відправкою перевірить, щоб у полі був введений саме email, в іншому випадку форма не буде відправлена і браузер покаже помилку.
Йдемо далі. Тегу textarea створить текстову область. Ну а button отрисует кнопку для відсилання даних форми на сервер.
Також для полів ми використовували атрибут name, який дозволяє присвоїти ім’я поля. Ім’я повинно бути унікальним для кожного з полів, тобто у формі не повинно бути два поля з однаковими іменами. Ім’я необхідно для того, щоб на сервері розуміти, з якого поля які дані прийшли.
Як бачимо, у створенні HTML форми немає нічого складного, все досить просто. На цьому поточну статтю будемо завершувати. У наступних статтях ми дізнаємося більше про роботу з формами HTML. Ну а якщо ви вже вмієте створювати форми, але поки не вмієте працювати з ними на сервері, тоді обов’язково подивіться цей урок. На цьому все. Удачі!
