Элемент button

Модуль Forms

Модуль Forms является расширенным вариантом модуля Basic Forms и содержит, помимо элементов, рассмотренных выше, элементы button, fieldset, legend и optgroup.

Контейнерный элемент button позволяет добавить простую кнопку в Web-страницу. Текст, расположенный между открывающим и закрывающим элементом, выводится в виде надписи на кнопке.

Для элемента button, помимо общих атрибутов class, dir, id, lang, style и title, определены следующие атрибуты:

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

· value – начальное значение надписи на кнопке (посылается на Web-сервер при нажатии кнопки);

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

· type – тип кнопки.

Атрибут type в элементе button может принимать следующие значения:

· button – простая кнопка (значение по умолчанию);

· reset – кнопка сброса;

· submit – кнопка отправки данных на Web-сервер.

В отличие, от кнопки, формируемой элементом input с атрибутом type="button" (см. 4.5.5.3.1), кнопка, создаваемая с помощью элемента button, может быть задана в любом месте документа HTML, а не только в форме. В остальном, за исключением способа задания надписи, обе кнопки являются идентичными.

При использовании кнопки button как кнопки типа submit следует иметь в виду, что в Internet Explorer в качестве значения посылается текстовое содержимое элемента button, а в остальных Web-браузерах – значение атрибута value элемента button.

Для элемента button можно задать стили шрифта, текста, цвета и фона, а также стили полей, границ и отступов блоковой модели документа. Свойство text-align действует только в Internet Explorer (в Firefox, Opera и Netscape надпись на кнопке всегда выровнена по центру). Свойство background-image (использование в кнопке изображения в качестве фона) не действует в Internet Explorer.

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

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

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

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

· type (только для чтения) – тип кнопки: строка "button", "reset" или "submit";

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

Пример 4.5.32. Использование элемента button:

1. Простая кнопка

<button type="button" id="button1">Кнопка 1</button>

будет выведена в Web-странице следующим образом:

2. Фрагмент документа HTML

<form id="selectAddForm1"

action="https://localhost/greeting.asp" method="get">

<input type="text" name="startText" value="start"/>

<br/><br/>

<button type="submit" id="button1"

value="transmit" name="startButton">Передача</button>

</form>

будет выведен в Web-странице следующим образом:

При нажатии кнопки Передача запрос Web-серверу имеет следующий вид: