buttonタグ ボタンを表す
buttonタグ ボタンを表す

buttonタグ ボタンを表す

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

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

<>HTML <p>こんにちは。</p> <button type="button">クリック！</button> すべて表示

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

buttonタグの使い方

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

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

  1. submit→送信するボタン
  2. reset→リセットするボタン
  3. button→何もしないボタン（自分で操作を加える）
送信ボタンを作る（submit）重要 <>HTML #CSS <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） <>HTML #CSS <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）重要 <>HTML <p>👇クリックしても何も起きない</p> <button type="button">クリック！</button> すべて表示

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

<>HTML <p>クリックすると反応するよ！</p> <button type="button" > 反応するボタン </button> すべて表示

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

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

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

<>HTML <p>disabledが…</p> <button type="button" disabled>あり</button> <button type="button">なし</button> すべて表示

disabledありだとクリックしても反応しない

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

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

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

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

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

ページを読み込んだときに、このようにボタンにフォーカスが当たります（ブラウザによりますが、基本的にうっすらと青い線で囲まれます）。

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

オートフォーカスの注意点
  • 1つのHTML文書の中で、オートフォーカスが有効なのは1要素だけです。他の<input>や<button>にもautofocusが指定されている場合、効かないことがあります。
  • 当然ですが、ユーザーが他の部分を触ればフォーカスは外れてしまいます。
  • モバイル端末では機能しないことがあります。

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

ここからはフォーム（<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]をかけることができます。

<>HTML <form action="/learning/demo/send.html"> <input type="text" required> <button type="submit">送信</button> </form> すべて表示

空欄のまま送信しようとしても失敗する

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

formnovalidateでスキップ

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

<>HTML <form action="/learning/demo/send.html"> <input type="text" required> <button type="submit" formnovalidate>送信</button> </form> すべて表示

バリデーション（required）はスキップされる

buttonタグだけで値を送信

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

<>HTML <form action="/learning/demo/send.html"> <button type="submit" name="like" value="true" >いいね！</button> </form> すべて表示

バリデーション（required）はスキップされる

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

aタグとの使い分け

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

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

  • クリックで他のページへ飛ぶようにしたい👉<a>
  • クリックでJavaScriptを動かしたい👉<button>
  • フォームの送信・リセット👉<button>

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

関連するページを読む aタグの使い方 - HTML aタグの中にbuttonを入れてはいけない 🚫やってはいけない <a href="/example"> <button>ボタン</button> </a>

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

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

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

<>HTML #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）。

  1. もしくは親の親などの祖先（自身を含むもの） ↩︎

  2. バリデーション：内容が適切かチェックすること。フォームの場合「必須入力欄が空になっていないか」「メールアドレスが正しいフォーマットになっているか」「文字数は多すぎないか」「使用できない文字列が含まれていないか」などのバリデーションをよく行います。 ↩︎

  3. ボタンやチェックボックスのようにユーザーが操作できるコンテンツのことです。インタラクティブ・コンテンツという呼び方をすることもあります。 対話型コンテンツの一覧 ↩︎

📎📎📎📎📎📎📎📎📎📎
BOT