button
Создает на странице кнопку и по действию напоминает тег input
(с параметром button
, reset
или submit
). В отличие от него button
предлагает расширенные возможности для создания кнопок. К примеру, на такой кнопке можно размещать любые элементы html
, в том числе изображения. С помощью стилей можно определить вид кнопки, изменив ее шрифт, фон или размер. Тег button
должен располагаться внутри тега form
, однако браузеры не выводят сообщения об ошибке и корректно работают с тегом button
даже если он встречается вне формы. Но если результат нажатия на кнопку необходимо отправить на сервер, тег button
обязательно должен находиться в теге form
.
Пример:
Таблица 3×3
Lorem ipsum dolor sit amet, consectetur adipisicing elit |
... |
... |
... |
... |
... |
... |
... |
... |
<table>
<caption>Таблица 3×3</caption>
<col/>
<tbody>
<tr>
<td>Lorem ipsum dolor sit amet, consectetur adipisicing elit</td>
<td>...</td>
<td>...</td>
</tr>
<tr>
<td>...</td>
<td>...</td>
<td>...</td>
</tr>
<tr>
<td>...</td>
<td>...</td>
<td>...</td>
</tr>
</tbody>
</table>
Дети:
A,
ABBR,
ACRONYM,
ADDRESS,
APPLET,
AREA,
AUDIO,
B,
BASEFONT,
BDO,
BIG,
BLOCKQUOTE,
BR,
BUTTON,
CANVAS,
CENTER,
CITE,
CODE,
COMMAND,
DATALIST,
DEL,
DFN,
DIR,
DIV,
DL,
EM,
EMBED,
FONT,
H1,
H2,
H3,
H4,
H5,
H6,
HR,
I,
IFRAME,
IMG,
INPUT,
INS,
KBD,
KEYGEN,
LABEL,
MAP,
MARK,
MENU,
METER,
NOFRAMES,
NOSCRIPT,
OBJECT,
OL,
OUTPUT,
P,
PRE,
PROGRESS,
Q,
RUBY,
S,
SAMP,
SCRIPT,
SELECT,
SMALL,
SPAN,
STRIKE,
STRONG,
SUB,
SUP,
TABLE,
TEXTAREA,
TIME,
TT,
U,
UL,
VAR,
VIDEO,
WBR.
|
html 3.2 |
html 4.0 Frameset |
html 4.0 Loose |
html 4.0 Strict |
html 4.0.1 Frameset |
html 4.0.1 Loose |
html 4.0.1 Strict |
xhtml 1 Frameset |
xhtml 1 Strict |
xhtml 1 Transitional |
html5 |
a |
|
|
|
|
|
|
|
|
|
|
|
abbr |
|
|
|
|
|
|
|
|
|
|
|
acronym |
|
|
|
|
|
|
|
|
|
|
|
address |
|
|
|
|
|
|
|
|
|
|
|
applet |
|
|
|
|
|
|
|
|
|
|
|
area |
|
|
|
|
|
|
|
|
|
|
|
audio |
|
|
|
|
|
|
|
|
|
|
|
b |
|
|
|
|
|
|
|
|
|
|
|
basefont |
|
|
|
|
|
|
|
|
|
|
|
bdo |
|
|
|
|
|
|
|
|
|
|
|
big |
|
|
|
|
|
|
|
|
|
|
|
blockquote |
|
|
|
|
|
|
|
|
|
|
|
br |
|
|
|
|
|
|
|
|
|
|
|
button |
|
|
|
|
|
|
|
|
|
|
|
canvas |
|
|
|
|
|
|
|
|
|
|
|
center |
|
|
|
|
|
|
|
|
|
|
|
cite |
|
|
|
|
|
|
|
|
|
|
|
code |
|
|
|
|
|
|
|
|
|
|
|
command |
|
|
|
|
|
|
|
|
|
|
|
datalist |
|
|
|
|
|
|
|
|
|
|
|
del |
|
|
|
|
|
|
|
|
|
|
|
dfn |
|
|
|
|
|
|
|
|
|
|
|
dir |
|
|
|
|
|
|
|
|
|
|
|
div |
|
|
|
|
|
|
|
|
|
|
|
dl |
|
|
|
|
|
|
|
|
|
|
|
em |
|
|
|
|
|
|
|
|
|
|
|
embed |
|
|
|
|
|
|
|
|
|
|
|
font |
|
|
|
|
|
|
|
|
|
|
|
h1 |
|
|
|
|
|
|
|
|
|
|
|
h2 |
|
|
|
|
|
|
|
|
|
|
|
h3 |
|
|
|
|
|
|
|
|
|
|
|
h4 |
|
|
|
|
|
|
|
|
|
|
|
h5 |
|
|
|
|
|
|
|
|
|
|
|
h6 |
|
|
|
|
|
|
|
|
|
|
|
hr |
|
|
|
|
|
|
|
|
|
|
|
i |
|
|
|
|
|
|
|
|
|
|
|
iframe |
|
|
|
|
|
|
|
|
|
|
|
img |
|
|
|
|
|
|
|
|
|
|
|
input |
|
|
|
|
|
|
|
|
|
|
|
ins |
|
|
|
|
|
|
|
|
|
|
|
kbd |
|
|
|
|
|
|
|
|
|
|
|
keygen |
|
|
|
|
|
|
|
|
|
|
|
label |
|
|
|
|
|
|
|
|
|
|
|
map |
|
|
|
|
|
|
|
|
|
|
|
mark |
|
|
|
|
|
|
|
|
|
|
|
menu |
|
|
|
|
|
|
|
|
|
|
|
meter |
|
|
|
|
|
|
|
|
|
|
|
noframes |
|
|
|
|
|
|
|
|
|
|
|
noscript |
|
|
|
|
|
|
|
|
|
|
|
object |
|
|
|
|
|
|
|
|
|
|
|
ol |
|
|
|
|
|
|
|
|
|
|
|
output |
|
|
|
|
|
|
|
|
|
|
|
p |
|
|
|
|
|
|
|
|
|
|
|
pre |
|
|
|
|
|
|
|
|
|
|
|
progress |
|
|
|
|
|
|
|
|
|
|
|
q |
|
|
|
|
|
|
|
|
|
|
|
ruby |
|
|
|
|
|
|
|
|
|
|
|
s |
|
|
|
|
|
|
|
|
|
|
|
samp |
|
|
|
|
|
|
|
|
|
|
|
script |
|
|
|
|
|
|
|
|
|
|
|
select |
|
|
|
|
|
|
|
|
|
|
|
small |
|
|
|
|
|
|
|
|
|
|
|
span |
|
|
|
|
|
|
|
|
|
|
|
strike |
|
|
|
|
|
|
|
|
|
|
|
strong |
|
|
|
|
|
|
|
|
|
|
|
sub |
|
|
|
|
|
|
|
|
|
|
|
sup |
|
|
|
|
|
|
|
|
|
|
|
table |
|
|
|
|
|
|
|
|
|
|
|
textarea |
|
|
|
|
|
|
|
|
|
|
|
time |
|
|
|
|
|
|
|
|
|
|
|
tt |
|
|
|
|
|
|
|
|
|
|
|
u |
|
|
|
|
|
|
|
|
|
|
|
ul |
|
|
|
|
|
|
|
|
|
|
|
var |
|
|
|
|
|
|
|
|
|
|
|
video |
|
|
|
|
|
|
|
|
|
|
|
wbr |
|
|
|
|
|
|
|
|
|
|
|
Атрибуты:
accesskey,
autofocus,
class,
contenteditable,
contextmenu,
dir,
disabled,
draggable,
form,
formaction,
formenctype,
formmethod,
formnovalidate,
formtarget,
hidden,
id,
lang,
name,
onabort,
onblur,
oncanplay,
oncanplaythrough,
onchange,
onclick,
oncontextmenu,
ondblclick,
ondrag,
ondragend,
ondragenter,
ondragleave,
ondragover,
ondragstart,
ondrop,
ondurationchange,
onemptied,
onended,
onerror,
onfocus,
onformchange,
onforminput,
oninput,
oninvalid,
onkeydown,
onkeypress,
onkeyup,
onload,
onloadeddata,
onloadedmetadata,
onloadstart,
onmousedown,
onmousemove,
onmouseout,
onmouseover,
onmouseup,
onmousewheel,
onpause,
onplay,
onplaying,
onprogress,
onratechange,
onreadystatechange,
onscroll,
onseeked,
onseeking,
onselect,
onshow,
onstalled,
onsubmit,
onsuspend,
ontimeupdate,
onvolumechange,
onwaiting,
spellcheck,
style,
tabindex,
title,
type,
value,
xml:base,
xml:id,
xml:lang,
xml:space.
|
html 3.2 |
html 4.0 Frameset |
html 4.0 Loose |
html 4.0 Strict |
html 4.0.1 Frameset |
html 4.0.1 Loose |
html 4.0.1 Strict |
xhtml 1 Frameset |
xhtml 1 Strict |
xhtml 1 Transitional |
html5 |
accesskey |
|
|
|
|
|
|
|
|
|
|
|
autofocus |
|
|
|
|
|
|
|
|
|
|
|
class |
|
|
|
|
|
|
|
|
|
|
|
contenteditable |
|
|
|
|
|
|
|
|
|
|
|
contextmenu |
|
|
|
|
|
|
|
|
|
|
|
dir |
|
|
|
|
|
|
|
|
|
|
|
disabled |
|
|
|
|
|
|
|
|
|
|
|
draggable |
|
|
|
|
|
|
|
|
|
|
|
form |
|
|
|
|
|
|
|
|
|
|
|
formaction |
|
|
|
|
|
|
|
|
|
|
|
formenctype |
|
|
|
|
|
|
|
|
|
|
|
formmethod |
|
|
|
|
|
|
|
|
|
|
|
formnovalidate |
|
|
|
|
|
|
|
|
|
|
|
formtarget |
|
|
|
|
|
|
|
|
|
|
|
hidden |
|
|
|
|
|
|
|
|
|
|
|
id |
|
|
|
|
|
|
|
|
|
|
|
lang |
|
|
|
|
|
|
|
|
|
|
|
name |
|
|
|
|
|
|
|
|
|
|
|
onabort |
|
|
|
|
|
|
|
|
|
|
|
onblur |
|
|
|
|
|
|
|
|
|
|
|
oncanplay |
|
|
|
|
|
|
|
|
|
|
|
oncanplaythrough |
|
|
|
|
|
|
|
|
|
|
|
onchange |
|
|
|
|
|
|
|
|
|
|
|
onclick |
|
|
|
|
|
|
|
|
|
|
|
oncontextmenu |
|
|
|
|
|
|
|
|
|
|
|
ondblclick |
|
|
|
|
|
|
|
|
|
|
|
ondrag |
|
|
|
|
|
|
|
|
|
|
|
ondragend |
|
|
|
|
|
|
|
|
|
|
|
ondragenter |
|
|
|
|
|
|
|
|
|
|
|
ondragleave |
|
|
|
|
|
|
|
|
|
|
|
ondragover |
|
|
|
|
|
|
|
|
|
|
|
ondragstart |
|
|
|
|
|
|
|
|
|
|
|
ondrop |
|
|
|
|
|
|
|
|
|
|
|
ondurationchange |
|
|
|
|
|
|
|
|
|
|
|
onemptied |
|
|
|
|
|
|
|
|
|
|
|
onended |
|
|
|
|
|
|
|
|
|
|
|
onerror |
|
|
|
|
|
|
|
|
|
|
|
onfocus |
|
|
|
|
|
|
|
|
|
|
|
onformchange |
|
|
|
|
|
|
|
|
|
|
|
onforminput |
|
|
|
|
|
|
|
|
|
|
|
oninput |
|
|
|
|
|
|
|
|
|
|
|
oninvalid |
|
|
|
|
|
|
|
|
|
|
|
onkeydown |
|
|
|
|
|
|
|
|
|
|
|
onkeypress |
|
|
|
|
|
|
|
|
|
|
|
onkeyup |
|
|
|
|
|
|
|
|
|
|
|
onload |
|
|
|
|
|
|
|
|
|
|
|
onloadeddata |
|
|
|
|
|
|
|
|
|
|
|
onloadedmetadata |
|
|
|
|
|
|
|
|
|
|
|
onloadstart |
|
|
|
|
|
|
|
|
|
|
|
onmousedown |
|
|
|
|
|
|
|
|
|
|
|
onmousemove |
|
|
|
|
|
|
|
|
|
|
|
onmouseout |
|
|
|
|
|
|
|
|
|
|
|
onmouseover |
|
|
|
|
|
|
|
|
|
|
|
onmouseup |
|
|
|
|
|
|
|
|
|
|
|
onmousewheel |
|
|
|
|
|
|
|
|
|
|
|
onpause |
|
|
|
|
|
|
|
|
|
|
|
onplay |
|
|
|
|
|
|
|
|
|
|
|
onplaying |
|
|
|
|
|
|
|
|
|
|
|
onprogress |
|
|
|
|
|
|
|
|
|
|
|
onratechange |
|
|
|
|
|
|
|
|
|
|
|
onreadystatechange |
|
|
|
|
|
|
|
|
|
|
|
onscroll |
|
|
|
|
|
|
|
|
|
|
|
onseeked |
|
|
|
|
|
|
|
|
|
|
|
onseeking |
|
|
|
|
|
|
|
|
|
|
|
onselect |
|
|
|
|
|
|
|
|
|
|
|
onshow |
|
|
|
|
|
|
|
|
|
|
|
onstalled |
|
|
|
|
|
|
|
|
|
|
|
onsubmit |
|
|
|
|
|
|
|
|
|
|
|
onsuspend |
|
|
|
|
|
|
|
|
|
|
|
ontimeupdate |
|
|
|
|
|
|
|
|
|
|
|
onvolumechange |
|
|
|
|
|
|
|
|
|
|
|
onwaiting |
|
|
|
|
|
|
|
|
|
|
|
spellcheck |
|
|
|
|
|
|
|
|
|
|
|
style |
|
|
|
|
|
|
|
|
|
|
|
tabindex |
|
|
|
|
|
|
|
|
|
|
|
title |
|
|
|
|
|
|
|
|
|
|
|
type |
|
|
|
|
|
|
|
|
|
|
|
value |
|
|
|
|
|
|
|
|
|
|
|
xml:base |
|
|
|
|
|
|
|
|
|
|
|
xml:id |
|
|
|
|
|
|
|
|
|
|
|
xml:lang |
|
|
|
|
|
|
|
|
|
|
|
xml:space |
|
|
|
|
|
|
|
|
|
|
|
Браузерные стили
Chrome |
button { -webkit-appearance: button; -webkit-box-align: center; -webkit-box-sizing: border-box; background-color: ButtonFace; border: 2px outset ButtonFace; color: ButtonText; cursor: default; display: inline-block; font: -webkit-small-control; letter-spacing: normal; line-height: normal; margin: 0; padding: 2px 6px 3px 6px; text-align: center; text-indent: 0; text-shadow: none; text-transform: none; word-spacing: normal; }
|
button:active { border-style: inset; }
|
button:active:disabled { border-style: outset; }
|
button:disabled { color: GrayText; }
|
firefox 3.6.3 |
button { -moz-appearance: button; -moz-binding: none; -moz-box-sizing: border-box; -moz-user-select: none; background-color: ButtonFace; border: 2px outset ButtonFace; color: ButtonText; cursor: default; font: -moz-button; line-height: normal !important; padding: 0px 6px 0px 6px; text-align: center; text-indent: 0; text-shadow: none; white-space: inherit; }
|
button::-moz-focus-inner { border: 1px dotted transparent; padding: 0px 2px 0px 2px; }
|
button:active:hover { background-color: ButtonFace; border-style: inset; color: ButtonText; padding: 0px 5px 0px 7px; }
|
button:focus::-moz-focus-inner { border-color: ButtonText; }
|
button:hover { background-color: -moz-buttonhoverface; color: -moz-buttonhovertext; }
|
button[disabled] { border: 2px outset ButtonFace; color: GrayText; cursor: inherit; padding: 0px 6px 0px 6px; }
|
button[disabled]:active { border: 2px outset ButtonFace; color: GrayText; cursor: inherit; padding: 0px 6px 0px 6px; }
|
ie6, ie7 |
button { background-color: #d4d0c8; border: 2px outset; font: 10pt Arial; has-layout: true; overflow: hidden; text-align: center; }
|
ie8 |
button { background-color: #d4d0c8; border: 3px outset; box-sizing: border-box; display: inline-block; font: 10pt Arial; has-layout: true; overflow: hidden; padding: 1px 8px; text-align: center; }
|
opera 10.53 |
button { border: 2px #000; box-sizing: border-box; display: inline-block; font: 12px "Lucida Grande"; padding: 1px 8px; text-align: center; white-space: nowrap; }
|
safari 4.0.5 |
button { -webkit-appearance: button; -webkit-box-align: center; -webkit-box-sizing: border-box; background-color: ButtonFace; border: 2px outset ButtonFace; color: ButtonText; cursor: default; display: inline-block; font: -webkit-small-control; letter-spacing: normal; line-height: normal; margin: 0; padding: 2px 6px 3px 6px; text-align: center; text-indent: 0; text-shadow: none; text-transform: none; word-spacing: normal; }
|
button:active { border-style: inset; }
|
button:active:disabled { border-style: outset; }
|
button:disabled { color: GrayText; }
|