Кнопка сброса данных и кнопка передачи данных на Web-сервер

Элемент input со значением type="reset" создает кнопку сброса, нажатие которой отменяет все сделанные изменения, восстанавливая значения полей формы на тот момент, когда она была загружена. По умолчанию отображается в виде кнопки с надписьюReset.

Элемент input со значением type="submit" создает кнопку передачи, нажатие которой вызывает пересылку на сервер всего содержимого формы. По умолчанию отображается в виде кнопки с надписьюSubmit (илиSubmit Query).

Для кнопок сброса и передачи можно задать следующие атрибуты элемента input:

· name – имя кнопки;

· value – надпись на кнопке (размер кнопки подстраивается под размер надписи, причем надпись на кнопке выровнена по центру как по горизонтали, так и по вертикали);

· disabled (без значения) – если задан, кнопка переводится в неактивное (отключенное) состояние.

Атрибут name для кнопки и кнопки передачи можно не задавать. Внутри формы могут существовать несколько кнопок пересылки. В этом случае для них можно задать различные значения атрибутов name и value. В этом случае в список параметров формы, передаваемых на сервер, для каждой именованной кнопки сброса включается параметр

значение-атрибута-name = значение-атрибута-value.

Так, если задан следующий элемент

<input type="submit" name="submit_button" value="OK">,

то в список параметров формы, передаваемых на сервер, включается параметр submit_button="OK".

Для кнопок сброса и передачи можно задать те же стили, что и для обычной кнопки (см. 4.5.5.3.1).

Для этих кнопок в интерфейсе HTMLInputElement DOM2 HTML определены, помимо общих свойств элемента input, следующие свойства:

· name – значение атрибута name;

· value – значение атрибута value;

· disabled (false или true) – состояние кнопки (активное или неактивное);

· form (только для чтения) – содержит объект HTMLFormElement формы, к которой принадлежит кнопка.

Кроме этого, для кнопок сброса и передачи определен метод click(), имитирующий щелчок мышью по кнопке.

Пример 4.5.28. Использование кнопок сброса и передачи:

В документе HTML задана следующая форма:

<form id="resetAndSubmitForm"

action="https://localhost/Greeting.asp">

<table>

<tr>

<td>Введите имя: </td>

<td><input type="text" name="login"

value="Иванов" id="login"/></td>

</tr><tr>

<td>Введите пароль: </td>

<td><input type="password" name="pass"

value="" id="pass"/></td>

</tr><tr>

<td><input type="reset" id="resetButton"

value="Сброс данных"/></td>

<td><input type="submit" id="resetButton"

value="Передача данных"/></td>

</tr>

</table>

</form>

При загрузке Web-странице форма имеет следующий вид:

После ввода данных страница примет следующий вид:

Если нажать на кнопку Передача данных, то введенные данные (имя и пароль пользователя) будут пересланы на Web-сервер:

Если же нажать на кнопку Сброс данных, введенные данные будут сброшены и форма вернется к виду, какой она имела при загрузке Web-страницы.


Понравилась статья? Добавь ее в закладку (CTRL+D) и не забудь поделиться с друзьями:  



double arrow
Сейчас читают про: