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

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

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

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

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

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

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

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

type属性

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

指定できる値は、

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

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

name属性

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

value属性

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

disabled属性

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

<button>タグの他の属性

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

type="submit"用の属性

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

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

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


Welcome to UX MILK

UX MILKはより良いサービスやプロダクトを作りたい人のためのメディアです。

このサイトについて

UX MILKのディレクター募集