HTML <button> タグ

コース推薦：

<button> 定義と使用方法

タグでクリック可能なボタンを定義します。 <button> 要素内にテキスト（および <i>、<b>、<strong>、<br>、<img> などのタグ）を配置できます。これは <input> 要素が作成できるボタンではできないこと！

ヒント：常にボタンに <button> 要素指定 type属性を訪れて、ブラウザにボタンのタイプを教えます。

ヒント：CSSを使ってボタンに簡単にスタイルを追加できます！以下の例を確認したり、私たちの CSSボタンチュートリアル。

詳細

<button> コントロールと <input type="button"> と比較して、より強力な機能と豊富な内容を提供しています。<button> と </button> タグ間のすべての内容はボタンの内容であり、テキストやマルチメディアコンテンツなどの受け入れ可能な正文内容も含まれます。例えば、ボタンに画像と関連するテキストを含めることができ、それを使ってボタン内に魅力的なマーク画像を作成できます。

ユニークに禁止されている要素はイメージマップで、マウスやキーボードの操作がボタン行動に干渉するためです。

常にボタンに type属性です。Internet Explorerのデフォルトのタイプは "button"、他のブラウザ（W3C規范を含む）のデフォルト値は "submit"。

参照：

HTML DOMリファレンスマニュアル：Buttonオブジェクト

CSSチュートリアル：ボタンのスタイルを設定

例

このようにクリック可能なボタンをマークします：

<button type="button">クリックして！</button>

自分で試してみてください

ヒント：ページの下部にさらに例を提供しています。

属性

属性 値 説明
autofocus autofocus ページが読み込まれた際にボタンが自動的にフォーカスを取得するように指定。
disabled disabled ボタンを無効にする。
form form_id ボタンがどのフォームに属するかを指定。
formaction URL

フォームを送信する際にデータをどこに送信するかを指定。

type="submit"時にのみ適用。
formenctype
  • application/x-www-form-urlencoded
  • multipart/form-data
  • text/plain

フォームデータをサーバーに送信する前にどのようにエンコードするかを指定。

type="submit"時にのみ適用。
formmethod
  • get
  • post

フォームデータを送信する際にどのHTTPメソッドを使用するかを指定。

type="submit"時にのみ適用。
formnovalidate formnovalidate

フォームを送信時にデータのバリデーションを行わないように指定。

type="submit"時にのみ適用。
formtarget
  • _blank
  • _self
  • _parent
  • _top
    • フレーム名

フォームを送信した後にどの位置に応答を表示するかを指定する。

type="submit"時にのみ適用。
name 名前 ボタンの名前を指定する。
popovertarget element_id 呼び出しウィンドウ要素を指定する。
popovertargetaction
  • hide
  • show
  • toggle
 ボタンがクリックされたときにポップアップウィンドウエレメントに対する操作を指定します。
type
  • button
  • reset
  • submit
 ボタンのタイプを指定します。
value テキスト ボタンの初期値を指定します。

グローバル属性

<button> タグは以下のイベント属性をサポートしています HTML内のグローバル属性。

イベント属性

<button> タグは以下のイベント属性をサポートしています HTML内のイベント属性。

デフォルトのCSS設定

なし。

さらに多くの例

例2

CSSを使ってボタンのスタイルを設定：

<!DOCTYPE html>
<html>
<head>
<style>
.button {
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
}
.button1 {background-color: #4CAF50;} /* 緑色 */
.button2 {background-color: #008CBA;} /* 青色 */
</style>
</head>
<body>
<button class="button button1">緑色</button>
<button class="button button2">青色</button>
</body>
</html>

自分で試してみてください

例2

CSSを使ってボタンのスタイルを設定（ホバー効果付き）：

<!DOCTYPE html>
<html>
<head>
<style>
.button {
  border: none;
  color: white;
  padding: 16px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  transition-duration: 0.4s;
  cursor: pointer;
}
.button1 {
  background-color: white;
  color: black;
  border: 2px solid #4CAF50;
}
.button1:hover {
  background-color: #4CAF50;
  color: white;
}
.button2 {
  background-color: white;
  color: black;
  border: 2px solid #008CBA;
}
.button2:hover {
  background-color: #008CBA;
  color: white;
}
</style>
</head>
<body>
<button class="button button1">緑色</button>
<button class="button button2">青色</button>
</body>
</html>

自分で試してみてください

ブラウザのサポート

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
サポート サポート サポート サポート サポート