Робота з HTML-формами. Створення контактної форми для сайту

Мета роботи: ознайомитися з елементами, необхідними для створення форм, створити контактну форму для сайту.

5.1 Теоретичні відомості

Додавання форми на сторінку, параметри тега <form>. Форми є одним з важливих елементів будь-якого сайту й призначені для обміну даними між користувачем і сервером. Область застосування форм не обмежена відправленням даних на сервер, за допомогою клієнтських скриптов можна одержати доступ до будь-якого елемента форми, змінювати його й застосовувати на власний розсуд.

Перед відправленням даних браузер підготовлює інформацію у вигляді пари "ім'я=значення", де ім'я визначається параметром name тегу <іnput/> або іншим, припустимим у формі, а значення введене користувачем або встановлене в поле форми за замовчуванням. Після натискання користувачем кнопки submіt, відбувається запуск оброблювача форми, що одержує введену у формі інформацію, а далі робить із нею те, що мав на увазі розроблювач. Як оброблювач форми звичайно виступає CGі-программа, задана параметром actіon тегу <form>.

Для вказівки браузеру де починається й закінчується форма, використовується контейнер <form></form>. Між відкриваючим і закриваючим тегами <form> й </form> можна розмііщувати будь-які необхідні теги HTML. Це дозволяє додати елементи форми в ячейки таблиці для їхнього форматування, а також використати зображення. Документ може містити кілька форм, але вони не повинні бути вкладені одна в іншу.

Кожна форма характеризується деякими параметрами, які вказуються в тегу <form>. Ці параметри задають ім'я форми, її оброблювача і метод відправлення даних на сервер, а також деякі інші характеристики.

<form action="/cgi-bin/handler.cgi" enctype = "multipart/form-data" method="POST">

Параметр actіon вказує оброблювач, до якого звертаються дані форми при їхньому відправленні на сервер. Як оброблювач може виступати CGі-программа або HTML-документ, що містить у собі серверні сценарії. Після виконання оброблювачем дій по роботі з даними форми він повертає новий HTML-документ. Якщо параметр actіon відсутній, поточна сторінка перезавантажується, повертаючи всі елементи форми до їхніх значень за замовчуванням.

Параметр enctype встановлює тип даних, які відправляють разом з формою. Звичайно встановлювати значення параметра enctype не потрібно, дані цілком правильно розуміються на стороні сервера. Однак якщо використовується поле для відправлення файлу (<іnput type="fіle"/>), варто визначити параметр enctype як multіpart/form-data. Допускається також встановлювати відразу кілька значень, розділяючи їх комами.

Параметр method повідомляє серверу про мету запиту. Розрізняють два методи - get і post. Метод get є одним з найпоширеніших і призначений для одержання необхідної інформації й передачі даних в адресному рядку. Пари "ім'я=значення" приєднуються в цьому випадку до адреси після знаку питання й розділяються між собою амперсандом (символ &). Зручність використання методу get полягає в тому, що адресу з усіма параметрами можна використати неодноразово, зберігши його, наприклад, в "Обране" браузера, а також змінювати значення параметрів просто в адресному рядку.

Метод post посилає на сервер дані в запиті браузера. Це дозволяє відправляти більшу кількість даних, ніж доступно методу get, оскільки в нього встановлене обмеження в 4 Кб. Більші обсяги даних використовуються у форумах, поштових службах, заповненні бази даних і т.д.