HTML5タグリファレンス
button

投稿 | | カテゴリー タグリファレンス, HTML5

<button>要素は、type属性の値によって、フォーム送信ボタン、フォームのリセットボタン、汎用ボタンになります。<input>要素のボタンと違って、value属性ではなく内容がボタンのラベルとして表示されます。


カテゴリ
フロー・コンテンツ、フレージング・コンテンツ、インタラクティブ・コンテンツ、パルパブル・コンテンツ
配置場所
フレージング・コンテンツが置ける場所。
内容
インタラクティブ・コンテンツを除くフレージング・コンテンツ。
属性
autofocus[="autofocus"] HTML5で追加

ページがロードされると自動的にフォーカスされます。

disabled[="disabled"]

指定することでコントロール無効の使用不可の状態にします。

form="ID" HTML5で追加

関連付ける<form>要素のid属性を指定します。この属性でフォームを指定することで、<form>要素に含まれていなくてもフォームの部品として機能させることができます。

formaction="URL" HTML5で追加

フォーム送信先のURLを指定します。指定した場合、<form>要素のaction属性よりも優先されます。

formenctype="MIMEタイプ" HTML5で追加

データ送信するMIMEタイプを指定します。指定できる値は以下のキーワードのみです。指定した場合、<form>要素のaction属性よりも優先されます。

application/x-www-form-urlencodedデフォルト
multipart/form-data
text/plain
formmethod="get|post" HTML5で追加

データ送信するHTTPメソッドを指定します。指定した場合、<form>要素のaction属性よりも優先されます。

formnovalidate[="formnovalidate"] HTML5で追加

入力・選択の内容のチェックを行わずに送信します。HTML5で追加されたフォーム要素のチェック機構に対応します。

formtarget="ウィンドウ名|キーワード"

データ送信の結果を表示させるウィンドウ名、または以下のキーワードを指定します。指定した場合、<form>要素のaction属性よりも優先されます。

_blank新しいウィンドウ
_self現在のウィンドウ
_parent親ウィンドウ、ウィンドウまたは許可が無ければ現在のウィンドウ
_top最上位のウィンドウ、ウィンドウまたは許可が無ければ現在のウィンドウ
<a href="//blog.emwai.jp/html5/_" target="_parent">ホーム</a>
name="名前"

フォーム送信とform.elements APIに使用されるこの要素の名前を指定します。

type="submit|reset|button"

ボタンの種類を以下のキーワードで指定します。

submitフォーム送信
resetフォームの内容をリセット
button汎用ボタン(何もなし)
value="パラメータ値"

フォーム送信に使用されるパラメータの値を指定します。

グローバル属性

accesskey, class, contenteditable, data-*, dir, hidden, id, lang, spellcheck, style, tabindex, title, translate

サンプル

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<title>HTML5 › button</title>
</head>
<body>
<h1>HTML5 › button</h1>
<form method="post">
<input type="text" name="message" value="" maxlength="140">
<button type="submit">メッセージを送信</button>
</form>
</body>
</html>