<button>

ボタン

HTML4.01 ~ 利用可能

最終更新日: 2020.05.18

どんなタグ?
内容を持つボタンを作るには、
この<button>タグを使う。

コードサンプル
<body>
  <button type="button">ボタン</button>
</body>

<button> ~ </button>で挟まれた範囲が、ボタンであることを表すタグです。
様々な意味を持つボタンを作成する事ができます。

どのカテゴリに属しているの?
<button>要素は フロー・コンテンツ, フレージング・コンテンツ, インタラクティブ・コンテンツ というコンテンツ・カテゴリに属しているタグです。
梱包できるタグは?
<button>要素に梱包できるタグコンテンツ・モデルは、フレージング・コンテンツ(ただし、インタラクティブ・コンテンツの要素は配置できません。)です。
つまり、フレージング・コンテンツというカテゴリに属しているタグなら梱包可能です。

tomoni属性を指定しない場合は、入力内容を送信するボタンになるよ。

どうやって使うの?
ボタンとして表示したいテキストなどを<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”を選びましょう。

tomoniフォームを作成するときや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
最上位のタブが指定されるがない場合は現在のタブ

tomonitype属性は覚えておこう!

サンプルが見たい
<button>タグを使ったサンプルを紹介。

 

<button> タグを使ったサンプルを紹介します。

基本的な<button>タグのサンプル

コードサンプル
<body>
  <p>汎用的なボタンだよ</p>
  <button type="button">Button</button>
</body>
サンプルCSS
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/

tomoniボタンを作るときは<button>タグを使おう!

 

デフォルトスタイルは?
デフォルトでは、
グレーの地味なボタン。

一般的なブラウザでbutton要素を表示した場合はグレーの少し陰影がついたボタンが表示されます。
具体的には、下記のCSSと同等のスタイルが適用されます。

button要素のデフォルトスタイル
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;
}

tomoniアウトラインをCSSで消すこともできるけど、アクセシビリティ的には良くないよ。

対応ブラウザは?
一部の属性
対応していないブラウザもある。

<button>タグは HTML4.01以降で利用可能ですが、一部の属性はブラウザによっては対応していないものあります。
対応状況については、Can I useなどでご確認下さい。

Internet Explorar
Internet Explorar あり ~
Edge
Edge あり ~
Google Chrome
Google Chrome あり ~
Firefox
Firefox あり ~
Safari
Safari あり ~
Opera
Opera あり ~

tomoniモダンブラウザは使用できるよ。

このリファレンスを書いた人

tomoni

tomoni

未経験から現在は某企業でコーダーをしています。 WEBデザインも勉強中でデザイン〜実装まで出来るように奮闘中です!

About サロンメンバーで作った
リファレンスサイト

Shibajuku

Webのスキルを
ワイワイ学んで、
ガンガン活用
するサロン。

このサイトはWebクリエーター養成所
「Shibajuku」のメンバーが作った、
初心者でもわかりやすいHTML + CSSのリファレンスサイトです。

このサイトについて