Замена стандартных кнопок Submit и Reset другими графическими изображениями
Любая форма содержит кнопку Submit, которую посетитель должен нажать для передачи результатов формы (т.е. введенных данных и выбранных элементов) по URL-адресу, указанному в атрибуте action дескриптора <form>. Большинство форм, кроме того, содержат кнопку Reset, которую посетитель может использовать для удаления введенной им в элементы формы информации и восстановления исходного состояния элементов. Когда Web-браузер встречает в HTML-коде следующие дескрипторы <input>, он визуализирует показанные на рис. 3.14 стандартные кнопки Submit и Reset.
<input type="Submit" value="Отправить"><input type="Reset" value="Очистить">
Рис. 3.14. Стандартные кнопки отправки и очистки формы
ПРАКТИКУМ
За счет замены дескриптора <input> на гиперссылку вместо стандартных кнопок на Web-страницу можно поместить графические изображения. Например, для замены стандартной кнопки Submit графическим изображением, выполняющим туже функцию, необходимо вместо дескриптора <input> воспользоваться следующим синтаксисом дескриптора привязки <а>:
<а href="#" onClick="document.formname.Submit()/return false"><img src="SubmitButtonGraphic.GIF"></a>
Таким образом, чтобы использовать графическое изображение, содержащееся в файле submit.gif в качестве кнопки Submit на форме, значение атрибута name которой равно "ExampleForm", необходимо заменить дескриптор стандартной кнопки Submit следующей строкой:
<а href="#" onClick="document.ExampleForm.Submit()/return false"><img src="Submit.GIF"></a>
Установка значения атрибута href дескриптора <а> гиперссылки равным знаку "решетка" (#) предотвращает переход Web-браузера к невидимой в данный момент части Web-страницы за счет указания гиперссылки на несуществующую (нулевую) закладку. Вряд ли необходимо, чтобы при нажатии гиперссылки Web-браузер переходил по действительной ссылке или по URL-адресу графического изображения, используемого в качестве кнопки Submit (которое указывается в атрибуте src дескриптора <img> гиперссылки). Web-браузер при нажатии на гиперссылку должен выполнить JavaScript-сценарий, заданный в атрибуте onclick дескриптора <а> гиперссылки.
Аналогично, если необходимо заменить стандартную кнопку Reset графическим изображением, потребуется вместо дескриптора <input> кнопки в код формы поместить следующую гиперссылку:
<а href="#" onClick="document.formname.Reset()/return false"><img src="ResetButtonGraphic.GIF"></a>
Обратите внимание, что гиперссылка для графического изображения кнопки Reset указывает Web-браузеру выполнить метод reset() формы (а не метод submit(), как это было для кнопки Submit в предыдущем примере). Таким образом, если атрибут name формы содержит значение "ExampleForm", а файл графического изображения для кнопки Reset носит название reset.gif, графическоеизображение кнопки Reset можно поместить на форму с помощью такого кода:
<а href="#" onClick="document.ExampleForm.Reset();return false"><img src="Reset.GIF"></a>
ПРИМЕЧАНИЕ:
При замене стандартной кнопки Reset графическим изображением с гиперссылкой, выполняющей ту же самую функцию, Web-браузер перед очисткой элементов формы будет выполнять JavaScript-функцию, указанную в атрибуте onReset дескриптора <form> формы. Тем не менее, при замене стандартной кнопки Submit Web-браузер не будет выполнять функцию, указанную в атрибуте onSubmit. В следующем совете будет показано, как заставить браузер выполнять сценарий перед передачей результатов формы Web-серверу, даже если стандартная кнопка Submit заменена.