HTML要素 ・ フォーム
<button>
ボタン
クリックして何かを実行するためのボタンです。フォームの送信や、JavaScriptの処理の開始に使います。
01
サンプルコード
HTML
1<button type="button">お気に入りに追加</button>
2<button type="submit" class="primary">注文する</button>
3<button type="button" disabled>売り切れ</button>
CSS
1button {
2 padding: 8px 18px;
3 border: 1px solid #b68235;
4 border-radius: 4px;
5 background: #fff;
6 color: #7d5411;
7 font: inherit;
8 cursor: pointer;
9}
10.primary {
11 background: #b68235;
12 color: #fff;
13}
14button:disabled {
15 opacity: .4;
16 cursor: not-allowed;
17}
02
実行結果
ブラウザでの表示
03
解説
button は押して操作するための要素です。キーボードでも操作でき、読み上げソフトにも「ボタン」と伝わります。
type 属性は必ず書きましょう。フォームの中では既定値が submit（送信）なので、送信以外のボタンには type="button" を指定します。
ページを移動するだけなら a を、その場で何かを実行するなら button を使う、と使い分けます。
04
応用例・注意点
type 属性の値
| 値 | 説明 |
|---|---|
submit | フォームを送信する（フォーム内での既定値） |
button | 何もしない。JavaScriptで処理を割り当てる |
reset | フォームの入力内容を初期値に戻す |
アイコンだけのボタンに名前を付ける
文字のないボタンには aria-label で名前を付けます。
HTML
1<button type="button" aria-label="メニューを開く">
2 <svg width="20" height="20" aria-hidden="true">...</svg>
3</button>
注意点
- 01div や span にクリック処理を付けてボタンの代わりにしないでください。キーボードで操作できなくなります。
- 02disabled のボタンはフォーカスできず、理由が伝わりにくくなります。必要に応じて説明文を添えます。