Создание форм

Формы представляют собой наиболее важные интерактивные элементы HTML, позволяющие разработчикам страниц интерактивно взаимодействовать с посетителями. С их помощью пользователь может возвращать комментарии по поводу посещения определенного узла, пересылать запросы или регистрироваться. Разработчик задает вопросы, создавая форму, а пользователь отвечает на них заполняя её. Содержимое формы либо передаётся сценарию CGI, либо по электронной почте посылается получателю. Сам процесс создания формы состоит из двух этапов. Первый заключается в создании самой формы, а второй заключает в себе создание на сервере сценария CGI, написанного на любом языке серверного программирования. Форма создается при помощи различных тэгов и атрибутов, заключенных в пару <form></form>:

Тэг <form>.

<form> и </form> - создает форму (Web-эквивалент диалогового окна Windows). Все теги форм, размещенные между тегами lt;form> и </form> принадлежат этой форме.

Тэг <form> является необходимым условием для всех форм. Он может иметь следующие атрибуты:

method

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

Метод передачи данных определяет каким способом будут переданы данные формы по протоколу HTTP. Есть два способа передачи данных - GET и POST. Метод GET передает данные в адресной строке. Метод POST передает данные по протоколу, скрывая их; после каких либо действий данные уничтожаются. Передавать данные методом GET неудобно и небезопасно, поэтому его применяют как правило только в поисковых машинах или при отсутствии возможности использовать язык серверного программирования (При этом язык JavaScript способен считывать эти данные из адресной строки).

action

Этот атрибут определяет путь к сценарию CGI или адрес электронной почты.

enctype

Кодировка, или MIME-тип отправляемого сообщения. Если Вы отсылаете данные на обрабатывающую страницу, не меняйте этот параметр(за исключением отправки файлов), в противном случае, для отправки сообщений можно использовать text/html или text/plain.

name

Уникальное имя формы

autocomplete

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

О том, что такое MIME-типы, смотрим здесь

Синтаксис формы для сценария:

<form method="get|post" action="URL сценария">
</form>

Синтаксис формы для почты:

<form method="get|post" action="mailto:адрес">
</form>

Теги формы: <input /> и <textarea>(</textarea>).

<input /> - Основной тег формы. Может создавать различные элементы, используя обязательный атрибут type. Поддерживает много различных атрибутов.

<textarea> и </textarea> - создает форму (Web-эквивалент диалогового окна Windows). Все теги форм, размещенные между тегами lt;form> и </form> принадлежат этой форме.

Параметры тега <input />

alt: Альтернативный текст для кнопки с изображением.
autocomplete: Включение или выключение автозаполнения текста.
: Предварительно активированный переключатель или флажок.
disabled: Блокирует доступ и изменение элемента.
maxlength: Максимальное количество символов разрешенных в тексте.
name: Уникальное имя поля, предназначено для того, чтобы обработчик формы мог его идентифицировать. Исключение - переключатели (input type="radio"), где всей группе переключателей присваивается одно имя.
readonly: Устанавливает, что поле не может изменяться пользователем.
size: Ширина текстового поля.
src: Адрес графического файла для поля с изображением.
type: Сообщает браузеру, к какому типу относится элемент формы.
value: Значение элемента. Для кнопок - это текст, выводимый пользователю. В текстовых полях - сам текст. В переключателях и списках используется для скриптов.

Атрибут type тега <input />:

Табл. 2. Значения параметра type
Тип	Описание	Вид
button	Кнопка.
checkbox	Флажки. Позволяют выбрать более одного варианта из предложенных.	Лимонад Чай Кофе
file	Поле для ввода имени файла, который пересылается на сервер.
hidden	Скрытое поле. Оно никак не отображается на веб-странице. Используется в скриптах для удобства пользователя.
text	Текстовое поле. Предназначено для ввода символов с помощью клавиатуры.
password	Обычное текстовое поле, но отличается от него тем, что все символы показываются звездочками. Предназначено для того, чтобы никто не подглядел вводимый пароль.
radio	Переключатели. Используются, когда следует выбрать один вариант из нескольких предложенных. У каждого тега должен быть атрибут name, значение которого для всех переключателей одинаково.	Ваши страхи Клаустрофобия (боязнь замкнутого пространства) Фентофобия (боязнь насекомых) Пантофобия (боязнь всего)
reset	Кнопка для возвращение данных формы в первоначальное значение.
submit	Кнопка для отправки данных формы на сервер. Атрибут name указывает то, что будет выведено на кнопке.
image	Поле с изображением. При нажатии на рисунок данные формы отправляются на сервер, как при кнопке submit.

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

А теперь удалите текст.

Еще один элемент формы создается тегом <textarea>. Это текстовое поле, состоящее из большого количества строк и столбцов. Имеет такие атрибуты:

Параметры тега <textarea>

autocomplete: Включение или выключение автозаполнения текста.
readonly: Устанавливает, что поле не может изменяться пользователем.
disabled: Блокирует доступ и изменение элемента.
maxlength: Максимальное количество символов разрешенных в тексте.
name: Уникальное имя поля, предназначено для того, чтобы обработчик формы мог его идентифицировать. Исключение - переключатели (input type="radio"), где всей группе переключателей присваивается одно имя.
cols: Количество столбцов
rows: Количество строк
value: Значение элемента, т.е. текст.

Пример - форма, отсылающая сообщение на e-mail.:

<form action="mailto:имя@домен.ru?subject="Тема сообщения"
method="post" enctype="text/plain">
<br /> Комментарии:<br />
<textarea type="text" name="комментарий" rows="5" cols="50"></textarea> <br />
Имя: <br />
<input type="text" name="имя" size="57" /> <br />
E-mail: <br />
<input type="text" name="e-mail" size="52" maxlength="360" /> <br />
<input type="reset" value="Сброс" />
<input type="submit" value="Послать" />
</form>

Пример:

Форму удоно выделять рамкой(<fieldset>).

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

Наконец, раздел "Контент" подошел к концу. Следующий раздел познакомит нас с новой, нелегкой, но интересной технологией - Таблицами стилей

uroki.webservis.ru