Реальный пиарHTMLОбщее представление → Формы HTML, форма обратной связи

Формы HTML, форма обратной связи

форма обратной связи

Для добавления формы используется тэг FORM. В документе допускается наличие любого количества форм. Но формы не должны быть вложены одна в другую.

Любая форма содержит параметры:

1. Элементы формы, которые представляют собой стандартные поля для ввода информации.
2. Кнопка отправки данных формы на сервер.
3. Адрес программы на веб-сервере, которая будет обрабатывать содержимое данных формы.

Если данные формы не планируется отправлять на сервер, то указывать адрес не обязательно. Возможные параметры тега FORM:

Action. Указывает адрес программы обработчика на сервере.
Enctype. Устанавливает тип для данных, отправляемых вместе с формой.
Method. Указывает метод запроса. Самый распространенный метод – Post.
Target. После обработки формы результат возвращается в виде HTML-документа. И вы можете установить в каком окне (новом или текущем) этот результат отобразится.

Простая форма с однострочным текстовым полем:

<form action= "адрес программы обработчика">
<b>Как ваше имя?</b><br>
<input type=text maxlength=25 size=20 name=t1>
<input type=submit value=OK>
</form>

type=text означает, что в поле будет введен текст. Maxlength – параметр, задающий максимальное число символов в строке формы. Size – размер (ширина) поля формы Через параметр name мы задаем имя поля. Предназначено для того, чтобы обработчик формы мог идентифицировать поле. Type=submit создает кнопку, которая требуется для отправки данных формы программе обработчику. Value задает текст на кнопке.

Ширина текстового поля (size) — величина нестабильная и в разных браузерах может меняться в небольших пределах. Если вам требуется форма фиксированной ширины, то лучше отказаться от использования параметра size и заменить его стилями. К тому же CSS позволяет изменять цвет фона, тип шрифта и рамки вокруг поля.

<html>
<head>
<style type="text/css">
.ft1 {
background: #f0f0f0;
color: red;
border: 2px solid black;
width: 200px;
font-family: Arial, sans-serif;
font-size: 14px;
}
</style>
</head>
<body>
<form action="адрес программы обработчика">
<b>Форма с помощью стилей</b><br>
<input type=text maxlength=40 class="ft1">
<input type=submit value=OK>
</form>
</body>
</html>

Форма обратной связи на html

<p align="center"><b>Ecли у Вас есть вопросы или предложения, напишите нам:</b></p>
<form action="mailto: ttt22@yandex.ru" method=post>
<center><textarea rows=5 cols=40 name=Comments style="font-family:Impact; font-size:16px; background-color:silver; color:blue"></textarea></center>
<p align="center">
<input type=submit value="Oтправить" style="font-family:Arial black; font-size:18px">&nbsp;<input type="reset" value="Сброс" style="font-family:Arial black; font-size:18px; color:red">
</p>
</form>

Здесь мы создали форму обратной связи. Теперь любой посетитель вашего сайта сможет с вами связаться. В примере сообщения будут поступать на ящик “ttt22@yandex.ru”.

Форму обратной связи мы сделали многострочной, используя тэг TEXTAREA. Параметр Cols определяет число символов в одной строке. Через rows мы задаем число строк в форме.

Обратите внимание, как с помощью стилей изменены тип, размер и цвет шрифта формы. Внизу под текстовым полем в примере размещено две кнопки. Одна (Отправить) вам уже знакома. Вторая кнопка (Сброс) создана с помощью параметра reset тэга INPUT. При нажатии этой кнопки весь введенный текст сообщения будет удален.

Однако я недавно протестировал предложенную мною форму обратной связи. И можно сказать, что на данный момент использование многострочного поля textarea уже приводит к некорректной работе формы.

Сам процесс ее работы заключается в выгрузке данных в специальную почтовую программу, установленную на компьютере посетителя, например Microsoft Outlook. И далее уже с помощью этой программы идет реальная отправка сообщения.

Однако из современного браузера выгрузить корректно данные в современную почтовую программу из поля textarea я не смог. Результат всегда неадекватен был.

Единственный рабочий вариант, который я могу предложить:

<div style="text-align:center;">
<form action="mailto:ttt@yandex.ru" enctype="text/plain" method="post">
<input type="submit" value="отправить нам сообщение" /><br />
</form></div>

Имеем только кнопку, при нажатии на которую происходит вызов почтовой программы, установленной на компьютере посетителя (например, Microsoft Outlook).

Но это максимум, что можно выжать из чистого HTML.

Формы html не мой конек. Но я перерыл всю имеющуюся у меня литературу по HTML, и не смог найти другого решения.

Если есть возможность, используйте PHP скрипты для создания формы обратной связи.

На этом мы закончим разбирать основы HTML и CSS. Для тех кто дочитал до конца дам ссылку на интересный сайт htmlbook.ru. Там можно найти много полезной информации по теме HTML и CSS.


Источник: http://www.greenlight5.com

Рекомендуем



Ссылки в HTML, закладки, изображение-ссылка Особенность ссылки состоит в том, что она может указывать не только на html-файл, но и на файл любого типа, причем этот файл может размешаться совсем на другом сайте


Подчеркивание текста тег HR Однако если мы хотим создать подчеркивание прямо под нужным текстом и на его ширину, то разумнее ограничить этот текст тегом SPAN и применить к этому тегу свойство CSS border-bottom


Таблица в HTML. Создание таблиц Как вы поняли, каждая ячейка таблицы, задаваемая через тег TD, тоже имеет свои параметры, часть из которых совпадает с параметрами тега TABLE