Шаг 19 - Изящные формы

Про формы я не стал писать в описании языка HTML потому, что не зная механизма работы с ними толку от них не добъешься. Теперь же в разделе посвященному CGI я добрался до программирования и потребовалось описание форм...

Что же такое "формы" ?

Форма это элемент языка HTML, которая предназначена для подготовки и отправки данных шлюзу CGI.

Тег формы записывается в следующем виде:

<form action="..." method="..." enctype="...">
 .....
</form>
action
Указывает на ресурс, который будет обрабатывать эту форму, т.е. URL адрес шлюза CGI. Все современные браузеры также могут отправлять форму по почте, для этого предназначен специальный формат указания ресурса: "mailto:_почтовый@адрес_" (например, mailto:dron@mjk.msk.ru)
method
Указывает метод передачи данных шлюзу из формы. Может принимать значения GET и POST. По умолчанию используется GET.
enctype
Устанавливает метод кодировки данных при передаче (их MIME тип). По умолчанию установлен в application/x-www-form-urlencoded. Для отправки по почте лучше пользоваться text/plain, хотя и для обычных шлюзов он иногда тоже используется.

Поля форм

Естественно просто тег формы сам работать не будет. Для того, чтобы заносить в форму какие-то данные в языке Html существует три элемента input, select, textarea.

Элемент INPUT

Элемент input обеспечивает ввод однострочных полей с информацией. Также внутри этого элемента ничего не может быть, и поэтому закрывающая метка запрещена. У него существует много параметров, которые задают вид вводимой информации, ее длинну и т.д.

type
Этот параметр устанавливает тип поля, или иначе тип вводимой информации:
type=text
Устанавливается по умолчанию. Задает однострочное текстовое поле ввода. Размер поля, который измеряется в количестве видимых символов, задается с помошью параметра size. Размер вводимой строки не ограничен, но при надобности может ограничиваться атрибутом maxlength. Если существует начальное значение текста, т.е. содержимое данного поля при загрузке документа, то оно задается с помощью атрибута value. Для присвоения имени полю используется атрибут name. Он для правильности должен присутствовать у любого поля в форме. Пример:
   <input type=text size=45 name=file value=win.com>
type=password
Этот тип поля полностью аналогичен предыдущему текстовому полю, только вместо вводимых символов показывает один символ называемый символом-маской. Во многих браузерах, да и вообще системах символ-маска отображается символом звездочки.
type=checkbox
Предназначается для простых логических параметров или параметров, которые могут принимать множество различных значений. Отображается в виде помечаемого галочкой квадрата. Для задания имени параметра используется атрибут name, а для задания значения параметра используется value. При создании параметров, которые могут принимать много значений, имена квадратов задающих эти значения должны совпадать. Начальное состояние квадрата, т.е. отмечен он или нет, задается атрибутом checked. Этот атрибут не имеет значений и сам используется для определения отмеченности, т.е. если его нет, то квадрат не отмечен.
  <input type=checkbox name=send value=yes checked> посылать данные.
Значение квадрата посылается только в случае когда он отмечен, поэтому нет атрибута задающего его значение в случае неотмеченности. Если имена квадратов совпадают (а это может быть в случае нескольких выборов), то каждый квадрат создает при отправке свою пару имя/значение, а это может усложнить обработку данных CGI шлюзами, поэтому я Вам советую присваивать каждому квадрату разные имена.
type=radio
Используется для выбора одного значения из списка нескольких значений. Каждая кнопка в друппе должна иметь одинаковое имя задаваемое параметром name, а также собственное значение, которое задает атрибут value. Одна радиокнока должна инициализироваться как отмеченная атрибутом checked.
  Вы слушаете ?<br>
  <input type=radio name=music value=rap checked> Rap
  <input type=radio name=music value=pop> Pop
  <input type=radio name=music value=metall> Metall
  <input type=radio name=music value=classic> Classic
