仕様

BUTTON要素は、
その内容で
ラベル付けされたボタンを
表します。

buttonボタン (push Button)
カテゴリ
  • フレージングコンテンツ
  • フローコンテンツ
  • インタラクティブコンテンツ
  • パルパブルコンテンツ
  • リストされた要素
  • 送信可能な要素
  • ラベル付け可能な要素
  • 自動大文字化継承要素
  • フォーム関連要素
種類通常要素
この要素を
使用できる
状態		フレージングコンテンツを受け入れる要素。
許可されて
いる内容		フレージングコンテンツ。ただし、インタラクティブコンテンツの子孫、またはtabindex属性が指定された子孫があってはなりません
属性グローバル属性,
type
ボタンの種類
form
フォーム要素に関連付け
name
要素の名前
value
要素の値
disabled
フォームコントロールが無効になっているかどうか
formaction
フォームの送信に使用するURL
formenctype
フォーム送信に使用するエントリリストのエンコーディングタイプ
formmethod
フォーム送信に使用するバリアント
formnovalidate
フォーム送信のフォームコントロール検証をバイパスする
formtarget
フォーム送信のコンテキストの閲覧
text / html
での
タグの省略		省略できません。
許可されて
いるARIA		checkbox, link, menuitem, menuitemcheckbox, menuitemradio, option, radio, switch, tab.
[既定値 : button]
DOM
インター
フェイス
HTMLButtonElement
  1. [Exposed=Window]
  2. interface HTMLButtonElement : HTMLElement {
  3. [HTMLConstructor] constructor();
  4.  
  5. [CEReactions] attribute boolean disabled;
  6. readonly attribute HTMLFormElement? form;
  7. [CEReactions] attribute USVString formAction;
  8. [CEReactions] attribute DOMString formEnctype;
  9. [CEReactions] attribute DOMString formMethod;
  10. [CEReactions] attribute boolean formNoValidate;
  11. [CEReactions] attribute DOMString formTarget;
  12. [CEReactions] attribute DOMString name;
  13. [CEReactions] attribute DOMString type;
  14. [CEReactions] attribute DOMString value;
  15.  
  16. readonly attribute boolean willValidate;
  17. readonly attribute ValidityState validity;
  18. readonly attribute DOMString validationMessage;
  19. boolean checkValidity();
  20. boolean reportValidity();
  21. undefined setCustomValidity(DOMString error);
  22.  
  23. readonly attribute NodeList labels;
  24. };
レンダリング
フォーム
  1. button {
  2. letter-spacing: initial;
  3. word-spacing: initial;
  4. line-height: initial;
  5. text-transform: initial;
  6. text-indent: initial;
  7. text-shadow: initial;
  8. text-align: center;
  9. display: inline-block;
  10. box-sizing: border-box;
  11. }

initial は、プロパティの初期値 (または既定値) を設定する指定なので、 letter-spacing: normal; word-spacing: normal; line-height: normal; text-transform: none; text-indent: 0; text-shadow: none; と置き換えて読んで頂くと判り易いかと思います。

CSS を大雑把に読むと、 テキストの字間のスペースは通常の字間です。 タグや単語の間隔は普通です。 行ボックスの高さはユーザーエージェントに依存します。 テキストを大文字表記に変換しません。 字下げは 0 です。 テキストに影を追加しません。 水平方向の配置をインラインコンテンツは行ボックスの中央に寄せられます。 ブロック要素ボックスを生成しますが、周囲のコンテンツに対しては単一のインラインボックスであるかのように流れるようになります。 width および height プロパティには、コンテンツ、パディング、境界線の領域が含まれますが、マージンは含まれません。 などになります。

参加
コンテキスト		インラインフォーマットコンテキスト
確立
コンテキスト		インラインフォーマットコンテキスト
button要素は、ボタンを表します。

button要素は、その内容でラベル付けされたボタンを表します。
button要素は、常に命令(コマンド)を定義します。

  1. <form action="./fmreceive.htm">
  2. <input name="nipText">
  3. <button type="submit" name="nbtSender" value="./fmbutton.htm">ボタン</button>
  4. <br>受信用の<br>ページへ
  5. </form>

受信用の
ページへ
参照元
  1. HTML Living Standard. 4.10.6 The button element
  2. HTML Living Standard. 4.11 Interactive elements 4.11.3.3 Using the button element to define a command
  3. HTML Living Standard. 15 Rendering 15.3.10 Form controls
  4. HTML 5.2 W3C 勧告. 4.10.6 The button element
  5. HTML 4.01 Specification W3C 勧告. 17.5 The BUTTON element
  6. MDN Web Docs. HTML <button>: ボタン要素

使用可能な箇所

