<button> - ボタン

■ 概要

項  目説  明
記述形式 <button>~</button>
対応ブラウザー H4+ / e4+ / N6+ / Fx1+ / Op6+ / Ch1+ / Sa1+
種  類
(カテゴリー)
フロー・コンテンツフレージング・コンテンツ
インタラクティブ・コンテンツパルパブル・コンテンツ
置ける場所 フレージング・コンテンツが記入できる場所
内包要素
(コンテンツ・モデル)
フレージング・コンテンツ
[ただし,子孫にインタラクティブ・コンテンツを含まないこと]
(コンテンツ・モデル: カテゴリー

■ 解説

<button> は,ボタンを表示します。 <button>~</button> で囲まれた部分がボタン上に表示されます。 ボタンに表示される部分に HTML を指定することも可能です。

■ 属性

種  類名  称
【固有属性】 autofocus *disabledformformaction *,
formenctype *, formmethod *formnovalidate *
formtarget *nametypevalue
【グローバル属性】 accesskeyclasscontenteditable * dir
hidden *idlangspellcheck *style
tabindextitletranslate *
【ARIA role属性】
指定可能な値 (役割)
button (既定の役割のため指定対象外),
linkmenuitemmenuitemcheckboxmenuitemradio
または,radio
【ARIA aria-* 属性】
指定可能なもの
ARIA グローバル状態とプロパティ
指定可能な役割の任意の状態とプロパティ   

name属性
button要素に名前を付けます。 この name属性の値は,フォームのデータが送信されたときにそれを処理するプログラム等から参照されます。 name属性の指定は,必須ではありませんが,指定が必要となる場合もあります。
とくに,プログラムから参照されますので,名前の付け方には注意が必要です。 日本語やいわゆる全角文字を含むものはダメで,記号等も使わないでください。 また,数字から始まらないようにして,スペースが必要な場合は,代わりに "_" (アンダースコア)を使用するようにしてください。 要するに,使用するプログラムの名前付けの規則に合わせて,プログラムでの処理に問題が発生しないようにする必要があります。

value属性
button要素がクリックされたときに,form要素action属性で指定されたプログラムに渡す値を指定します。 ここで注意が必要なことは,<input>でボタンを定義する際の value属性は,ボタンに表示されるラベルを変更するものでしたが,この <button> での value属性の値は,<input>のラジオボタンやチェックボックスの value属性と同様に,プログラムが参照する値を指定するものですのであるということです。

disabled属性
disabled属性は論理属性です。 この属性が指定されるとボタンが無効化されクリックできなくなります。

type属性
ボタンの役割を定義します。 指定できる値は次のとおりです。

type属性の値button要素の機能
submit 送信ボタン (<input type="submit"> と同等)
reset リセットボタン (<input type="reset"> と同等)
button ボタン (<input type="button"> と同等)

■ CSSプロパティ

種  類名  称
【よく使うもの】

■ 使用例

HTMLソース
HTML
<body> ~ </body>
<button onclick="alert('OK')">OK</button>

ブラウザー 表示例

■ 備考