HTML-формы

формыHTML-формы играют значительную роль в повышении интерактивности сайта, т.к. помогают посетителю получить наибольшую отдачу от изучения Вашего ресурса.
Формы используют для интерактивного обмена данными между пользователем и веб-сайтом. Html форма — является лишь каркасом, созданным с помощью языка html, иными словами, HTML-формы только показывает браузеру расположение полей для ввода данных и определяет формат заполнения. Но для того, чтобы после нажатии на кнопку Ваши данные были обработаны, нужна другая технология — программа или скрипт, которые привязываются к данной форме. Чаще всего такие программы делаются на языке php.

Все составляющие HTML-формы находятся внутри элемента <form>...</form>, который и служит каркасом всей формы., внутрь которого вставляются другие html-элементы.
Закрывающий тег </form> обязателен.

Параметры тега FORM

  • Action — указывает адрес документа или CGI-программы , которые должны обрабатывать данные формы.
  • Method — данный параметр определяет серверу метод запроса. Допустимые значения: METHOD=GET и METHOD=POST  . Если значение данного атрибута не определено, то по-умолчанию используется METHOD=GET.
  • Enctype — определяет тип кодировки отсылаемой информации HTML-формы.
  • Name — задаёт имя HTML-формы.
  • Target — определяет имя окна или фрейма, куда будет загружен результат обработки формы.

Рассмотрим пример использования тега <form>:

Вставим в шаблон следующий код:

<form action="/html/example/handler.php">
<p><b>Сколько месяцев в год?</b></p>
<p><input type="radio" name="answer" value="a1">Шесть<br>
<input type="radio" name="answer" value="a2">Десять<br>
<input type="radio" name="answer" value="a3">Двенадцать</p>
<p><input type="submit"></p>
</form>

Результат на рисунке:

тег FORM

Рассмотрим параметр  Method

Значение GET параметрa Method применяется для передачи данных в адресной строке. Его использование ограничено небольшим объёмом передаваемой информации(4kb).
Удобство же применения метода GET состоит в том, что адрес с его параметрами можно использовать многократно, сохраняя его, допустим, в «Избранное» браузера, и к тому же изменять значения параметров прямо в самой адресной строке.

Значение POST отсылает на сервер данные в запросе браузера, что позволяет отправить большее количество информации, чем по методу GET. Этот параметр используются на форумах, в почтовых службах, при заполнении баз данных и т.п.

Рассмотрим пример применения значения POST на выводе простого текста:

<form action="/cgi-bin/handler.cgi" method="post">
<p>Простой вывод текста</p>
</form>

Результат виден ниже:

метод post

Далее рассмотрим элемент INPUT, который задаёт поля html-форм такие, как кнопки, поля ввода, чекбоксы и т.д. Элемент не предусматривает конечного тега.

Атрибуты элемент INPUT:

  • TYPE — задаёт тип поля ввода данных. По умолчанию используется значение «text». При использовании типа «password» информация показывается зашифрованными символами.
  • NAME — определяет имя, применяемое при передаче данных html-формы серверу.
  • SIZE — задаёт размер поля в символах. По умолчанию данное поле имеет значение 24 символа.
  • Атрибут MAXLENGTH — определяет максимальное количество знаков, которые можно использовать в текстовом поле. Значение этого поля может быть больше количества символов,которое указанно в атрибуте SIZE. По умолчанию данное количество не ограничено.

Рассмотрим пример:

<form name="pr3" method="post" action="obrabotchik.php">
ФИО: <br>
<input type="text" name="fio" size="35">

Результат на рисунке:

элемент INPUT

Атрибут VALUE определяет, что будет написано в поле для ввода по умолчанию. Пример:

<form name="pr4" method="post" action="obrabotchik.php">
Введите название фильма: <br>
<input type="text" name="film" size="40" value="например: Мумия возвращается">
</form>

Результат:

атрибут VALUE

Как видно из рисунка — появилась надпись, указанная между кавычками в значении атрибута  VALUE, и можно ввести ещё несколько символов, т. к. в атрибуте size (размер поля для введения  символов) стоит число 40.

Продолжение темы "HTML-формы" в следующем посте.

Поделиться в соц. сетях

Опубликовать в Google Buzz
Опубликовать в Google Plus
Опубликовать в LiveJournal
Опубликовать в Мой Мир
Опубликовать в Одноклассники

Реклама

Тракбаки /
Пингбаки

  1. Создание HTML-форм дизайн HTML-форм

Оставить комментарий

Перед отправкой формы:
Human test by Not Captcha