フレージングコンテンツを
受け入れる要素に
配置できます。

button要素は、フレージングコンテンツを受け入れる要素に配置できます。
フレージングコンテンツは、フローコンテンツのタイプの１つです。フローコンテンツを受け入れる要素でも配置できます。

インタラクティブコンテンツでもあるので、インタラクティブコンテンツを受け付けない要素には配置できません。

ラベル付け可能な要素なので、他にラベル付け可能な要素がある label要素には配置できません。

フォーム関連要素ですが form属性で要素を form要素に関連付ける事ができるので、form要素の子孫に配置する必然はありません。form要素の子孫でもなく、form属性での関連付けもない記述は、用途としては不適切です。

  1. <pre>
  2. <button form="ifm721">ボタン</button>
  3. </pre>
  4. <form id="ifm721" action="./form.htm"></form>

フレージングコンテンツを配置できる pre要素のコンテンツの一部として、button要素を配置できます。
  1. <a href="./form.htm">
  2. <button>UP PAGE</button>
  3. </a>
  1. <form>
  2. <button formaction="./form.htm">UP PAGE</button>
  3. </form>

a要素はインタラクティブコンテンツを受け付けない要素です。ですので a要素のコンテンツの子孫として button要素を配置できません。
(文法としては不適切ですが、ブラウザなどがそれなりに対応して表示してくれたりします。)

a要素と同等の事は、formaction属性でできます。form要素の action属性でも同じです。

配置できるコンテンツ

フレージングコンテンツを
配置できます。

button要素は、フレージングコンテンツを配置できます。

インタラクティブコンテンツの子孫のない、または tabindex属性が指定された子孫のない、フレージングコンテンツを配置できます。テキストもフレージングコンテンツでもあるので、配置できます。

  1. <button>
  2. <span>ボタン</span>
  3. </button>

button要素のコンテンツの一部として、フレージングコンテンツである span要素を配置できます。

  1. <button>
  2. <a href="./form.htm">UP PAGE</a>
  3. </button>

href属性のある a要素はインタラクティブコンテンツですので、button要素の子孫には配置できません。
(文法としては不適切ですが、ブラウザなどがそれなりに対応して表示してくれたりします。)

属性

type属性

  1. <form action="./fmreceive.htm">
  2. <button>ボタン</button>
  3. </form>

type属性は、フォームコントロールのタイプを指定します。既定値は submit です。
タイプの種類は、submit, reset, button があります。

type属性へ
  1. <form action="./fmreceive.htm">
  2. <input name="nipText">
  3. <button type="submit" name="nbtSender" value="./fmbutton.htm">ボタン</button>
  4. <br>受信用の<br>ページへ
  5. </form>

type属性が "submit"の時は、button要素は、アクティブ化されたときにフォームを送信するボタンを表します。

type属性が "submit"の時に指定できる属性は、 form, name, value, disabled,
formaction, formenctype, formmethod, formnovalidate, formtarget です。


受信用の
ページへ
type属性へ
  1. <form action="./fmreceive.htm">
  2. <input name="nipText">
  3. <button type="reset" name="nbtSender" value="./fmbutton.htm">reset</button>
  4. <br>リセットします
  5. </form>

type属性が "reset"の時は、アクティブ化されるとフォームをリセットするボタンを表します。

type属性が "reset"の時に指定できる属性は、 form, name, value, disabled です。


リセットします
type属性へ
  1. <form action="./fmreceive.htm">
  2. <input name="nipText">
  3. <button type="button" name="nbtSender" value="./fmbutton.htm">ボタン</button>
  4. <br>動作<br>しません
  5. </form>

type属性が "button"の時は、デフォルトの動作がないボタンを表します。

type属性が "button"の時に指定できる属性は、 form, name, value, disabled です。


動作
しません

form属性

  1. <form id="ifmForm" action="./fmreceive.htm">
  2. <input name="nipText">
  3. </form>
  4. <button form="ifmForm" name="nbtSender" value="./fmbutton.htm">ボタン</button>
  5. <br>受信用の<br>ページへ

form属性は、form要素の id属性値を設定します。要素を form要素に関連付けます。省略したときは、最も近い祖先の form要素に関連付けられます。


受信用の
ページへ

name属性

  1. <form action="./fmreceive.htm">
  2. <input name="nipText">
  3. <button type="submit" name="nbtSender1" value="./fmbutton.htm">ボタン</button>
  4. <button type="submit" name="nbtSender2" value="./fmbutton.htm">ボタン</button>
  5. <br>受信用の<br>ページへ
  6. </form>

name属性は、要素の名前を指定します。フォームの送信とform.elements APIで使用する要素の名前です。

