buttonタグ ボタンを表す

HTMLの<button>ボタンタグは、ボタンを作成するために使います。

フォームの「送信」や「リセット」のボタンを設置するためによく使われます。その他に「クリックしたらJavaScriptで何らかの処理を行いたい」という場合にもよく使われます。

<p>こんにちは。</p>
<button type="button">クリック！</button>

このページの目次

• buttonタグの使い方
  • type属性でボタンの機能を決める
  • disabled属性でボタンを無効化する
  • オートフォーカスする（autofocus）
• フォームでボタンを使う方法
  • フォームの外側のボタンから送信
  • バリデーション無しで送信
  • buttonタグだけで値を送信
• aタグとの使い分け
  • aタグの中にbuttonを入れてはいけない
• CSSでボタンのデザインを変更する
  • outlineは無効化するべきではない
• ブラウザ対応

buttonタグの使い方

type属性でボタンの機能を決める

ボタンを使いこなすために、まずtype属性の3つの値を覚えましょう。<button type="○○">という形で指定します。

送信ボタンを作る（submit）重要

<form action="/learning/demo/send.html">
  <label for="email">メールアドレス</label>
  <input type="text" name="email" id="email">
  <button type="submit">送信</button>
</form>

input {
  border: solid 1px #333;
}
button {
  margin: 10px 0;
}

👆type="submit"と指定すると、フォーム（<form>）の送信ボタンとして機能するようになります。ボタンを押すと、メールアドレスの情報がサーバーに送られるわけですね。フォームの送信ボタンとしての使い方はあとで詳しく説明します。

リセットボタンを作る（reset）

<form action="/learning/demo/send.html">
  <div>
    <label for="email">メールアドレス</label>
    <input type="text" name="email" id="email">
  </div>
  <button type="reset">リセットする！</button>
  <button type="submit">送信</button>
</form>

input {
  border: solid 1px #333;
}
button {
  margin: 10px 0;
}

👆type="reset"と指定すると、フォームのリセットボタンとして機能するようになります。デフォルトでは<button>の親要素^[1]となる<form>内の入力欄が全てリセットされます。

何もしないボタンを作る（button）重要

<p>👇クリックしても何も起きない</p>
<button type="button">クリック！</button>

👆type="button"を指定すると、デフォルトでは無反応のボタンとなります。「フォームの送信・リセット」以外の目的でボタンを使うなら、こちらを指定することになると思います。

<p>クリックすると反応するよ！</p>

<button 
  type="button"
  onclick="alert('hello!')">
  反応するボタン
</button>

👆クリックでJavaScriptを呼び出すためのボタンならtype="button"にしましょう。

disabled属性でボタンを無効化する

<button>にdisabled属性を指定すると、クリックしても機能しないボタンになります。

<p>disabledが…</p>
<button type="button" disabled>あり</button>
<button type="button">なし</button>

JavaScriptで「フォームの必須項目が入力されたらdisabledを外し、送信可能にする」という使い方をすると便利です。

👆inputフィールドに文字が入力されているか判断し、disabled属性のオン・オフを切り替える簡単なJavaScriptを書きました。はじめはボタンが無効になっていますが、入力するとクリックできるようになります。

オートフォーカスする（autofocus）

autofocus属性を指定すると、ページを読み込んだ時点でボタンにフォーカスが当たります（＝選択された状態）。言い換えるとEnterキーでボタンを押せる状態ですね。

autofocus属性を指定

<p>👇ページをリロードするとフォーカスが…</p>
<button type="submit" autofocus>
  ボタン
</button>

ただし、以下の点に注意するようにしましょう。

フォームでボタンを使う方法

ここからはフォーム（<form>）の送信ボタンを設置するときに知っておきたいことを解説します。

フォームの外側のボタンから送信

<button>は自動で、自身を含む<form>にひも付けられます。このひも付け先は<button form="formタグのid">というように指定することができます。

🚫ひも付けられるformが不明

<form>略</form>
<button type="submit">送信</button>

👆この例ではボタンは<form>の外側に設置されています。このままでは、送信ボタンとして機能しません。どのフォームに紐づくのか不明だからです。

😊form属性でひも付け

<form id="myform">略</form>
<button type="submit" form="myform">送信</button>

👆form="formタグのid"を指定することで、フォームの外側でも送信ボタンとして機能するようになります。

バリデーション無しで送信

HTMLのバリデーション

HTMLではJavaScript無しでも簡単なバリデーション^[2]をかけることができます。

<form action="/learning/demo/send.html">
  <input type="text" required>
  <button type="submit">送信</button>
</form>

👆たとえば、<input>にrequired属性を指定すれば、そのフィールドを必須入力にできます。

formnovalidateでスキップ

このようにバリデーションが指定されている状態で、<button>にformnovalidate属性を指定すると、フォームのバリデーションがスキップされます。

<form action="/learning/demo/send.html">
  <input type="text" required>
  <button type="submit" formnovalidate>送信</button>
</form>

buttonタグだけで値を送信

ユーザーに入力してもらう必要がない場合、<input>を使わずに<button>だけでサーバーに値を送信できます。
具体的にはname（名前）とvalue（値）の属性を指定します。

<form action="/learning/demo/send.html">
  <button 
    type="submit"
    name="like"
    value="true"
  >いいね！</button>
</form>

👆たとえば、このように書けばlike: true（名前: 値）が送信されます。

aタグとの使い分け

HTML初心者の方は「アンカータグ（<a>）との違いは何？」と思うかもしれません。アンカータグもクリックしたら反応するボタンになるからです。

基本的に以下のように使い分けましょう。

JavaScriptの処理を呼び出すためのボタンなら<a>ではなく<button>を使いましょう。

関連するページを読む

aタグの使い方 - HTML

aタグの中にbuttonを入れてはいけない

🚫やってはいけない

<a href="/example">
  <button>ボタン</button>
</a>

HTML5では「<a>タグの中に対話型コンテンツ^[3]を入れてはいけない」というルールがあります。<button>は対話型コンテンツに当てはまるため、<a>の中に<button>を入れてはいけません。

CSSでボタンのデザインを変更する

ブラウザでは<button>にあらかじめCSSが適用されていますが、あまり見栄えの良いものではありません。ここでは簡単に見栄えを整えるCSSを紹介します。

<button type="button">BUTTON</button>

button {
  /* ブラウザ特有のスタイルを無効に */
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;

  /* 整える */
  margin: 1em 0; /* 前後の隙間 */
  padding: 0.6em 1em; /* 塗りの余白 */
  font-size: 1em; /* フォントサイズ */
  background-color: #1aa1ff; /* 背景色 */
  color: #FFF; /* テキストカラー */
  cursor: pointer; /* カーソルを指マークに */
  border-radius: 3px; /* 角の丸み */
  border: 0; /* 枠線を消す */
  transition: 0.3s; /* ホバーの変化を滑らかに */
}

/* ホバー時（カーソルをのせた時）の見た目 */
button:hover {
  background-color: #064fda; /* 背景色 */
}

👆ボタンをカスタマイズするときに、特に忘れないようにしたいのがappearance: noneです。これを忘れると異なる端末で見たときに全く違う見た目で表示されてしまうことがあります。

outlineは無効化するべきではない

アウトラインはbutton { outline: 0 }というCSSで消すことができますが、アクセシビリティの観点から残しておくべきです。たとえば、キーボードでパソコンを操作している読者は、アウトラインを目印にして「今どこにフォーカスが当たっているか」判断します。

ブラウザ対応

<button>はHTML5以前から使われているタグで、主要ブラウザすべてで問題なく使用できます（参考：caniuse.com）。