<button> - ボタン

トップ > HTMLリファレンス > <button>

概要

項目説明
形式<button>~</button>
サポートH4 / e4 / Ch1 / Fx1 / Op1 / Sa1 / N6
カテゴリフローコンテンツ, フレージングコンテンツ, パルパブルコンテンツ, インタラクティブコンテンツ,
リステッド, ラベラブル, サブミッタブル, リアソシエイタブル, フォーム関連
親要素フレージングコンテンツ を子要素に持てるもの
子要素フレージングコンテンツ (ただし、インタラクティブコンテンツ を子孫に持つことはできない)
タグの省略開始タグ:必須 / 終了タグ:必須

説明

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

type=submit を指定すると、サブミットボタンとして機能します。

フォーム関連の属性は、サブミットボタンを複数用意し、押すボタンによってフォームパラメータ(action, enctype, method, novalidate, target)を変更する際に有用です。

属性

【固有属性】
属性意味
type=typeH4/e4/Ch/Fx/Sa/Op/N6。ボタンの種別を指定します。
  button:通常のボタン。
  submit:実行ボタン(規定値)。
  reset:リセットボタン。
省略した場合は type="submit" とみなされますが、IE6 など古いブラウザでは type="button" とみなされるものもあります。
name=nameH4/e4/Ch/Fx/Sa/Op/N6。名前を指定します。
value=valueH4/e4/Ch/Fx/Sa/Op。ボタンに割り当てられる値を指定します。
disabledH4/e4/Ch/Fx/Sa/Op/N6。この属性を指定すると、ボタンを押した時の動作が無効になります。
autofocusH5/e/Ch/Fx/Sa/Op。ページを開いた際に、自動的にフォーカスをあてます。
【データバインド関連】
属性意味
datafld=dataflde4-?。データバインド機能を用いる際の、データソースの列名を指定します。
dataformatas=formate4-?。データバインド機能を用いる際の、データフォーマットを html または text のいずれかで指定します。
datasrc=datasrce4-?。データバインド機能を用いる際の、データソースの ID を指定します。
【フォーム関連】
属性意味
form=idH5/Ch/Fx/Sa/Op。関連付けたい form要素のidを指定します。
formaction=urlH5/e/Ch/Fx/Sa/Op。フォーム送信先のURLを指定します。
formenctype=valueH5/e/Ch/Fx/Sa/Op。フォームのエンコードタイプを指定します。
formmethod=valueH5/e/Ch/Fx/Sa/Op。フォームのメソッド(GET/POST/...)を指定します。
formnovalidateH5/e/Ch/Fx/Op。input要素の required属性などの入力値のバリデーションチェックを行わないことを指定します。
formtarget=valueH5/e/Ch/Fx/Sa/Op。フォーム送信結果を表示するフレーム名を指定します。
【一般属性】
属性意味
accesskey=keyH4/e4/Ch2/Fx2/Sa3/Op12/N6/i1。アクセスキーを指定します。
class=classH4/e3/Ch1/Fx1/Sa1/Op1/N4。クラスを指定します。
contenteditable=boolH5/e55/Ch11/Fx3/Op10.6/Sa3.2。要素を編集可能にします。
dir=dirH4/e5/Ch5/Fx4/Sa6/Op25/N6。文字の表示方向を指定します。
hiddenH5/e/Ch/Fx/Sa/Op。要素を非表示にします。
id=idH4/e3/Ch/Fx/Sa/Op/N4。ID を指定します。
lang=langH4/e4/Ch/Fx/Sa/Op/N6。言語を指定します。
spellcheck=boolH5。スペルをチェックします。
style=styleH4/e3/Ch/Fx/Sa/Op/N4。スタイルシートを指定します。
tabindex=nH4/e4/Ch/Fx/Sa/Op/N6。タブインデックスを指定します。
title=titleH2/e2/Ch/Fx/Sa/Op/N6。タイトルを指定します。
translate=titleH5。翻訳可否を指定します。

使用例

HTML
<button type="button" onclick="alert('OK')">OK</button>
表示

Copyright (C) 1996-2015 杜甫々
初版:1996年9月10日 最終更新:2015年1月24日
http://www.tohoho-web.com/html/button.htm