Опубликован: 19.03.2007 | Уровень: для всех | Доступ: платный
Лекция 11:

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

Кнопки 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"
/>
Листинг 11.26. Общая форма кнопки <input type="submit"/>

Атрибут id

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

Атрибут name

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

Атрибут value

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

<input type="submit" name="SubmitButton" value="Submit Form"/>
Типичный код и вывод кнопки <input type="submit"/>

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

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

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

<input type="image" name="SubmitButton" src="GoButton.gif"
  alt="Click to Submit"/>
Графическая кнопка submit

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

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

<input type="image"
  id="id"
  name="name"
  src="url"
  alt="text"
/>
Листинг 11.27. Общая форма кнопки <input type="image"/>

Тег применяет атрибут 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 могут использовать настройки таблицы стилей для изменения своего вида. Пример оформления показан двумя следующими кнопками.

Оформленные кнопки 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"/>
Листинг 11.28. Код оформления кнопок формы submit и reset

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

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

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

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

<input type="button"
  id="id"
  name="name"
  value="text"
    [onclick="script"]
/>
Листинг 11.29. Общая форма тега <input type="button"/>

Могут понадобиться значения 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=''"/>
Листинг 11.30. Код для оформления и программирования тега <input type="button"/>
Елена Сапегова
Елена Сапегова

После прохождения теоретической части пришло письмо об окончании теоретической части курса, будет ли практическая часть?

Владислав Нагорный
Владислав Нагорный

Подскажите, пожалуйста, планируете ли вы возобновление программ высшего образования? Если да, есть ли какие-то примерные сроки?

Спасибо!