汎用的なボタンを設置する<button>タグの使用方法を掲載。
HTML5
対応ブラウザ
カテゴリー・コンテンツモデル
| 要素 | カテゴリー | コンテンツモデル |
|---|---|---|
| button要素 |
|
フレージングコンテンツ。ただし、インタラクティブコンテンツを子孫要素に 持つことは不可（button要素を入れ子にしたり、a要素を子孫要素にするなど） |
button要素 書式・概要
<button 属性="属性値">～</button>button要素はボタンを表します、ボタン作成専用の要素です。
type属性で指定する値によって、送信ボタン・リセットボタン・汎用ボタンのそれぞれの機能を果たすことができます。また、このボタンの場合は、<buttion>～</button>の範囲に配置された内容（テキスト関連の要素や画像など）をボタンのラベルとして表示させることができます。name属性とvalue属性で示す値は、別の処理をさせたい複数の送信ボタンを配置する場合に、受信側でどの送信ボタンが押されたかを見分けるためなどに利用されます。
グローバル属性（共通）
グローバル属性は、すべての要素に指定できる共通の属性のことです。
accesskey（アクセスキー）
要素にアクセスキーを割り当てます。いわゆるショートカットキーになります。
autocapitallze
入力／編集されたとき、入力文字列の先頭大文字化が自動的に行われるかどうかなどを指定します
| 値 | 内容 |
|---|---|
| offまたはnone | 自動的な大文字化は指定しない |
| onまたはsentences | 最初の文字を大文字化する |
| words | 各語の最初の文字を大文字化する |
| characters | すべての文字を大文字化する |
class（クラス）
要素に分類上の名前を指定します。CSSのセレクタで、特定の要素を選択できるようになります。
contenteditable（コンテント・エディタブル）
要素の内容が閲覧者による編集可能かどうか指定します。
| 値 | 内容 |
|---|---|
| trueまたは、空 | 閲覧者による編集可能。 |
| false | 閲覧者による編集不可。 |
data-
カスタムデータ属性、JavaScriptで使用するための独自の属性を指定します。「data-*****=””」のような形式で開発者が自由に指定できます。JavaScriptを利用してデータ処理したり、独自のデータを入力したりするために使用します。
dir（ディレクショナリティ）
要素の内容の書字方向（文字を書き進める方向）を指定します。
| 値 | 内容 |
|---|---|
| ltr | テキストを左から右へ書き進める。「Left to Righ」の略 |
| rtl | 要素は編集不可。「Right to Left」の略 |
| auto | ユーザーエージェントによって自動的に書字方向を決める |
draggable
Drag and Drop APIを使用して要素をドラッグすることができるか指定します。
| 値 | 内容 |
|---|---|
| テキストを左から右へ書き進める。「Left to Righ」の略 | |
| auto | ユーザーエージェントによって自動的に書字方向を決める |
hidden（ヒドゥン）
要素がその時点でのページの内容に関連がないことを表し、指定された要素は表示されません。用途としては、ページ内に表示したくないデータの値などをセットしておき、POSTなどで値を送信する場合などに使用したりします。（商品IDやユーザーID）
id（アイディー）
要素にユニークな識別IDを指定します。文章内で一意である必要があり、同じ値を複数のidに設定することはできません。CSSのセレクタで、特定の要素を選択できるようになります。また、リンクのフラグメント識別子としても利用できます。
空白文字は使用できません。
lang（ランゲージ）
要素の内容の言語を指定します。html要素や文書全体に対して指定することができます。また、一部の要素に対しても指定することができます。
例：lang=”ja”
spellcheck（スペルチェック）
要素の内容に対するスペルチェックの可否を指定します。
| true | スペルチェックをします。 |
| false | スペルチェックをしません。 |
style（スタイル）
要素に直接スタイルシートを指定します。
※style属性でスタイルを指定する方法はあまり推奨されていません。
tabindex（タブインデックス）
「TABキー」による移動順序を指定します。正の数値で指定すると、その順序にフォーカスが移動します。負の数値を指定すると選択することができますが、TABキーでの移動順序に含まれません。また、0を指定した要素は最後にフォーカスします。
title（タイトル）
要素に補足情報を加えます
translate（トランスレート）
翻訳対象にするかどうかを指定します。
| 値 | 内容 |
|---|---|
| yes | 翻訳対象とする |
| no | 翻訳非対象とする |
イベントハンドラ属性は、JavaScriptのコードを閲覧者の操作に合わせて実行する属性です。
onclick
要素をクリックしたときにスクリプトを実行します。
oninput
入力コントロールにデータを入力したときにスクリプトを実行します。
onsubmit
入力コントロールからデータを送信するときにスクリプトを実行します。
使用できる属性
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 実行サンプル
コメント