Работа с формами (2 часть)

В этой статье мы рассмотрим то, что не вошло в первую часть «Создание форм».

Начнём мы с добавления кнопки-изображения :
Вместо кнопки submit можно использовать рисунок для отправки данных. Клик на этом рисунке дает то же самое, что и нажатие на кнопку submit. Однако, кроме этого, сценарию будут переданы координаты места клика на рисунке. Координаты будут переданы в формате имя.x=коор_X, y=коор_Y. Синтаксис кнопки отправки с рисунком:
1) <input type="image" width="32" height="32" src="/files/screen/less_html_fm1.png">

2) <input name="ImgBtn" type="image" src="url" border="0">

При нажатии мышью на такую кнопку CGI программе будут переданы две переменные : name.x (где name - имя кнопки, а x - x- координата точки нажатия в пикселях), и name.y. Начало координат - левый верхний угол рисунка. Все значения атрибута VALUE игнорируются. Картинка задается тэгом SRC и по синтаксису совпадает с тэгом IMG.

Скрытое текстовое поле
Скрытые поля не отображаются в браузере и обычно используются для передачи данных между сценариями. Хотя передача в скрытых полях работает вполне нормально, в PHP существует другое, более удобное средство -- сеансовые переменные . Впрочем, скрытые поля также используются в некоторых ситуациях и потому заслуживают упоминания.
Синтаксис определения скрытого поля практически идентичен синтаксису текстовых полей, отличается только атрибут типа. Поскольку скрытые поля не отображаются в браузере, привести пример на страницах книги невозможно. Синтаксис определения скрытого поля:
<input type=hidden name=имя_параметра value=значение>
<input type=hidden name=ixx value=20>

Вообще говоря, название этого элемента -- скрытое поле -- несколько неточно. Хотя скрытые поля не отображаются в браузерах, пользователь может просто выполнить команду View Source и увидеть, какие скрытые значения хранятся в форме.

Многострочные текстовые поля. Тег TEXTAREA
В HTML многострочные текстовые поля создаются с помощью тега TEXTAREA. Поле, создаваемое этим тегом, позволяет вводить и отправлять не одну строку, а сразу несколько строк. Синтаксис тега TEXTAREA:

<textarea name=имя [cols=ширина_в_символах] [rows=высота_в_символах] wrap=тип_переноса>
текст по умолчанию</textarea>

<textarea name=ixx cols=45 rows=25 wrap=virtual > Я люблю МатФак</textarea>
<textarea name=ixx cols=20 rows=34 wrap=physical>Лучший факультет в мире !!!!!!</textarea>



Несколько значений относительно использования атрибутов: необязательные параметры cols и rows желательно все-таки указывать. Первый из них задает количество символов в строке, а второй - количество строк в области. Атрибут wrap определяет тип переноса текста, как будет выглядеть текст в поле ввода:
Virtual - справа от текстового поля выводится полоса прокрутки. Вводимый текст выглядит разбитым на строки, а символ новой строки вставляется при нажатии клавиши ENTER;
Physical - этот тип зависит от типа браузера и выглядит по-разному;
None - текст выглядит в поле в том виде, в котором пользователь его вводит. Если текст не уменьщается в одну строку, появляется горизонтальная полоса прокрутки.
Следует заметить, что наиболее удобным является тип Virtual.

Атрибут value

Атрибут value задает значение по умолчанию для поля ввода HTML формы. Оно будет автоматически вставлено в него при заходе на страницу.
Применяется к тегам input, option и другим.

  • В случае текстового поля ввода input содержимое атрибута value будет задавать видимый в поле текст по умолчанию (его можно будет удалить и написать свой).
  • В случае, если атрибут применяется к кнопке, созданной через тег input с атрибутом type в значениях button, submit или reset, атрибут value будет задавать текст кнопк
  • В случае, если атрибут применяется к чекбоксу внешних изменений наблюдаться не будет, но отмеченный чекбокс будет посылать на сервер содержимое этого атрибута. Если атрибута value у чекбокса нет - он будет посылать строку 'on'. Если чекбокс не отмечен - ничего не будет присылаться на сервер не зависимо от наличия атрибута value.
  • Для группы радио переключателей необходимо задавать разные значения атрибута value, чтобы после отправки на сервер, PHP мог определить, какой из переключателей был выбран.
  • В случае, если тегу option не задан атрибут value, то на сервер будет отправляться содержимое тега option (то, что между открывающим ). Если же атрибут задан - будет отправлено его содержимое.

