＜button要素＞ - ボタン
公開日:
button要素は、ボタンを表す要素です。フォームをコントロールするボタン、またはJavaScriptで操作するためのボタンにできます。
概要
- 名前
- button
- カテゴリー
- Flow content
- Phrasing content
- Interactive content
- Palpable content
- Form-associated element
- Listed element
- Labelable element
- Submittable element
- 配置できる場所
- Phrasing contentが期待される場所。
- コンテンツモデル
- Phrasing content。ただし、Interactive contentの祖先になってはいけない。
- タグの省略
- 開始タグも終了タグも省略できません。
- DOM Interface
- HTMLButtonElement
- デフォルトのスタイル
button { align-items: flex-start; text-align: center; cursor: default; color: buttontext; background-color: buttonface; box-sizing: border-box; padding: 2px 6px 3px; border-width: 2px; border-style: outset; border-color: buttonface; border-image: initial; text-rendering: auto; letter-spacing: normal; word-spacing: normal; text-transform: none; text-indent: 0px; text-shadow: none; display: inline-block; margin: 0em 0em 0em 0em; font: 11px system-ui; -webkit-writing-mode: horizontal-tb; -webkit-appearance: button; }- 仕様書
- https://html.spec.whatwg.org/multipage/forms.html#the-button-element
属性
autofocus
この属性を付けると、ページをロードした時に、自動でフォーカス状態になる。論理属性。
disabled
この属性を付けると、操作が無効になる。論理属性。
form
formaction
formenctype
formmethod
formnovalidate
formtarget
name
value属性のキー。JavaScriptでDOMを操作する時にも利用する。
type
ボタンの種類を表すキーワード。列挙属性。
- submit
- 送信ボタン。サーバーサイドに関連付くフォームのデータを送信する。
- reset
- リセットボタン。関連付くフォームの、各フォームコントロールをリセットする。
- button
- ただのボタン。JavaScriptなどで操作するためのもので、押しても何も起こらない。
value
name属性の値。
グローバル属性
全てのタグで利用できるグローバル属性を指定できます。
説明
基本的な使い方
button要素は基本的に、form要素と組み合わせて使います。子孫要素に含めれば、そのフォームの内容をサーバーサイドに送信するためのボタンとなります。
HTML
<form action="./form.php">
<input name="aaa" value="SYNCER">
<button>内容を送信</button>
</form>form要素の外に配置しなければいけない場合は、form属性で関連付けることができます。
HTML
<!-- form要素 -->
<form id="syncer" action="./form.php"></form>
<!-- form要素の外にある -->
<button form="syncer">ボタン</button>リセットボタン
type属性にresetを指定すると、そのフォームに関連する全てのフォームコントロールの入力内容をリセットするボタンになります。
HTML
<form action="./form.php">
<p>
<label><input type="checkbox">チェックボックス</label>
</p>
<p>
<label><input type="radio" name="radio" checked>ラジオボタン1</label>
<label><input type="radio" name="radio">ラジオボタン2</label>
<label><input type="radio" name="radio">ラジオボタン3</label>
</p>
<p><input type="text" value=""></p>
<p><button type="reset">内容をリセット</button></p>
</form>無反応のボタン
type属性にbuttonを指定すると、クリックしても何も起こらないボタンになります。JavaScriptを利用して操作する予定のボタンなどに指定しましょう。
HTML
<form action="./form.php">
<input name="aaa" value="SYNCER">
<button type="button">何も起こらない</button>
</form>サンプルコード
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>【デモ】＜button要素＞ - ボタン</title>
<link rel="canonical" href="https://syncer.jp/Web/HTML/Reference/Element/button/">
<style>
body {
background-color: #fff ;
}
</style>
</head>
<body>
<p>button要素はボタンを表す要素です。type属性のキーワードによって違う役割を持たせることができます。</p>
<h2>type=submit / または省略</h2>
<form action="./form.php">
<button type="submit">送信</button>
</form>
<h2>type=reset</h2>
<form action="./form.php">
<p>
<label><input type="checkbox">チェックボックス</label>
</p>
<p><input type="text"></p>
<p><button type="reset">リセット</button></p>
</form>
<h2>type=button</h2>
<form action="./form.php">
<button type="button">無反応</button>
</form>
</body>
</html>