<<Темы

Урок 10. Заполняемые формы (продолжение)

Элемент imput

Элемент INPUT создает поле формы (кнопку, поле ввода, чекбокс и т.п.), содержание которого может быть изменено или активизировано пользователем. Элемент не имеет конечного тэга. Элемент INPUT должен располагаться внутри элемента FORM. Параметры:
name - определяет имя, используемое при передаче содержания данной формы на сервер. Этот параметр необходим для большинства типов элемента input и обычно используется для идентификации поля или для группы полей, связанных логически.
align - определяет способ вертикального выравнивания для изображений. Используется совместно с типом image. Полностью аналогичен параметру ALIGN элемента IMG. По умолчанию имеет значение bottom.
src - задает URL-адрес картинки, используемой при создании графической кнопки, инициирующей передачу данных. Используется совместно с типом image.
size - определяет размер поля в символах.
maxlength - определяет максимальное количество символов, которые можно ввести в текстовом поле. Оно может быть больше, чем количество символов, указанных в параметре size, в этом случае поле будет прокручиваться. По умолчанию количество символов не ограничено.
checked - указывает, что поля типов checkbox или radio активизированы.
value - задает текстовый заголовок для полей любого типа, в том числе и кнопок. Для типов, таких как checkbox или < code>, будет возвращено значение, заданное в параметре value.
accept - конкретизирует тип файла. Используется только совместно с типом file. Значение задается в виде MIME.
type - основной параметр элемента input. Определяет тип поля для ввода данных. Возможные значения:

Значение Описание Пример
<input type=text> Cоздает поле ввода под одну строку текста. Как правило используется совместно с параметрами size и maxlength.
<input type=textarea> Cоздает поле ввода для текста в несколько строк. Но для этих целей лучше использовать элемент texarea.
<input type=file> Дает возможность пользователю приобщить файл к текущей форме. Возможно использование совместно с параметром accept.
<input type=password> Cоздает поле ввода под одну строку, однако текст, вводимый пользователем, отображается в виде "звездочек", скрывая тем самым его содержание от любопытных глаз.
<input type=checkbox> Cоздает поле ввода для атрибутов типа boolean ("да"/"нет") или для атрибутов, которые могут одновременно принимать несколько значений. Эти атрибуты представляют собой несколько полей checkbox, которые могут иметь одинаковые имена. Каждое выбранное поле checkbox создает отдельную пару name/value в информации, посылаемой на сервер, даже если результатом будут дублирующиеся имена. Поле типа checkbox обязательно должно иметь параметры name и value, а также необязательный атрибут checked, который указывает на то, что поле активизировано. можно выбрать
оба варианта
<input type=radio> Cоздает поле ввода для атрибутов, которые принимают одно значение из нескольких возможных. Все радиокнопки в группе должны иметь одинаковые имена, но только выбранная кнопка в группе создает пару name/value, которая будет послана на сервер. Как и для полей checkbox, атрибут checked необязателен; он может быть использован для определения выделенной кнопки в группе кнопок. да
нет
<input type=image> Cоздает графический образ для кнопки, инициализирующей передачу данных на сервер. Местонахождение графического изображения можно задать с помощью параметра src. При передаче данных серверу сообщаются координаты x и y той точки на изображении, где был произведен щелчок клавишей мыши. Координаты измеряются из верхнего левого угла изображения. При этом информация о поле типа image записывается в виде двух пар значений name/value. Значение name получается посредством добавления к названию соответствующего поля image суффиксов .x в случае абсциссы, и .y в случае ординаты.
<input type=submit> Cоздает кнопку, при нажатии которой заполненная форма посылается на сервер. Параметр value в данном случае изменяет надпись на кнопке, содержание которой, заданное по умолчанию, зависит от браузера. Если параметр name указан, то при нажатии данной кнопки к информации, посылаемой на сервер, добавляется пара name/value, указанная для для параметра submit, в противном случае пара не добавляется.
<input type=reset> Cоздает кнопку, перезагружающую поля формы к их первоначальным значениям. Надпись на кнопке может быть изменена с помощью параметра value. По умолчанию надпись на кнопке зависит от браузера.
<input type=hidden> Поля этого типа не отображаются на экране монитора, что позволяет разместить "секретную" информацию в рамках формы. Содержание этого поля посылается на сервер в виде name/value вместе с остальной информацией формы. Этот тип может быть использован для передачи информации о взаимодействии клиент/сервер.  
<input type=button> Позволяет создать кнопку в HTML документе, что добавляет функции при использовании VBScript или JavaScript. Параметр name позволяет задать имя данной кнопке, которое может быть использовано для какой-либо функции в скрипте. Параметр value позволяет задать текст, который будет отображен на кнопке в документе.

