どんなタグ？
内容を持つボタンを作るには、
この<button>タグを使う。
<body>
<button type="button">ボタン</button>
</body>
<button> ~ </button>で挟まれた範囲が、ボタンであることを表すタグです。
様々な意味を持つボタンを作成する事ができます。
- どのカテゴリに属しているの？
- <button>要素は フロー・コンテンツ, フレージング・コンテンツ, インタラクティブ・コンテンツ というコンテンツ・カテゴリに属しているタグです。
- 梱包できるタグは？
-
<button>要素に梱包できるタグ（コンテンツ・モデル）は、フレージング・コンテンツ（ただし、インタラクティブ・コンテンツの要素は配置できません。）です。
つまり、フレージング・コンテンツというカテゴリに属しているタグなら梱包可能です。
属性を指定しない場合は、入力内容を送信するボタンになるよ。
どうやって使うの？
ボタンとして表示したいテキストなどを<button> タグで挟む。
<button>タグはフォームの送信やリセット、汎用的なボタンに使用します。表示したいテキストを
<button> 〜 </button> で挟みボタンを作ります。type 属性にボタンの種類を指定します。
- 使い方
<button type="ボタンの種類"> ボタンに表示するテキスト </button>
<body>
<form action="#" method="post">
<p>名前<br>
<input type="text" name="name">
</p>
<p>住所<br>
<input type="text" name="address">
</p>
<button type="submit">送信</button>
<button type="reset">リセット</button>
</form>
<p>↓これは汎用的なボタン</p>
<button type="button">クリック！</button>
</body>https://codehero.shibajuku.net/html/button/sample01/
- どこでも使えるの？
- <button>タグは フレージング・コンテンツ が配置できるところならどこでも使えます。
- 気をつけることは？
- type属性の初期値がsubmitなので、汎用的なボタンにしたい場合はtype=”button”を選びましょう。
フォームを作成するときやJavaScriptで操作するボタンを作るときなどに使う事が多いよ
使える属性は？
type属性は使う事が多いです。
<button> 要素には、どの要素にでも使えるグローバル属性と、以下の固有属性が使えます。
type
属性
ボタンの種類を指定する属性です。
- 属性値
-
submit初期値- フォームの入力内容を送信する
reset- フォームの入力内容をリセットする
button- 汎用的なボタン
form
属性
HTML5 廃止
formのid属性と値を同じにする事で紐付けができます。
もしform属性を指定しなかった場合は、同一文書内の直近の親要素のフォームと紐付けがされます。
- 属性値
- 関連させるform要素のid名
value
属性
HTML5 廃止
button要素に値を指定できます。指定した値はサーバーに引数として渡されます。
- 属性値
- 送信する値
name
属性
HTML5 廃止
button要素に任意の名前をつける事ができますが、日本語や頭文字が数字はNGです。
value属性とペアでデータを送信できます。
- 属性値
- ボタンの名前
autofocus
属性
HTML5 廃止
指定されたbutton要素があらかじめフォーカスされます。
disabled
属性
この属性がつけられたbutton要素は無効となります。
- 属性値
-
disabled初期値- ボタンを無効にする
formaction
属性
HTML5 廃止
送信先URLを指定します。
- 属性値
- 送信先URL
formenctype
属性
HTML5 廃止
送信データのエンコードタイプを指定します。
- 属性値
-
application/x-www-form-urlencoded初期値- データをURLエンコードする
multipart/form-data- ファイルのアップロードが必要な時に指定する
text/plain- デバッグ目的で使用します。
formmethod
属性
HTML5 廃止
HTTPメソッドの送信方法を指定できます。
- 属性値
-
get初期値- URLにデータが追加されサーバーに送信される
post- 個人情報など公開してはいけない内容に使用
formnovalidate
属性
HTML5 廃止
送信ボタンの場合にデータの検証をしない場合に指定する。
- 属性値
-
formnovalidate初期値- データの検証をしない
formtarget
属性
HTML5 廃止
データ送信先の開き方を指定する。
- 属性値
-
_self初期値- 現在のタブが指定される
_blank- 新規タブが指定される
_parent- 親のタブが指定されるがない場合は現在のタブ
_top- 最上位のタブが指定されるがない場合は現在のタブ
type属性は覚えておこう！
サンプルが見たい
<button>タグを使ったサンプルを紹介。
<button> タグを使ったサンプルを紹介します。
基本的な<button>タグのサンプル
<body>
<p>汎用的なボタンだよ</p>
<button type="button">Button</button>
</body>button {
width: 200px;
height: 50px;
border-radius: 4px;
border: solid 1px #D67B5F;
color: #fff;
background-color: #D67B5F;
font-size: .875rem;
font-weight: bold;
text-transform: uppercase;
}https://codehero.shibajuku.net/html/button/sample02/
ボタンを作るときは<button>タグを使おう！
デフォルトスタイルは？
デフォルトでは、
グレーの地味なボタン。
一般的なブラウザでbutton要素を表示した場合はグレーの少し陰影がついたボタンが表示されます。
具体的には、下記のCSSと同等のスタイルが適用されます。
button {
background-color: buttonface;
box-sizing: border-box;
margin: 0em;
padding: 1px 7px 2px;
border-width: 1px;
border-style: solid;
border-color: rgb(216, 216, 216) rgb(209, 209, 209) rgb(186, 186, 186);
border-image: initial;
}アウトラインをCSSで消すこともできるけど、アクセシビリティ的には良くないよ。
対応ブラウザは？
一部の属性は
対応していないブラウザもある。
<button>タグは HTML4.01以降で利用可能ですが、一部の属性はブラウザによっては対応していないものあります。
対応状況については、Can I useなどでご確認下さい。
- Internet Explorar
- Internet Explorar あり ~
- Edge
- Edge あり ~
- Google Chrome
- Google Chrome あり ~
- Firefox
- Firefox あり ~
- Safari
- Safari あり ~
- Opera
- Opera あり ~
モダンブラウザは使用できるよ。
