<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-datatext/plain formmethod="get|post"HTML5で追加- データ送信するHTTPメソッドを指定します。指定した場合、
<form> 要素のaction 属性よりも優先されます。 formnovalidate[="formnovalidate"]HTML5で追加- 入力・選択の内容のチェックを行わずに送信します。HTML5で追加されたフォーム要素のチェック機構に対応します。
formtarget="ウィンドウ名|キーワード"- データ送信の結果を表示させるウィンドウ名、または以下のキーワードを指定します。指定した場合、
<form> 要素のaction 属性よりも優先されます。_blank新しいウィンドウ _self現在のウィンドウ _parent親ウィンドウ、ウィンドウまたは許可が無ければ現在のウィンドウ _top最上位のウィンドウ、ウィンドウまたは許可が無ければ現在のウィンドウ <a href="https://emwai.jp/reference/html5/" target="_parent">ホーム</a> name="名前"- フォーム送信とform.elements APIに使用されるこのフィールドの名前を指定します。
type="submit|reset|button"- ボタンの種類を以下のキーワードで指定します。
submitフォーム送信 resetフォームの内容をリセット button汎用ボタン（何もなし） value="パラメータ値"- フォーム送信に使用されるパラメータの値を指定します。
- グローバル属性
accesskey,autocapitalize,autofocus,class,contenteditable,data-*,dir,draggable,enterkeyhint,hidden,id,inputmode,is,itemid,itemprop,itemref,itemscope,itemtype,lang,nonce,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>