Элемент fieldset

Этот элемент позволяет группировать элементы форм (проще говоря, обводит в рамку). Данная группировка помогает пользователям проще ориентироваться в формах, то есть ему сразу становится понятно, что вот все эти элементы относятся именно к этой форме. Кроме того, можно этой группе еще и дать заголовок. Для этого используется элемент legend.

Элемент legend

Имеет атрибут align, который теоретически позволяет размещать название не только в верхнем левом углу, но он не работает почти ни в одном браузере. Самое прекрасное, что на элемент fieldset можно писать стили, то есть вы можете сделать рамку любого цвета и так далее. Ниже приведена форма, которая заключена в элемент fieldset и называется "Ваш комментарий".
<form>
<fieldset style="border: 3px double steelblue; padding: 10px; width: 200px">
<legend align=center>Ваш комментарий</legend>
<p>Вы можете разместить на сайте ваш комментарий, касающийся данной статьи</p>
<table>
<tr><td>Имя:</td><td><input size=12></td></tr>
<tr><td>E-mail:</td><td><input size=12></td></tr>
<tr><td>Страна:</td><td><select>
<option selected>Беларусь
</select></td></tr>
<tr><td colspan=2>Комментарий:<br><textarea rows=4 cols=6></textarea></td></tr>
<tr><td colspan=2><input type="submit" value="отправить"></td></tr>
</table>
</fieldset>
</form>
Ваш комментарий

Вы можете разместить на сайте ваш комментарий, касающийся данной статьи

Имя:
E-mail:
Страна:
Комментарий:
Как видите, форма заключена в достаточно оригинальную рамку с названием, которую очень сложно сделать средствами CSS без использования элементов fieldset и legend. Конечно, пользоваться ими надо с умом, потому что далеко не всегда форме нужна подобная рамка.

Элемент optgroup

Позволяет группировать пункты в элементе select. В этом случае добавляются отступы и названия каждой группы, так что пользователю при выборе необходимого пункта ориентироваться гораздо проще. Название группы задается в атрибуте label элемента optgroup. Кстати, этот элемент браузером Opera 5+ опять же не поддерживается, так что можно с полной уверенностью сказать, что по реализации поддержки форм Opera является худшим браузером. Более того, каждую группу можно раскрасить в свой цвет! Делается это очень просто. Например, первую группу сделаем зеленой, а вторую желтой. Вот пример использования группировки:
<form>
<p>Справочники:
<select name="ask">
<optgroup label="HTML" STYLE="background: #090">
<option label="3.2">HTML 3.2
<option label="4.0">HTML 4.0
</optgroup>
<optgroup label="CSS" STYLE="background: #FF0">
<option label="1">CSS-1
<option label="2">CSS-2
<option label="3">CSS-3
</optgroup>
<option value="js">JavaScript
<option value="dhtml">DHTML
</select></p>
</form>

Справочники:

Итак, кое-что полезное о формах вы, надеюсь, узнали. Плохо то, что браузер Opera 5+ не поддерживает большинство из упомянутых здесь элементов, так пользователи этого браузера всей неземной красоты форм оценить не смогут. Но это исключительно их проблемы.


<<Урок 9 ^ наверх ^ Задание №10Урок 11>>