button 要素（HTMLタグ） - プログラミングスタイル

2018年03月13日

HTMLのbutton要素の説明です。button要素は、要素内容をラベル（テキストや画像など）として表示させるタイプのボタンを定義する要素です。

要素の記述例

button要素の記述例

<button type="button">ボタン</button>

閲覧中ブラウザーでの表示結果

要素の説明

button要素は、要素内容をラベル（テキストや画像など）として表示させるタイプのボタンを定義する要素です。

利用できる属性

属性名	属性の説明
autofocus	ページ読み込みと同時にこの部品にフォーカスされるようになります。
disabled	部品を無効にする属性です。フォーカスもできなくなります。
form	この部品と関連付けるform要素のid属性値を定義する属性です。
formaction	フォームのデータ送信先URLを定義する属性です。type属性の値が「submit」の場合のみ利用できます。
formenctype	フォームのデータ送信時に利用するMIMEタイプを定義する属性です。type属性の値が「submit」の場合のみ利用できます。
formmethod	フォームのデータ送信時に利用するHTTPメソッドを定義する属性です。type属性の値が「submit」の場合のみ利用できます。
formnovalidate	フォームの送信時にデータの妥当性チェックを実施しないようにします。type属性の値が「submit」の場合のみ利用できます。
formtarget	フォームの送信結果を表示する先とする、ウィンドウ、タブ、インラインフレーム、などをキーワードで定義する属性です。type属性の値が「submit」の場合のみ利用できます。
name	フォーム送信時に部品のデータ値とセットで送信される部品の識別名を定義する属性です。
type	どの種類のボタンとして機能させるかをキーワードを定義する属性です。
value	フォーム送信させる部品のデータ値を定義する属性です。

グローバル属性

HTMLのすべての要素はグローバル属性が利用できます。グローバル属性の一覧については「グローバル属性」を参照してください。

イベントハンドラ属性

button要素がサポートするイベントハンドラ属性については「イベントハンドラ属性」を参照してください。

ブラウザデフォルトCSS設定

Google Chromeの場合

button要素のブラウザデフォルトCSS

button {
  align-items: flex-start;
  text-align: center;
  cursor: default;
  color: buttontext;
  background-color: buttonface;
  box-sizing: border-box;
  padding: 1px 6px;
  border-width: 2px;
  border-style: outset;
  border-color: buttonface;
  border-image: initial;
  text-rendering: auto;
  letter-spacing: normal;
  word-spacing: normal;
  text-transform: none;
  text-indent: 0px;
  text-shadow: none;
  display: inline-block;
  margin: 0em;
  font: 400 13.3333px Arial;
  -webkit-writing-mode: horizontal-tb;
  -webkit-appearance: button;
}
button:active {
  border-style: inset;
}

前ページ HTMLタグリファレンス次ページ

目次