HTML でボタンを別のボタンの中にネストすることは可能ですか?

ボタンは別のボタンの中に入れ子にできますか?

開発者は、原始的な HTML セマンティクスを目指して努力していると、しばしば不可解な状況に遭遇します。このようなパズルの 1 つは、ボタンを別のボタン内にネストできるかどうかです。

問題の説明で述べたように、このネストにはいくつかの影響があります。

• CSS スタイルは無効になります。 t apply: 親ボタンのクラスまたは ID に適用されるプロパティは、ネストされたボタンには影響しません。
• DOM の配置: ネストされたボタンは、親から切り離された別個のエンティティとして表示されます。 container.

ネストが禁止されている理由

ボタン要素の W3C 仕様では、インタラクティブ コンテンツの子孫が明示的に禁止されています。インタラクティブなコンテンツには、ボタンなどの要素が含まれます。これは、ボタンにネストされたボタンなどの別のインタラクティブ要素を含めることができないことを意味します。

禁止の影響

ネストされたボタンに対する制限には、いくつかの影響があります。

• 機能の分離: 親ボタンと子ボタンは異なるアクションを実行する必要があります。
• 構造要件: 分離に対応するために HTML 構造を変更する必要があります

代替タグの提案

ボタンをネストする必要がある場合は、親ボタンをより説明的なセマンティック タグに置き換えることができます。オプションの 1 つは詳細タグです。これを使用して、折りたたみ可能なセクションを作成し、コンテンツの表示を切り替えることができます。

例

詳細タグを使用した例を次に示します。

<code class="html"><details>
  <summary>This is the parent element</summary>
  <div>
    <a href="http://www.RedirectMeToAnotherPage.com">Redirect to another page</a>
    <div>
      <button>Do some action</button>
    </div>
  </div>
</details></code>

この例では、詳細タグは、以前は親ボタンによって処理されていた切り替え機能を提供します。 summary 要素はボタンのラベルとして機能し、div 要素はアンカーとネストされたボタンを囲みます。

以上がHTML でボタンを別のボタンの中にネストすることは可能ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。