ブートストラップフォームの「」の中に「」をネストできますか?-CSSチュートリアル-php.cn

ホームページ

ウェブフロントエンド

CSSチュートリアル

ブートストラップフォームの「」の中に「」をネストできますか?

Mary-Kate Olsen

Nov 13, 2024 am 08:17 AM

Can I Nest a `` Inside a `` in a Bootstrap Form?

Bootstrap フォームのラベル内に Div をネスト

Bootstrap を使用して水平フォームを作成する場合、デフォルトのテンプレートは各入力フィールドに ID を頻繁に割り当てます。これを回避するために、一部の開発者は、入力フィールドとそのラベルをブロックレベルの

内で囲もうとします。内の要素

<form class="form-horizontal" role="form">
  <div class="form-group">
    <label class="block">
      <span class="col-lg-2 control-label">Email</span>
      <div class="col-lg-10">
        <input type="email" class="form-control">
      </div>
    </label>
  </div>
</form>

ログイン後にコピー

このアプローチは問題を解決しているように見えますが、HTML 標準と競合します。

非互換性への対処

HTML 仕様によれば、要素に

を含めることはできません。要素。仕様では、が「」であると明示的に述べられています。要素のコンテンツモデルでは、などのインライン要素を含むフレージングコンテンツのみが許可されます。

したがって、ブロックレベルの

をネストすると、

とは含まれますが、

のようなブロックレベルの要素は含まれません。インライン内要素の動作が正しくありません。

考えられる解決策

<form class="form-horizontal" role="form">
  <div class="form-group">
    <label for="inputEmail1" class="col-lg-2 control-label">Email</label>
    <div class="col-lg-10">
      <input type="email" class="form-control">

ログイン後にコピー

適切な HTML 構造を維持しながら入力フィールドに ID を使用することを避けたい場合は、要素の "for" 属性の使用を検討してください。特定の入力フィールドに関連付ける要素:

以上がブートストラップフォームの「」の中に「」をネストできますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。