送信の対象となる button要素は、アクティブ化されたフォームの送信の契機となった要素だけの様です。 なので、複数の送信ボタンがある場合は同じ名前を付けて違う値を送る事でどのボタンで送信されたか判断するのに用いるのが良いと思います。 どのボタンでも同じ値を送りたいなら、input要素の type属性を hidden にしてその項目で送るのがお勧めです。


受信用の
ページへ

value属性

  1. <form action="./fmreceive.htm">
  2. <input name="nipText">
  3. <input type="hidden" name="nipSender" value="./fmbutton.htm">
  4. <button type="submit" name="nbtName1" value="value">ボタン</button>
  5. <button type="submit" name="nbtName2">ボタン</button>
  6. <br>受信用の<br>ページへ
  7. </form>

value属性は、フォーム送信の目的で要素の値を指定します。要素の値は、要素のvalue属性の値（存在する場合）、または空の文字列の値です。


受信用の
ページへ

disabled属性

  1. <form action="./fmreceive.htm">
  2. <input name="nipText">
  3. <button type="submit" name="nbtSender" value="./fmbutton.htm" disabled>ボタン</button>
  4. <br>受信用の<br>ページへ
  5. </form>

disabled属性は、ユーザーがそのコントロールを利用できないことを示す論理属性です。


受信用の
ページへ

formaction属性

  1. <form action="./fmbutton.htm">
  2. <input name="nipText">
  3. <button formaction="./fmreceive.htm">ボタン</button>
  4. <input type="hidden" name="nipSender" value="./fmbutton.htm">
  5. <br>受信用の<br>ページへ
  6. </form>

formaction属性は、URLを指定します。form要素の action属性を上書きします。action属性は、ブラウザーがフォーム情報をサーバーに送信する宛先です。
[使用できるタイプ(type属性の値)は、submit です。]


受信用の
ページへ

formenctype属性

  1. <button formenctype="application/x-www-form-urlencoded">ボタン</button>

formenctype属性は、エンコード方法を指定します。form要素の enctype属性を上書きします。enctype属性は、ブラウザーがフォーム情報をサーバーに送信するために使用するフォームデータのエンコード方法です。
[使用できるタイプ(type属性の値)は、submit です。]

formmethod属性

  1. <form action="./fmreceive.htm" method="post">
  2. <input name="nipText">
  3. <button formmethod="get">ボタン</button>
  4. <input type="hidden" name="nipSender" value="./fmbutton.htm">
  5. <br>受信用の<br>ページへ
  6. </form>

formmethod属性は、HTTP メソッドを指定します。form要素の method属性を上書きします。method属性は、ブラウザーがフォーム情報を送信するために使用する HTTP メソッドです。
[使用できるタイプ(type属性の値)は、submit です。]


受信用の
ページへ

formnovalidate属性

  1. <form action="./fmreceive.htm">
  2. <input name="nipText" required>
  3. <button formnovalidate>ボタン</button>
  4. <input type="hidden" name="nipSender" value="./fmbutton.htm">
  5. <br>受信用の<br>ページへ
  6. </form>

formnovalidate属性は、フォームデータ送信時に内容を検証しないように指定する論理属性です。form要素の novalidate属性を上書きします。
[使用できるタイプ(type属性の値)は、submit です。]


受信用の
ページへ

formtarget属性

  1. <form action="./fmreceive.htm" target="_self">
  2. <input name="nipText">
  3. <button formtarget="_blank">ボタン</button>
  4. <input type="hidden" name="nipSender" value="./fmbutton.htm">
  5. <br>新しい枠で<br>受信用の<br>ページへ
  6. </form>

formtarget属性は、表示する場所を指定します。form要素の target属性を上書きします。 target属性は、フォームの送信後に受信したレスポンスを表示する場所を示すユーザー定義の名前、もしくはアンダースコアから始まる標準化されたキーワードで、表示する場所を示します。
[使用できるタイプ(type属性の値)は、submit です。]


新しい枠で
受信用の
ページへ

気を付ける点

フォーム関連要素

フォーム関連要素であり type属性が submit の時は送信ボタンとなり送信の契機となりますので注意が必要です。

CSSリセット

  1. button {
  2. font-family: inherit;
  3. font-size: 100%;
  4. line-height: 1.15;
  5. margin: 0;
  6. overflow: visible;
  7. text-transform: none;
  8. }

normalize.css というリセットCSS の一部で、すべてのブラウザでフォントスタイルを変更します。 FirefoxおよびSafariでマージンを削除します。 IEおよびEdgeでオーバーフローを表示する。 Edge、Firefox、IEのテキスト変換の継承を削除します。
詳細は理解していないのですが、いろいろとバグ等の対応も含んでいる様なので、利用する事をお勧めします。