<button>タグは、ボタンを表すタグです。button要素でテキストや、画像をマークアップすることで、ボタンとして認識され、使用されます。<button>タグでは、他のHTMLタグなども入れることができ、CSSでの装飾もできる為自由なデザインで利用することができます。
今回は、HTML5における<button>タグの使い方の使い方をご紹介します。
HTML5における<button>タグの使い方
まずは基本的な使い方です。サンプルコードです。
|
1 2 3 |
<button> ボタン </button> |
これだけの記述で画像のようなボタンになります。以下の属性などを指定して利用していきます。
よく使う<button>タグの属性
type属性
type属性は、ボタンの種類を表します。
指定できる値は、
- submit(送信ボタン)
- reset(リセットボタン)
- button(凡庸ボタン)
の３種類です。デフォルトでは、submitになっているので、特に指定をしない場合、送信ボタンになっていることになります。
|
1 2 3 |
<button type="submit"> 送信ボタン </button> |
name属性
|
1 2 3 |
<button name="submit"> 送信ボタン </button> |
name属性は、複数ボタンを設置した時などに、ボタンを識別するために名前をつける時に使用します。
value属性
|
1 2 3 |
<button value="text"> 送信ボタン </button> |
value属性は、送信それる値のことで、任意のテキストを指定しnameの値とセットで送信されるものです。
disabled属性
|
1 2 3 |
<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属性の設定を上書き |
| formmethod | HTTPメソッド | form要素のmethod属性の設定を上書き |
| formenctype | 送信時のデータ形式 | form要素のenctype属性の設定を上書き |
| formtarget | 送信結果の表示方法 | form要素のtarget属性の設定を上書き |
| formnovalidate | 妥当性をチェックしない | form要素のnovalidate属性の代わりに使用 （値は省略可能） |
様々な属性を使って目的のボタンを作成していきましょう。基本的な使い方は以上です。
