Тег BUTTON

Браузер	Internet Explorer				Netтscape		Опера				Safari			Mozilla Firefox
Версия	5.5	6.0	7.0	8.0	8.0	9.0	7.0	8.0	9.2	9.5	1.3	2.0	3.1	1.5	2.0	3.0
Поддерживается	Ошибки	Ошибки	Ошибки	?	Да	Да	Да	Да	Да	Да	Да	Да	Да	Да	Да	Да

ШТМЛ:

3.2

XШТМЛ:

1.0

1.1

Описание

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

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

Синтаксис

Параметры

disabled: Блокирует доступ и изменение элемента.
type: Тип кнопки — обычная, для отправки данных формы на сервер или для очистки формы.
value: Значение кнопки, которое будет отправлено на сервер или прочитано с помощью сприптов.

Закрывающий тег

Обязателен.

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

ШТМЛ 4.01IE 5.5IE 6IE 7Op 9.5Sa 3.1Ff 2.0Ff 3.0

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/HTML4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Тег BUTTON</title>
 </head>
 <body>

  <p style="text-align: center"><button>Кнопка с контентом</button>
  <button><img src="/images/umbrella.gif" alt="Зонтик" style="vertical-align: middle"> Кнопка с рисунком</button></p>

 </body>
</html>

Результат данного примера показан ни рис. 1.

Рис. 1

Рис. 1. Вид кнопок в браузере Опера

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

Параметр DISABLED

ШТМЛ:

3.2

XШТМЛ:

1.0

1.1

Описание

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

Синтаксис

Аргументы

Нет.

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

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

Пример 2. Использование параметра disabled

ШТМЛ 4.01IE 5.5IE 6IE 7Op 9.5Sa 3.1Ff 2.0Ff 3.0

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/HTML4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Тег BUTTON, параметр disabled</title>
 </head>
 <body>

  <form action="/ШТМЛ/button.ШТМЛ"> 
   <p><button>Активная кнопка</button>
   <button disabled>Неактивная кнопка</button></p>
  </form> 

 </body>
</html>

Результат данного примера продемонстрирован на рис. 2.

Рис. 2

Рис. 2. Вид активной и неактивной кнопки

Параметр TYPE

ШТМЛ:

3.2

XШТМЛ:

1.0

1.1

Описание

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

Синтаксис

Аргументы

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

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

button

Пример 3. Использование параметра type

ШТМЛ 4.01IE 5.5IE 6IE 7Op 9.5Sa 3.1Ff 2.0Ff 3.0

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/HTML4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Тег BUTTON, параметр type</title>
 </head>
 <body>

  <form action="/ШТМЛ/example/handler.php">
   <p><input type="text" name="user"></p>
   <p><button type="reset">Очистить форму</button> 
   <button type="submit">Отправить форму</button></p>
  </form> 

 </body>
</html>

Параметр VALUE

Браузер	Internet Explorer				Netтscape		Опера				Safari			Mozilla Firefox
Версия	5.5	6.0	7.0	8.0	8.0	9.0	7.0	8.0	9.2	9.5	1.3	2.0	3.1	1.5	2.0	3.0
Поддерживается	Нет	Нет	Нет	?	Да	Да	Да	Да	Да	Да	Да	Да	Да	Да	Да	Да

ШТМЛ:

3.2

XШТМЛ:

1.0

1.1

Описание

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

Синтаксис

Аргументы

Любая контентовая строка.

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

Нет.

Пример 4. Значение кнопки

ШТМЛ 4.01IE 5.5IE 6IE 7Op 9.5Sa 3.1Ff 2.0Ff 3.0

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/HTML4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Тег BUTTON, параметр value</title>
 </head>
 <body>

  <form action="/ШТМЛ/example/handler.php">
   <p><input type="text" name="user"></p>
   <p><button value="11111010101" name="hidden" type="submit">Отправить форму</button></p>
  </form>

 </body>
</html>