【HTML5】button 要素。

Ads by Google

HTML5 ロゴ

<button>タグは「ボタン」を作成する際に使用します。

[type]属性の値を指定することで、主に3種類のタイプのボタンに変化します。
[type]属性で指定できる値は以下の3種類。

  • [type="submit"]:フォーム入力内容を送信するサブミットボタン
  • [type="reset"]:フォーム入力内容をリセットするリセットボタン
  • [type="button"]:何もしない汎用ボタン

[form]属性では、どのフォームと関連付けるかを指定します。
<button> は初期値では直近の親要素となる <form> と関連付けられますが、<form> のid属性の値と <button> のform属性の値を一致させることで、ボタンを特定のフォームと関連付けることができます。ボタンを任意の場所に配置できるので、ウェブアプリケーションの開発の際に非常に便利です。

[name]属性は、<button> に名前を付ける際に使用します。スクリプトで操作する際などに必要となる <button> のコントロール名です。

[disabled]属性は、ボタンを無効にする際に使用します。
disabled属性が指定されていると、ボタンを押せなくなりデータは送信されません。

[autofocus]属性は、ボタンへの自動フォーカスを指定する際に使用します。

formaction属性(送信先URL)・formenctype属性(送信するデータの形式)・formmethod属性(送信方法)・formnovalidate属性(入力されたデータの妥当性を確認しない)・formtarget属性(フォーム送信するターゲット先)は、[type="submit"]の場合にのみ指定することができます。
<form> の属性でも同様の指定をすることができますが、<button> 側でこれらの属性を指定すると<form> の指定より優先されます。

[value]属性は、<button>自身の値を指定する際に使用します。 例えば、<input> などの入力部品が無くても、 <button> の値を送信して何らかのフラグにすることができます。

HTML4.01からHTML5へのバージョンアップによる変更点

HTML5では、HTML4.01には無かった autofocus属性・form属性・formaction属性・formenctype属性・formmethod属性・formnovalidate属性・formtarget属性 が新たに追加されています。

参考:HTML5 タグ一覧

こちらの記事もいかがですか?

アナタにオススメ!
同じカテゴリーの他の記事です。

Ads by Google

Leave a Replyコメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です