Главная/ Cправочник HTML, CSS, Javascript/ HTML справочник : HTML теги, HTML атрибуты, мета теги, спецсимволы/ Tags/ HTML тег button | назначение, синтаксис, атрибуты, примеры

Тег button

Последнее обновление: 23.01.2011

Тег <button> (с англ. кнопка) — тег-контейнер, создает на форме кнопку.
Строчный элемент.

HTML: 3.2 | 4 / XHTML: 1.0 | 1.1

Синтаксис


<form>
<button>...</button>
</form>

Атрибуты



acceskey указываем горячую кнопку, при нажатии которой (+Alt) срабатывает кнопка
class определяет имя используемого класса
dir определяет направление символов:

  • ltr — слева направо
  • rtl — справа налево
disabled флаг. Делает кнопку неактивной
id уникальный идентификатор
lang определяет используемый язык
name уникальное имя кнопки
onblur потеря фокуса элементом
onclick щелчок на элементе
ondblclick двойной щелчок на элементе
onfocus получение фокуса элементом
onkeydown нажатие клавиши, когда элемент имеет фокус
onkeypress нажатие и освобождении клавиши, когда элемент имеет фокус
onkeyup освобождение ранее нажатой клавиши, когда элемент имеет фокус
onmousedown нажатие кнопки мыши, когда элемент имеет фокус
onmousemove движение указателя мыши, когда элемент имеет фокус
onmouseout смещение указателя мыши с элемента
onmouseover помещение указателя мыши на элемент
onmouseup освобождение ранее нажатой кнопки мыши, когда элемент имеет фокус
style задает встроенную таблицу стилей
tabindex порядок обхода элементов с помощью Tab
title добавляет всплывающую подсказку
type тип кнопки:

  • button — обычная кнопка
  • reset — сброс данных, введенных пользователем
  • submit — отправляет данные на сервер (по умолчанию, кроме IE)
value значение кнопки (текстовая строка, которая будет отправлена на сервер)

Пример


<form action="#">
<div>
<label for="inpSearch">Я ищу:</label>
<input name="inpSearch" value="свои очки"/>
<button type="submit">найти</button>
</div>
</form>

Рекомендации по использованию

  • закрывающий тег обязателен (</button>)
  • обязательных атрибутов нет
  • может содержать CDATA, строчные и блочные элементы
    кроме ссылок, форм, элементов форм и фреймов
  • IE добавляет внутренние отступы слева и справа
  • по умолчанию в IE (как минимум 6) тип кнопки tupe=»button», в других браузерах — type=»submit»
  • при использовании тега <button> внутри формы, при отправке данных на сервер (событие submit) разные браузеры отправляют разные значение кнопки: большинство браузеров отправляет в качестве значения параметр value, другие (в частности IE) отправялет текст, содержащийся между <button></button>

Тег <button> создает кнопки такие же, как и кнопки, созданные тегом <input>, но дают больше возможностей представления, так как элемент button может иметь содержимое

Твой код:

Результат: