<button> クリックできるボタンを設置する
取り扱い | 現行の標準 |
カテゴリ |
フロー・コンテンツ フレージング・コンテンツ インタラクティブ・コンテンツ |
親にできる要素 | フレージング・コンテンツを受け入れる要素 |
子にできる要素 | インタラクティブ要素を含まないフレージング・コンテンツ |
対応ブラウザ | caniuseで確認 |
<button>タグの説明
<button>は、利用者が任意のタイミングで押下可能なボタンを配置するための要素です。
ウェブページのボタンは、多くの場合<form>に付随する装置として見られますが、この要素は文章の中でボタンが必要な箇所へ自由に配置できます。
このタグを利用する場合は、与えられる属性の役目を覚えて適切にデータを処理する必要があります。
<button>タグの特徴
- レイアウトの初期値はインラインです。文章の改行には影響を与えません。
- 視覚的な効果としてブラウザに実装された規定のスタイルシートが適用されます。これを調整したい場合は制作者側でCSSを用意して下さい。
- 同一のページ内に複数使うことができます。ただし、この要素自体を入れ子にすることはできません。
<button>に指定できる主な属性
- autofocus
- ページを読み込んだ時に、このボタンが予めフォーカスされている状態となります。一つのページに一箇所だけ指定できます。
- disabled
- ユーザーがボタンを操作できない状態にします。誤作動を防ぐためのフラグとして管理できます。
- form
- <form>の外にボタンを配置する場合、この属性に<form>のidを指定することで関連付けが行えます。
- formaction
- このボタンによって送信されるデータの受け手となるURLを指定します。この値は<form>のaction属性よりも優先されます。
- formenctype
- このボタンが送信用のボタンである場合、送信されるデータのエンコード方式を指定します。この値は<form>のenctype属性よりも優先されます。
- application/x-www-form-urlencoded:初期値
- multipart/form-data:<input>のtype属性に「file」を指定した場合
- text/plain:デバッグ用途。実際の環境では使用しない
- formmethod
- このボタンが送信用のボタンである場合、送信に使用されるHTTPメソッドを指定します。これは<form>の「get」と「post」と同じ概念です。この値は<form>のmethod属性よりも優先されます。
- formnovalidate
- このボタンが送信用のボタンである場合、データ送信時に内容を検証しないように指定します。この値は<form>のnovalidate属性よりも優先されます。
- formtarget
- このボタンが送信用のボタンである場合、フォーム送信後のページ遷移に関する挙動を指定します。この値は<form>のtarget属性よりも優先されます。
- _self:初期値
- _blank:ブラウザの設定に従い、新しいタブやウィンドウで表示
- _parent:相対的に親のコンテクストがある場合に親の閲覧環境で表示。親要素がない場合は_selfと同じ
- _top:最上位の閲覧コンテクストで表示。親要素がない場合は_selfと同じ
- name
- ボタンの名前を指定します。この値が、ボタンから送信されるデータの識別名となります。
- type
- ボタンの役目を決定します。
- submit:データをサーバーに送信
- reset:データを初期化(リセット)
- button:何もしない(任意の操作を加える)
- value
- この値はname属性の内容として送信され、サーバーに引数として渡されます。
- グローバル属性
- 基本的に全てのHTML要素に指定できる共通の属性です。
- イベントハンドラ
- 基本的に全てのHTML要素に指定できるコンテンツ属性です。
<button>の使い方とサンプル
<button>を記述する場合は、まずtype属性でボタンの役目を決めます。
HTML
<button type="button">ボタン</button>
表示確認
テキストフォームに記入した内容をリセットするボタンを配置した例です。以下の内容では、送信ボタンを無効にするためにdisabled属性を追記しています。
HTML
<form id="form1"> <div>文字を入力してリセットしてみよう。</div> <input type="text" name="item1" style="width:12em;"><br> <textarea name="item2" cols="20" rows="3"></textarea><br> <button type="button" disabled>送信</button> <button type="reset">削除</button> </form>
表示確認
JavaScript応用すれば、ページの中で色々な操作ができます。以下の例は、数字のカウンターとリセットボタンの組み合わせです。
HTML
<div style="width:200px; padding:5px; border:1px solid #CCC; text-align:center;"> <div style="font-weight:bold;"> Count:<span id="counter-num">0</span> </div> <div> <button type="button" onclick="incrementClick()">Click</button> <button type="button" onclick="resetCounter()">Reset</button> </div> </div> <script> var counterVal = 0; function incrementClick() { updateDisplay(++counterVal); } function resetCounter() { counterVal = 0; updateDisplay(counterVal); } function updateDisplay(val) { document.getElementById("counter-num").innerHTML = val; } </script>
表示確認
Count:0
<button>に関連するHTMLタグ
入力・送信フォームに関連する要素 | |
---|---|
<form> | フォームを作成する |
<fieldset> | フォームの入力項目をグループ化する |
<legend> | 入力項目のグループにキャプションを与える |
<input> | フォームを構成する部品を作成する |
<label> | 入力項目にキャプションを与えて関連付ける |
<textarea> | 複数行に渡るテキスト編集項目を作成する |
<button> | ボタンを設置する |
<select> | セレクトボックスを作成する |
<option> | セレクトボックスの選択肢を作成する |
<optgroup> | セレクトボックスの選択肢をグループ化する |
<datalist> | フォームの入力欄に入力候補となる選択肢を提供する |