<button>タグの解説
<button>は、利用者が任意のタイミングで操作可能なボタンを作成します。ボタンはマウス、キーボード、指、音声コマンドの操作に応答し、サーバーに情報を送信したり何らかの機能を起動させたりします。
ウェブページに設置されるボタンは、多くの場合<form>に付随する装置として見られますが、この要素は文章の中でボタンが必要な箇所へ自由に配置できます。
このタグを利用する場合は、与えられる属性の役目を適切に覚えてデータを処理する必要があります。特に、JavaScriptと組み合わせることで色々な用途に使えます。
<button>タグの特徴
- レイアウトの初期値はインラインです。文章の改行には影響を与えません。
- 視覚的な効果としてブラウザに実装された規定のスタイルが適用されます。これを調整したい場合は制作者側でスタイルシートを用意してください。
- 同一のページ内に複数使うことができます。ただし、この要素自体を入れ子にすることはできません。
<button>要素に指定できる属性
autofocus- ページを読み込んだ時に、このボタンが予めフォーカスされている状態となります。ひとつのページに一箇所だけ指定できます。
disabled- ユーザーの操作を受け付けない状態にします。既定値ではインターフェイスの色が薄くなり、クリックやフォーカスなどのイベントに反応しなくなります。これは値のない論理属性です。
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>要素の使い方とサンプルコード
この要素の最も基本的な書き方は以下の通りです。既定値では、ボタンを起動させるとサーバーにデータを送信する動作を試みます。汎用的なボタンとして機能させる場合は、必ずtype属性の値にbuttonを指定してください。
<button type="button">ボタン</button>
フォームのリセットボタンを作成する
type属性にresetを指定すると、入力フォームを初期状態にリセットする機能に変わります。以下の内容を操作して、実際に動作確認をしてみましょう。
<form class="sample-block">
<input type="text" name="item1" placeholder="文字を入力してリセットしてみましょう">
<textarea name="item2" cols="20" rows="3" placeholder="文字を入力してリセットしてみましょう"></textarea>
<button type="reset">リセット</button>
</form>
CSSでボタンを装飾する
<button>は開始タグと終了タグの間に任意のフレージング・コンテンツを配置できるため、柔軟にデザインを変えることができます。ボタンの装飾を行う場合は、ユーザビリティに配慮して操作の妨げにならないように注意しましょう。
.sample-block button {
appearance: none;
border: 1px solid gray;
border-radius: 3px;
cursor: pointer;
}
.sample-block .button-1 {
padding-inline: 1rem;
padding-block: 0.5rem;
font-weight: bold;
}
.sample-block .button-2 {
display: block;
inline-size: 100%;
padding-inline: 1rem;
padding-block: 0.5rem;
font-weight: bold;
}
.sample-block .button-3 {
display: block;
inline-size: 100%;
padding-inline: 1rem;
padding-block: 0.5rem;
background: #ff0099;
color: #fff;
font-weight: bold;
}
.sample-block .button-4 {
display: block;
inline-size: 100%;
padding-inline: 1rem;
padding-block: 0.5rem;
border: 1px solid gray;
background: linear-gradient(#00ccff 20%, #0066ff 80%, #0000cc);
color: #fff;
font-weight: bold;
}
JavaScriptでボタンの機能を作成する
JavaScriptとボタンを組み合わせると、ページの中で様々な機能を提供できるようになります。以下の例は、数字のカウンターとリセットボタンの組み合わせを表しています。
<div class="sample-block">
<div class="counter">
Count：<span id="count-num">0</span>
</div>
<div>
<button type="button" onclick="js_count()">Click</button>
<button type="button" onclick="js_reset()">Reset</button>
</div>
</div>
<script>
var counterVal = 0;
function js_count() {
updateDisplay(++counterVal);
}
function js_reset() {
counterVal = 0;
updateDisplay(counterVal);
}
function updateDisplay(val) {
document.getElementById("count-num").innerHTML = val;
}
</script>