最終更新HTMLの<button>ボタンタグは、ボタンを作成するために使います。フォームの「送信」や「リセット」のボタンを設置するためによく使われます。その他に「クリックしたらJavaScriptで何らかの処理を行いたい」という場合にもよく使われます。<>HTML<p>こんにちは。type="button">クリック!</button>すべて表示このページの目次buttonタグの使い方type属性でボタンの機能を決めるdisabled属性でボタンを無効化するオートフォーカスする(autofocus)フォームでボタンを使う方法フォームの外側のボタンから送信バリデーション無しで送信buttonタグだけで値を送信aタグとの使い分けaタグの中にbuttonを入れてはいけないCSSでボタンのデザインを変更するoutlineは無効化するべきではないブラウザ対応buttonタグの使い方type属性でボタンの機能を決めるボタンを使いこなすために、まずtype属性の3つの値を覚えましょう。type="○○">という形で指定します。👆type="submit"と指定すると、フォーム(<form>)の送信ボタンとして機能するようになります。ボタンを押すと、メールアドレスの情報がサーバーに送られるわけですね。フォームの送信ボタンとしての使い方はあとで詳しく説明します。入力してから「リセット」をクリック!👆type="reset"と指定すると、フォームのリセットボタンとして機能するようになります。デフォルトでは<button>の親要素[1]となる<form>内の入力欄が全てリセットされます。😺リセットボタンを設置する機会は多くないと思います。「送信するつもりがリセットしてしまった」なんてことが起こらないように注意しないといけません。本当に取り消したければ、ユーザーはブラウザをリロードするかもしれません。👆type="button"を指定すると、デフォルトでは無反応のボタンとなります。「フォームの送信・リセット」以外の目的でボタンを使うなら、こちらを指定することになると思います。👆クリックでJavaScriptを呼び出すためのボタンならtype="button"にしましょう。disabled属性でボタンを無効化する<button>にdisabled属性を指定すると、クリックしても機能しないボタンになります。type="button">なし</button>すべて表示disabledありだとクリックしても反応しないJavaScriptで「フォームの必須項目が入力されたらdisabledを外し、送信可能にする」という使い方をすると便利です。👆inputフィールドに文字が入力されているか判断し、disabled属性のオン・オフを切り替える簡単なJavaScriptを書きました。はじめはボタンが無効になっていますが、入力するとクリックできるようになります。オートフォーカスする(autofocus)autofocus属性を指定すると、ページを読み込んだ時点でボタンにフォーカスが当たります(=選択された状態)。言い換えるとEnterキーでボタンを押せる状態ですね。ボタン</button>ページを読み込んだときに、このようにボタンにフォーカスが当たります(ブラウザによりますが、基本的にうっすらと青い線で囲まれます)。以下の点に注意するようにしましょう。オートフォーカスの注意点1つのHTML文書の中で、オートフォーカスが有効なのは1要素だけです。他の<input>や<button>にもautofocusが指定されている場合、効かないことがあります。当然ですが、ユーザーが他の部分を触ればフォーカスは外れてしまいます。モバイル端末では機能しないことがあります。フォームでボタンを使う方法ここからはフォーム(<form>)の送信ボタンを設置するときに知っておきたいことを解説します。フォームの外側のボタンから送信<button>は自動で、自身を含む<form>にひも付けられます。form="formタグのid">というように指定することができます。type="submit">送信</button>👆この例ではボタンは<form>の外側に設置されています。このままでは、送信ボタンとして機能しません。どのフォームに紐づくのか不明だからです。form="myform">送信</button>👆form="formタグのid"を指定することで、フォームの外側でも送信ボタンとして機能するようになります。バリデーション無しで送信HTMLのバリデーションHTMLではJavaScript無しでも簡単なバリデーション[2]をかけることができます。空欄のまま送信しようとしても失敗する👆たとえば、<input>にrequired属性を指定すれば、そのフィールドを必須入力にできます。formnovalidateでスキップこのようにバリデーションが指定されている状態で、<button>にformnovalidate属性を指定すると、フォームのバリデーションがスキップされます。formnovalidate>送信</button></form>すべて表示バリデーション(required)はスキップされるbuttonタグだけで値を送信ユーザーに入力してもらう必要がない場合、<input>を使わずに<button>だけでサーバーに値を送信できます。具体的にはname(名前)とvalue(値)の属性を指定します。aタグとの使い分けHTML初心者の方は「アンカータグ(<a>)との違いは何?」と思うかもしれません。アンカータグもクリックしたら反応するボタンになるからです。基本的に以下のように使い分けましょう。クリックで他のページへ飛ぶようにしたい👉<a>クリックでJavaScriptを動かしたい👉<button>フォームの送信・リセット👉<button>JavaScriptの処理を呼び出すためのボタンなら<a>ではなく<button>を使いましょう。<button>ボタン</button></a>HTML5では「<a>タグの中に対話型コンテンツ[3]を入れてはいけない」というルールがあります。<button>は対話型コンテンツに当てはまるため、<a>の中に<button>を入れてはいけません。CSSでボタンのデザインを変更するブラウザでは<button>にあらかじめCSSが適用されていますが、あまり見栄えの良いものではありません。ここでは簡単に見栄えを整えるCSSを紹介します。これを忘れると異なる端末で見たときに全く違う見た目で表示されてしまうことがあります。outlineは無効化するべきではないボタンをクリックすると青枠が表示されます。これは、フォーカスが当たったときに現れるアウトライン(輪郭線)です。}というCSSで消すことができますが、アクセシビリティの観点から残しておくべきです。キーボードでパソコンを操作している読者は、アウトラインを目印にして「今どこにフォーカスが当たっているか」判断します。ブラウザ対応<button>はHTML5以前から使われているタグで、主要ブラウザすべてで問題なく使用できます(参考:caniuse.com)。↩︎バリデーション:内容が適切かチェックすること。フォームの場合「必須入力欄が空になっていないか」「メールアドレスが正しいフォーマットになっているか」「文字数は多すぎないか」「使用できない文字列が含まれていないか」などのバリデーションをよく行います。↩︎ボタンやチェックボックスのようにユーザーが操作できるコンテンツのことです。インタラクティブ・コンテンツという呼び方をすることもあります。