Maison >interface Web >tutoriel CSS >Puis-je imbriquer un `` à l'intérieur d'un `` dans un formulaire Bootstrap ?

Puis-je imbriquer un `` à l'intérieur d'un `` dans un formulaire Bootstrap ?

Mary-Kate Olsenoriginal: 2024-11-13 08:17:021092parcourir

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

Nest Div Inside Label dans le formulaire Bootstrap

Lors de l'utilisation de Bootstrap pour créer des formulaires horizontaux, le modèle par défaut attribue fréquemment des identifiants à chaque champ de saisie. Pour éviter cela, certains développeurs tentent de placer le champ de saisie et son étiquette dans un champ

élément à l'intérieur de l'élément balise, comme suit :

<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>

Bien que cette approche puisse sembler résoudre le problème, elle est en conflit avec les normes HTML.

Résoudre l'incompatibilité

Selon la spécification HTML, un L'élément ne peut pas contenir un élément

élément. La spécification indique explicitement que le Le modèle de contenu de l'élément autorise uniquement la formulation de contenu, qui inclut des éléments en ligne tels que et , mais pas les éléments de niveau bloc comme

Par conséquent, l'imbrication d'un élément

à l'intérieur du L'élément a un comportement incorrect.

Solution possible

Si vous souhaitez éviter d'utiliser des identifiants pour les champs de saisie tout en conservant une structure HTML appropriée, envisagez d'utiliser l'attribut "pour" sur le <étiquette> élément pour l'associer à des champs de saisie spécifiques :

<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">

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

bootstrap html for while using Attribute default this input issue

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Comment puis-je créer des effets de survol sur des pseudo-éléments CSS ?Article suivant：Comment puis-je créer des effets de survol sur des pseudo-éléments CSS ?

Articles Liés

Voir plus