type=submit
Создает кнопку, при нажатии на которую содержимое формы будет отправляться обрабатывающему шлюзу. Текст кнопки задается атрибутом value. Если кнопка имеет атрибут name, то браузер посылает пару имя/значение при передаче данных. Это может быть полезно для того, чтобы изменить каким-нибудь образом метод обработкии даннх шлюзом.
  <input type=submit value=SEND>
type=image
Предназначается для создания отправляющей кнопки в виде изображения. Очень полезно если вам не нравится кнопка создаваемая браузером. Атрибут name задает имя кнопки. Для указания URL изображения используется атрибут src, также можно использовать все атрибуты, которые имеет тег изображений <IMG>. При отправке данных браузер отправляет также координаты точки на изображении, по которой был совершен щелчок мыши.
type=reset
Создает кнопку, которая по назначению является противоположной Submit. Короче эта кнопка сбрасывает все значения в форме и устанавливает их по умолчанию или заданные при инициализации,т.е. атрибутами value.
type=file
Это поле предназначается для вставки в отправляемые данные содержимого файла, имя которого пользователь набирает в текстовом поле. Современные, а тем более графические браузеры отображают рядом с текстовым полем кнопку, при нажатии на которую можно выбрать файл в интерактивном режиме. Для управления шириной и максимальной длинной текста используются атрибуты size и maxlength, также как в type=text. Некоторые браузеры поддерживают ограничение на передачу файлов определенных типов. Список разрешенных типов MIME указывается с помощью атрибута accept.
  <input type=file name=mpeg size=40 maxlength=300 accept="video/mpeg">
type=hidden
Эта штука используется для отправки данных шлюзам, которые не отбражаются на странице и их значения пользователь задать не может. Почти всегда используется для хранения служебной информации. Обазательно должны содержать атрибуты name и value
  <input type=hidden name=color value=black">
name
Используется для задания имени полю формы.
value
Используется для задания начального значения поля.
checked
Устанавливает признак отсеченности в полях типа checkbox и radio
size
Устанавливает видимый размер текстовых полей.
maxlength
Устанавливает маскимальную длинну текста, который можно ввести в текстовые поля.
src, align и т.д.
Атрибуты, которые использует графическая кнопка. Подробнее о них в описании тега <img>

Элемент SELECT

Создает меню, из которого можно выбрать один или несколько элементов. Элемент select должен иметь закрывающую метку. Внутри него размещаются элементы option, которые задают значения пунктов меню. Меню имеющие возможность выбора нескольких элементов отображается в виде списка, при выборе только одного элемента меню отображается в виде выпадающего.

Элемент select имеет следующие атрибуты.

name
Указавае имя меню, которые будет использоваться при передаче. Вобщем-то все аналогично предыдущим элементам.
size
Этот атрибут устанавливает высоту меню в строках, если оно имеет возможность выбора нескольких элементов.
multiple
Присутствие этого атрибута указывает на возможность выбора нескольких элементо меню.

Атрибуты элемента option

selected
Указывает на то, что этот элемент меню инициализируется как выделенный при загрузке документа.
value
Указывает значение, которое будет передано обработчику формы вместе с атрибутом name, указанного в теге select.
Элемент option может не иметь закрывающей метки.

Пример:

  <select name=color>
    <option value=red checked> Red
    <option value=green> Green
    <option value=blue> Blue
  </select>

Элемент TEXTAREA

Элемент textarea создает текстовое поле в форме. Если элемент имеет закрывающую метку, то все что заключено между метками считается инициализирующим содержимым, т.е. имеет такое же значение, как и атрибут value у предыдущих элементов. Этот элемент может иметь следующие атрибуты:
name
Думаю ясно для чего этот атрибут :-).
rows
Устанавливает высоту видимого размер поля для ввода текста. Задается в виде количества видимых строк текста.
cols
Устанавливает количество видимых сиволов в строке.
Если введенный текст не помещается в область выделенную для ввода, то браузер должен обеспечить прокрутку содержимого.
  <textarea name=text cols=60 rows=15>
    Сюда вы должны ввести текст :-)
  </textarea>

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


Предыдущий Шаг | Следующий Шаг | Оглавление
Автор Кузин Андрей.