<input type="text" value="Текст по умолчанию">
<input type="submit" value="Нажми на меня!">


Атрибут placeholder задает подсказку в поле ввода HTML формы.
Подсказка placeholder нужна для того, чтобы указать пользователю, что именно следует вводить в данное поле. Сама подсказка будет расположена в поле ввода, но, в отличие от атрибута value, будет пропадать автоматически при попытке ввести текст.
Применяется к тегам input, textarea.
Применить CSS стили к подсказке placeholder вы можете с помощью псевдокласса placeholder.

<input type="text" placeholder="Введите имя">
<input type="text" placeholder="ixx">

Следующее что мы сегодня рассмотрим, этоТег fieldset
Тег fieldset группирует поля HTML формы.
Результат при этом обводится рамкой, а подпись, которая создается с помощью тега legend, разрывает эту рамку, создавая неповторимый другими средствами эффект (см. пример).
Если назначить тегу legend какие-либо CSS стили для позиционирования (float, position и т.п.), то его содержимое уйдет с рамки и станет в нужное место (разрыва в рамке при этом больше не будет).

<form><fieldset><legend>Данные студента</legend><input type="text"></fieldset>
	<fieldset><legend>Данные преподавателя</legend><input type="text"></fieldset></form>

Данные студента

Данные преподавателя

В данном примере форма разбита на два логических блока с помощью двух тегов fieldset.

Один из способов заставить форму работать - применить к ней обработку событий JavaScript.
При нажатии на кнопку в ней возникает событие "OnClick", которое можно обработать написав функцию-обработчик.
Например, создадим простейшую форму, складывающую два числа по нажатию кнопки.
Создадим форму для ввода чисел:

<FORM name="calc">
<input name="val1" type="text" value="0" size="4">+
<input name="val2" type="text" value="0" size="4">
<input type="button" value="  =  " onclick="adding(val1, val2)">
<input name="is" type="text" value="0">
</FORM> 


+




И напишем функцию, получающую аргументы из полей val1 и val2 и выводящую результат в поле is:
<script language="JavaScript"> function adding(val1, val2)
{
document.calc.is.value=eval(parseFloat(document.calc.val1.value)+parseFloat(document.calc.val2.value));
}
</script> 

Следующее что я бы хотела рассмотреть - XForms
XForms являются альтернативой традиционным веб-формам, и позволяют использовать их на множестве платформ и браузеров, а также реализовывать нестандартные представления форм, например, в виде PDF-документа.
Первое существенное отличие XForms заключается в том, как форма отсылается клиенту.
Стандартная HTML-форма отправляет данные как application/x-www-form-urlencoded, а XForms для передачи данных использует разметку XML.
Если вы решили работать с XForms, скорее всего вы захотите получить отправленные пользователем данные в формате XML. В таком случае обратите внимание на переменную $HTTP_RAW_POST_DATA, в ней содержится XML-документ, сгенерированный браузером, который в дальнейшем можно обработать предпочитаемым вами движком XSLT или парсером XML.
Если XML-разметка вас не интересует, и вы хотите, чтобы передаваемые данные были помещены в стандартный массив $_POST, вы можете указать клиентскому браузеру на необходимость отправлять данные в формате application/x-www-form-urlencoded. Для этого установите атрибут method значением urlencoded-post.
Использование XForm совместно с массивом $_POST:

<h:html xmlns:h="http://www.w3.org/1999/xhtml"
        xmlns="http://www.w3.org/2002/xforms">
<h:head> <h:title>Search</h:title>
 <model>
 <submission action="http://example.com/search"
              method="urlencoded-post" id="s"/>
 </model></h:head>
<h:body>
<h:p>
  <input ref="q"><label>Find</label></input>
  <submit submission="s"><label>Go</label></submit>
 </h:p></h:body>
</h:html>

Руководство XForms для HTML( http://www.w3.org/MarkUp/Forms/2003/xforms-for-html-authors.html ) содержит детальное описание создания XForms.