HTML辞典 button要素の解説
汎用的なボタンを設置する<button>タグの使用方法を掲載。
HTML5
対応ブラウザ
カテゴリー・コンテンツモデル
| 要素 | カテゴリー | コンテンツモデル |
|---|---|---|
| button要素 |
| フレージングコンテンツ。ただし、インタラクティブコンテンツを子孫要素に 持つことは不可（button要素を入れ子にしたり、a要素を子孫要素にするなど） |
button要素 書式・概要
<button 属性="属性値">～</button>button要素はボタンを表します、ボタン作成専用の要素です。
type属性で指定する値によって、送信ボタン・リセットボタン・汎用ボタンのそれぞれの機能を果たすことができます。また、このボタンの場合は、<buttion>～</button>の範囲に配置された内容（テキスト関連の要素や画像など）をボタンのラベルとして表示させることができます。name属性とvalue属性で示す値は、別の処理をさせたい複数の送信ボタンを配置する場合に、受信側でどの送信ボタンが押されたかを見分けるためなどに利用されます。
グローバル属性（共通）
HTML共通で指定できるグローバル属性について
使用できる属性
autofocus（オート・フォーカス）
【論理属性】
Webページが読み込まれた際に、自動的にボタンにフォーカスが移ります。
<button autofocus>～</button>disabled（ディスエーブルド）
【論理属性】
ボタンを無効にします。
<button disabled>～</button>form
任意のform要素に付与したid属性値を指定することで、関連付けを行います。対応ブラウザでは、form要素の外にボタンがあった場合でも、送信が可能です。※以前はJavaScriptで対応して部分になります。
formaction（フォーム・アクション）
関連付けされているform要素のaction属性値の上書きできます。
formenctype（フォーム）
関連付けされているform要素のenctype属性値の上書きできます。
formmethod（フォーム・アクション）
関連付けされているform要素のmethod属性値の上書きできます。
formnovalidate（フォーム）
【論理属性】
関連付けされているform要素のnovalidate属性値の上書きできます。送信ボタンの場合に指定できますが、一時保存ボタンなどに指定することで、入力内容の検証を無効にしてデータを送信することもでいます。
formtarget（フォーム・ターゲット）
関連付けされているform要素のtarget属性値の上書きできます。
name
データ送信する際に使用されるクエリ名です。
<button name="xxxxxx">～</button>type
表示されたボタン操作した際の挙動を指定します。
| submit | フォームをサブミットします。（初期値） |
| reset | フォームに入力された値をリセットします |
| button | スクリプトを実行するボタンなどに使用します。特に何もしません。 |
value
送信される値。
使用方法
<!DOCTYPE html>
<html lang="ja">
<head>
<title>buttomタグ サンプルページ</title>
<meta charset="uft-8"><!-- 文字コード指定 -->
</head>
<body>
<form action="https://kcfran.com/send" method="post">
<label >アンケートを回答してください。</label>
<label for="answear">
<input type="text" name="answear">
</label>
<div>
<button type="button" onclick="location.href='https://kcfran.com/send/'">ヘルプボタン</button>
</div>
<div>
<input type="submit" name="submit" value="回答">
</div>
</form>
</body>
</html>chromeブラウザ実行結果
Firefox ブラウザ実行結果
edgeブラウザ実行結果
operaブラウザ実行結果
