Тег BUTTON

Тег BUTTON создает на веб-странице кнопки и по своему действию напоминает результат, получаемый с помощью тега INPUT (с параметром type=button | reset | submit). В отличие от этого тега, BUTTON предлагает расширенные возможности по созданию кнопок. Например, на подобной кнопке можно размещать любые элементы HTML, в том числе изображения. Используя стили можно определить вид кнопки путем изменения шрифта, цвета фона, размеров и других параметров.

Теоретически, тег BUTTON должен располагаться внутри формы, устанавливаемой элементом FORM. Тем не менее, браузеры не выводят сообщение об ошибке и корректно работают с тегом BUTTON, если он встречается самостоятельно. Однако, если необходимо результат нажатия на кнопку отправить на сервер, помещать BUTTON в контейнер FORM обязательно.

Синтаксис
<form>
<button>...</button>
</form>

Закрывающий тег
Обязателен.

Параметры
disabled — блокирует доступ и изменение элемента.
type — тип кнопки.
value — значение кнопки, которое будет отправлено на сервер или прочитано с помощью сприптов.

Пример 1. Использование тега BUTTON

<html>
<body>
<p align=center>
<button>Название кнопки</button>
</p>
</body>
</html>

 


Описание параметров тега BUTTON

Параметр DISABLED

Описание
Блокирует доступ и изменение кнопки. Она в таком случае отображается серой и недоступной для активации пользователем. Кроме того, такая кнопка не может получить фокус путем нажатия на клавишу Tab, мышью или другим способом. Тем не менее, такое состояние кнопки можно изменять через скрипты.

Синтаксис
<button disabled>...</button>

Аргументы
Нет.

Значение по умолчанию
По умолчанию это значение выключено.

Пример 2. Блокирование доступа к кнопке

<html>
<body>
<form>
<button>Активная кнопка</button>
<button disabled>Неактивная кнопка</button>
</form>
</body>
</html>

 

Результат примера


Параметр TYPE

Описание
Определяет тип кнопки, который устанавливает ее поведение в форме. По внешнему виду кнопки разного типа никак не различаются, но у каждой такой кнопки свои функции.

Синтаксис
<button type=button | reset | submit>...</button>

Аргументы
button — обычная кнопка.
reset — кнопка для очистки введенных данных формы и возвращения значений в первоначальное состояние.
submit — кнопка для отправки данных формы на сервер.

Значение по умолчанию
button

Пример 3. Изменение типа кнопки

<html>
<body>
<form action=/cgi-bin/handler.cgi>
...
<button type=reset>Очистить форму</button> <button type=submit>Отправить форму</button>
</form>
</body>
</html>

 


Параметр VALUE

Описание
Определяет значение кнопки, которое будет отправлено на сервер. На сервер отправляется пара имя/значение, где имя задается параметром name тега BUTTON, а значение — параметром value. Значение может, как совпадать с текстом на кнопке, так быть и самостоятельным. Также параметр value применяется для доступа к данным через скрипты.

Синтаксис
<button value=значение>...</button>

Аргументы
Любая текстовая строка.

Значение по умолчанию
Нет.

Пример 4. Установка значения кнопки

<html>
<body>
<form action=/cgi-bin/handler.cgi>
...
<button value="11111010101" name=hidden type=submit>Отправить форму</button>
</form>
</body>
</html>

Материал взят с сайта htmlbook.ru