<button> クリックできるボタンを設置する

<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属性でボタンの役目を決めます。

<button type="button">ボタン</button>

テキストフォームに記入した内容をリセットするボタンを配置した例です。以下の内容では、送信ボタンを無効にするためにdisabled属性を追記しています。

<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応用すれば、ページの中で色々な操作ができます。以下の例は、数字のカウンターとリセットボタンの組み合わせです。

<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>