Форма обратной связи занимает одно из ключевых мест при создании полноценного сайта, чтобы кратко ознакомиться с этой обширной темой мы создадим небольшую форму, на примере которой рассмотрим основные принципы создания большинства из них.

Вот образец нашей формы:

Код данной формы будет выглядеть следующим образом:

<div align="center"><form action="obrabotka.php" method="POST" name="form1">

Введите ФИО:<br><input type="text" name="fio"><br>

Ведите пароль:<br><input type="password" name="pass"><br>

Введите email:<br><input type="text" name="email"><br>

Выберете вариант<br><input type="radio" name="disk" value="cd">

CD<br><input type="radio" name="disk" value="dvd" checked>

DVD<br><br>

Укажите какие курсы вы хотите видеть на диске:<br><input type="checkbox" name="ch1" value="Да">

Курс по созданию сайтов.<br><input type="checkbox" name="ch2" value="Да" checked>

Курсы по Linux<br><br>

Введите адрес и примечания<br><textarea name="add_text" rows="5" cols="30"></textarea><br><br>

<input type="submit" value="Отправить">

</form></div>

А теперь давайте по порядку разбирать теги, с помощью которых мы создали эту форму.

Вы уже, наверное, поняли, что главным тегом для формирования всего контейнера служит тег <form>

Описание

Тег <FORM> устанавливает форму на веб-странице. Форма предназначена для обмена данными между пользователем и сервером.

Синтаксис

<form action="..."> ... </form>

Параметры

action — Адрес CGI-программы или документа, которые обрабатывает данные формы.

enctype — MIME-тип информации формы.

method — Метод протокола HTTP.

name — Имя формы.

target — Имя окна или фрейма, куда обработчик будет загружать возвращаемый результат.

Закрывающий тег

Обязателен.

К тегу <FORM> мы придали следующие параметры:

Параметр ACTION

Описание

Указывает обработчик, к которому обращаются данные формы при их отправке на сервер. В качестве обработчика может выступать CGI-программа или HTML-документ, который включает в себя серверные сценарии (например, Parser). После выполнения обработчиком действий по работе с данными формы он возвращает новый HTML-документ.

Если параметр action отсутствует, текущая страница перезагружается, возвращая все элементы формы к их значениям по умолчанию.

Синтаксис

<form action="URL">...</form>

Аргументы

В качестве значения принимается полный или относительный путь к серверному файлу (URL).

Обязательный параметр

Да.

Значение по умолчанию

Нет.

Параметр METHOD

Описание

Параметр сообщает серверу о методе запроса.

Синтаксис

<form method="get | post">...</form>

Аргументы

Значение параметра method не зависит от регистра. Различают два метода — GET и POST. Существуют и другие методы, но они пока мало используются.

GET

Этот метод является одним из самых распространенных и предназначен для получения требуемой информации и передачи данных в адресной строке. Пары «имя=значение» присоединяются в этом случае к адресу после вопросительного знака и разделяются между собой амперсандом (символ &). Удобство использования метода GET заключается в том, что адрес со всеми параметрами можно использовать неоднократно, сохранив его, например, в «Избранное» браузера, а также менять значения параметров прямо в адресной строке.

POST

Метод POST посылает на сервер данные в запросе браузера. Это позволяет отправлять большее количество данных, чем доступно методу GET, поскольку у него установлено ограничение в 4 Кб. Большие объемы данных используются в форумах, почтовых службах, заполнении базы данных и т.д

Обязательный параметр

Нет.

Значение по умолчанию

get

Параметр NAME

Описание

Определяет уникальное имя формы. Как правило, имя формы используется для доступа к ее элементам через скрипты.

Синтаксис

<form name="имя">...</form>

Аргументы

В качестве имени используется набор символов, включая числа и буквы. JavaScript чувствителен к регистру, поэтому при обращении к форме по имени через скрипты соблюдайте то же написание, что и в параметре name.

Обязательный параметр

Нет.

Значение по умолчанию

Нет.

Тег INPUT

Описание

Тег <INPUT> является одним из разносторонних элементов формы и позволяет создавать разные элементы интерфейса и обеспечить взаимодействие с пользователем. Главным образом <INPUT> предназначен для создания текстовых полей, различных кнопок, переключателей и флажков. Хотя элемент <INPUT> не требуется помещать внутрь контейнера <FORM>, определяющего форму, но если введенные пользователем данные должны быть отправлены на сервер, где их обрабатывает CGI-программа, то указывать FORM обязательно. То же самое обстоит и в случае обработки данных с помощью клиентских приложений, например, скриптов на языке JavaScript.

Основной параметр тега <INPUT>, определяющий вид элемента — type. Он позволяет задавать следующие элементы формы: текстовое поле (text), поле с паролем (password), переключатель (radio), флажок (checkbox), скрытое поле (hidden), кнопка (button), кнопка для отправки формы (submit), кнопка для очистки формы (reset), поле для отправки файла (file) и кнопка с изображением (image). Для каждого элемента существует свой список параметров, которые определяют его вид и характеристики.

Синтаксис

<form>   <input ...> </form>

Параметры

Align — Определяет выравнивание изображения.

Alt — Альтернативный текст для кнопки с изображением.

Border — Толщина рамки вокруг изображения.

Checked — Предварительно активированный переключатель или флажок.

Disabled — Блокирует доступ и изменение элемента.

Maxlength — Максимальное количество символов разрешенных в тексте.

Name — Имя поля, предназначено для того, чтобы обработчик формы мог его идентифицировать.

Readonly — Устанавливает, что поле не может изменяться пользователем.

Size — Ширина текстового поля.

Value — Значение элемента.

Закрывающий тег

Не требуется.

Тег TEXTAREA

Описание

Поле <TEXTAREA> представляет собой элемент формы для создания области, в которую можно вводить несколько строк текста. В отличие от тега <INPUT> в текстовом поле допустимо делать переносы строк, они сохраняются при отправке данных на сервер.

Между тегами <TEXTAREA> и </TEXTAREA> можно поместить любой текст, который будет отображаться внутри поля.

Синтаксис

<textarea ...> текст </textarea>

Параметры

cols — Ширина поля в символах.

disabled — Блокирует доступ и изменение элемента.

name — Имя поля, предназначено для того, чтобы обработчик формы мог его идентифицировать.

readonly — Устанавливает, что поле не может изменяться пользователем.

rows — Высота поля в строках текста.

wrap — Параметры переноса строк.

Закрывающий тег

Обязателен.

Форма, которую мы создали, является, отправка письма владельцу сайта от заказчика. Для  ее обработки мы использовали следующий код, написанный с помощью языка PHP, прописанный, в файле, который предварительно мы указали в качестве обработчика: obrabotka.php

<?php

if (!isset ($ch1)) {$ch1="нет";}

if (!isset ($ch2)) {$ch2="нет";}

mail («sachamedv.ru»,"Заказ диска","Человек по имени $fio указавший пароль $pass указа свой майл — $email выбрал вариант носителя $disc указал что он хочет видеть на диске следующие курсы: \n курс по созданию сайтов $ch1 \n Курс по созданию книг $ch2 \n в качестве адреса указал $add_text.", «content-type:text/plain; charset = windows-1251\r\n»);

?>

Возможно, Вам будет полезна эта информация:

1. Вставка изображений
2. Списки
3. Создаем ссылки