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

Кнопки Submit и Reset

Все формы, которые посылаются для обработки на сервер, должны включать как минимум одну кнопку "submit" для передачи данных формы на страницу Web, определенную в атрибуте action тега <form>. Для передачи формы можно использовать стандартную кнопку или графическое изображение.

Кнопка <input type="submit"/>

Кнопку передачи формы можно создать с помощью тега <input type="submit"/>, который может выводиться в любом месте формы. Используемый по умолчанию вид кнопки с меткой "Подача запроса" показан ниже.

Рис. 11.19. Используемый по умолчанию вид кнопки передачи формы

Общая форма тега <input type="submit"/> для определения кнопки передачи формы задается на листинге 11.26.

<input type="submit"
  id="id"
  name="name"
  value="text"
/>

Атрибут id

Кнопке submit можно присвоить идентификатор id, если необходимо идентифицировать ее для обработки сценарием браузера. Иначе id не требуется.

Атрибут name

Кнопке submit можно присвоить имя с помощью атрибута name. Имя требуется для некоторых типов обработки на сервере.

Атрибут value

Атрибут value задает для кнопки два вида идентификации. С одной стороны, это значение ассоциируется с именем кнопки и указывает сценарию на сервере, какая кнопка была нажата; с другой, это значение используется как метка кнопки. Если атрибут value не задается, кнопка помечается как "Submit Query" ; однако можно задать любую текстовую строку, чтобы пометить кнопку содержательной надписью. Обычный код и вывод кнопки submit показан ниже.

<input type="submit" name="SubmitButton" value="Submit Form"/>

Рис. 11.20. Типичный код и вывод кнопки <input type="submit"/>

Тег <input type="image"/>

Альтернативой для стандартной кнопки submit является использование графического изображения для запуска отправки формы. Например, следующая кнопка "Go" действует идентично стандартной кнопке submit.

<input type="image" name="SubmitButton" src="GoButton.gif"
  alt="Click to Submit"/>

Рис. 11.21. Графическая кнопка submit

Графическая кнопка создается с помощью тега <input type="image"/>, общая форма которого дана на листинге 11.27.

<input type="image"
  id="id"
  name="name"
  src="url"
  alt="text"
/>

Тег применяет атрибут type="image" для указания, что это графический элемент управления для отправки формы. Используемое изображение задается адресом URL в атрибуте src. Можно кодировать и другие атрибуты тега <img/>, включая alt для альтернативного текстового описания изображения. Как и для стандартной кнопки submit, может понадобиться присвоить name или id для идентификации кнопки в сценариях сервера или браузера.

Тег <input type="reset"/>

Для форм существует также другой тип кнопок. Можно создать кнопку "reset", чтобы позволить пользователю очистить всю информацию в форме либо чтобы ввести новую информацию или удалить неправильную информацию. Используемый по умолчанию вид показан ниже.

Рис. 11.22. Используемый по умолчанию вид кнопки сброса формы

Эта кнопка создается кодированием тега <input type="reset"/>. Для этой кнопки можно задать name или id и заменить используемую по умолчанию метку "Reset", задавая значение атрибута value. Действие кнопки состоит в автоматическом сбросе формы, очищающем все области ввода текста и возвращающем радио кнопки, флажки и раскрывающиеся списки в их исходное состояние по умолчанию.

Следующий пример показывает использование кнопки reset. Если после ввода текста в текстовом поле нажать кнопку "ClearForm" (reset), то информация в текстовом поле исчезнет.

Рис. 11.23. Использование кнопки сброса формы

Дополнительное оформление кнопок

Кнопки submit и reset могут использовать настройки таблицы стилей для изменения своего вида. Пример оформления показан двумя следующими кнопками.

Рис. 11.24. Оформленные кнопки submit и reset

<style type="text/css">
  .submit {width:150px; background-color:#4682B4; color:#FFFFFF;
           font-family:times new roman; font-size:14pt}
  .reset  {width:150px; background-color:#4682B4; color:#FFFFFF;
           font-family:times new roman; font-size:14pt}
</style>

<input type="submit" name="SubmitButton" value="Submit Form" class="submit"/>
<input type="reset" name="ResetButton" value="Reset Form" class="reset"/>

Другие кнопки

Двумя основными типами кнопок, которые встречаются на форме, являются кнопки submit и reset. Эти две кнопки связаны с отправкой формы программам, которые обрабатывают данные формы. Можно определить также другие кнопки общего назначения. Они обычно связаны со сценариями браузера для локальной обработки форм и других задач процедурами JavaScript, встроенными в страницу Web.

Тег <input type="button"/>

Тег <input type="button"/> используется для создания кнопок общего назначения для вызова сценариев браузера, расположенных на той же странице Web. Его общая форма показана ниже.

<input type="button"
  id="id"
  name="name"
  value="text"
    [onclick="script"]
/>

Могут понадобиться значения name и id, если сценарий ссылается на кнопку, иначе эти атрибуты можно не задавать. Атрибут value требуется для задания метки кнопки; иначе будет выводиться кнопка без метки.

Кнопка такого типа обычно реагирует на щелчок мыши и активирует встроенный сценарий или вызывает функцию JavaScript для выполнения некоторой обработки. Поэтому обычно в кнопке имеется обработчик событий, такой, как onclick, чтобы выполнить сценарий или вызвать функцию. Следующий пример показывает две кнопки со встроенным кодом JavaScript для ответа на события "щелчок" мыши. В этом коде щелчок мыши выделяет нажатую кнопку, изменяя цвет ее текста и фона.

Рис. 11.25. Кнопки общего назначения для выполнения сценариев

<input id="Button1" type="button" value="Hilite Me"
  onclick="this.style.color='white';
           this.style.backgroundColor='red';
           document.getElementById('Button2').style.color='';
           document.getElementById('Button2').style.backgroundColor=''"/>
<input id="Button2" type="button" value="Hilite Me"
  onclick="this.style.color='white';
           this.style.backgroundColor='red';
           document.getElementById('Button1').style.color='';
           document.getElementById('Button1').style.backgroundColor=''"/>