HTML & CSS - button タグ

基本的な使い方

button タグは、ボタンを作成するときに使用します。例えば、フォームの「送信」ボタンを作成する場合や、JavaScript でクリック時に何らかの処理を行いたい場合などに用いられます。

ボタンの動作を指定する

ボタンの動作は button タグの type 属性によって指定できます。指定できる属性値は以下のとおりです。

<button type="submit">
submit の属性値を指定した場合、ボタンの動作は、フォームのデータをサーバに送信するようになります。
<button type="reset">
reset の属性値を指定した場合、ボタンの動作は、フォームのデータをリセットするようになります。
<button type="button">
button の属性値を指定した場合、ボタンの動作は、何も行いません。ボタンをクリックして JavaScript で何らかの処理を行いたい場合は、この属性値を指定します。

属性値: submit

button タグの type 属性に submit の属性値を指定した場合、ボタンの動作は、フォームのデータをサーバに送信するようになります。

<form>
  <label for="message">メッセージ</label>
  <input type="text" name="message" id="message">
  <button type="submit">送信</button>
</form>
button タグ type 属性に submit を指定した例
ブラウザ表示

属性値: reset

button タグの type 属性に reset の属性値を指定した場合、ボタンの動作は、フォームのデータをリセットするようになります。

<form>
  <label for="message">メッセージ</label>
  <input type="text" name="message" id="message">
  <button type="submit">送信</button>
  <button type="reset">リセット</button>
</form>
button タグ type 属性に reset を指定した例
ブラウザ表示
  • リセットボタンは、ユーザビリティを低下させる可能性があります。

リセットボタンは、親要素の form に含まれるすべての入力欄をリセットします。そのため、ユーザが送信ボタンと間違えてリセットボタンをクリックした場合、すべての入力情報が失われます。この動作はユーザビリティを低下させる可能性があるため、リセットボタンは送信ボタンとの十分な距離(余白)を設けたり、ボタンの大きさや色などで差別化を行うか、設置自体を検討してください。

属性値: button

button タグの type 属性に button の属性値を指定した場合、ボタンの動作は、何も行いません。ボタンをクリックして JavaScript で何らかの処理を行いたい場合は、この属性値を指定します。

<p>クリックしても何も起きません</p>
<button type="button">クリック</button>
button タグ type 属性に button を指定した例(処理を割り当てていない場合)

クリックしても何も起きません

ブラウザ表示

JavaScript で何らかの処理を割り当てたい場合は、以下のように記述します。

<p>クリックするとアラートが表示されます</p>
<button type="button" onclick="alert('hello!')">クリック</button>
button タグ type 属性に button を指定した例(処理を割り当てている場合)

クリックするとアラートが表示されます

ブラウザ表示

ボタンを無効化する

button タグの disabled 属性を指定した場合、ボタンがクリックできない状態になります。

<p>disabled 属性を指定したボタン</p>
<button type="button" >disabled なし</button>
<button type="button" disabled>disabled あり</button>
button タグに disabled 属性を指定した例

disabled 属性を指定したボタン

ブラウザ表示

disabled 属性は、例えばフォームで必須入力項目が入力されたら disabled 属性を解除し、送信可能にするなどの使い方があります。

<form>
  <label for="message">メッセージ(必須入力)</label>
  <input type="text" name="message" id="message" oninput="check()">
  <button type="submit" id="button" disabled>送信</button>
</form>
必須入力の項目が入力されたら disabled 属性を解除する例(HTML)
function check() {
  const msg = document.getElementById("message");
  const button = document.getElementById("button");
  if(msg.value && msg.value.length) {
    // 入力値あり → disabled 解除
    button.disabled = false;
  } else {
    // 入力値なし → disabled 付与
    button.disabled = true;
  }
}
必須入力の項目が入力されたら disabled 属性を解除する例(JavaScript)
ブラウザ表示

オートフォーカス

button タグの autofocus 属性を指定した場合、ページを読み込んだ時点でボタンが選択された状態になります。この状態で Enter キーを押すと、ボタンが押下されます。

<p>ボタンにフォーカスが当たっています</p>
<button type="button" autofocus>ボタン</button>
button タグに autofocus 属性を指定した例

オートフォーカスの注意点

  • オートフォーカスは、ページ内の複数のボタンに指定することはできません
  • ユーザがボタン以外の領域を選択した場合、オートフォーカスは外れてしまいます
  • モバイル端末ではオートフォーカスが機能しない場合があります

フォームとボタン

button タグは、祖先に form タグが存在した場合、自動的に関連付けられます。

<form>
  ...
  <button type="submit">送信</button>
</form>
祖先に form タグが存在する場合

しかし、祖先に form タグが存在しない場合、ボタンは機能しません。これは、ボタンがページ上のどのフォームと関連付けられているか不明だからです。

<form>
  ...
</form>
<button type="submit">送信</button>
祖先に form タグが存在しない場合

上記のように、ボタンを自動的に form タグに関連付けるには、曖昧さのリスクがあります。そのリスクを回避するためには、id を使って明示的に関連付けを行います。

<form id="foo">
  ...
</form>
<button type="submit" form="foo">送信</button>
id を使って明示的に form と button を関連付ける

上記のように id を使って明示的に関連付けを行った場合、祖先に form タグが存在しなくてもボタンは機能します。

使用上の注意

button タグは a タグの中に含めてはいけません。a タグは、タグの中に対話型コンテンツを含めてはならないというルールがあります。button タグは対話型コンテンツに属するため、以下のような記述をしてはなりません。

<a href="/example">
    <button type="button">ボタン</button>
</a>
a タグの中に対話型コンテンツを含めてはいけません

a タグと button タグの使い分け

a タグも button タグも、クリックすると反応するタグになります。使い分けとしては、以下のようになります。

a タグ
  • クリックしたら他の HTML ページに遷移させたい
button タグ
  • フォームのデータを送信、またはリセットしたい
  • クリックしたら JavaScript を処理させたい

外部リンク