HTML5における<button>タグの使い方

<button>タグは、ボタンを表すタグです。button要素でテキストや、画像をマークアップすることで、ボタンとして認識され、使用されます。<button>タグでは、他のHTMLタグなども入れることができ、CSSでの装飾もできる為自由なデザインで利用することができます。

今回は、HTML5における<button>タグの使い方の使い方をご紹介します。

HTML5における<button>タグの使い方

まずは基本的な使い方です。サンプルコードです。

<button>
ボタン
</button>

これだけの記述で画像のようなボタンになります。以下の属性などを指定して利用していきます。

スクリーンショット 2016-05-16 17.42.12

よく使う<button>タグの属性

type属性

type属性は、ボタンの種類を表します。

指定できる値は、

  • submit(送信ボタン)
  • reset(リセットボタン)
  • button(凡庸ボタン)

の3種類です。デフォルトでは、submitになっているので、特に指定をしない場合、送信ボタンになっていることになります。

<button type="submit">
送信ボタン
</button>

name属性

<button name="submit">
送信ボタン
</button>

name属性は、複数ボタンを設置した時などに、ボタンを識別するために名前をつける時に使用します。

value属性

<button value="text">
送信ボタン
</button>

value属性は、送信それる値のことで、任意のテキストを指定しnameの値とセットで送信されるものです。

disabled属性

<button disabled="disabled">
ボタン
</button>

disabled属性は、ボタンを使用不可の状態にするものです。

<button>タグの他の属性

属性属性の説明値の説明
formフォームとの関連付けID名関連付けるform要素に指定したID名
autofocus自動フォーカスの指定autofocus値は省略可能、1つの文書に1つだけ指定可能

type="submit"用の属性

formaction属性、formmethod属性、formenctype属性、formtarget属性、formnovalidate属性は、type="submit" 用の属性となります。

属性属性の説明値の説明
formaction送信先の指定 form要素のaction属性の設定を上書き
formmethodHTTPメソッドform要素のmethod属性の設定を上書き
formenctype 送信時のデータ形式 form要素のenctype属性の設定を上書き
formtarget送信結果の表示方法form要素のtarget属性の設定を上書き
formnovalidate 妥当性をチェックしない form要素のnovalidate属性の代わりに使用 (値は省略可能)

様々な属性を使って目的のボタンを作成していきましょう。基本的な使い方は以上です。