Puis-je imbriquer un `` à l'intérieur d'un `` dans un formulaire Bootstrap ?-tutoriel CSS-php.cn

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>

Copier après la connexion

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

Copier après la connexion

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!

source：php.cn

Article précédent：Comment puis-je créer des effets de survol sur des pseudo-éléments CSS ? Article suivant：Les attributs de données CSS peuvent-ils restituer les caractères de nouvelle ligne avec des pseudo-éléments ?

Déclaration de ce site Web

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

Derniers articles par auteur

Derniers numéros

function_exists() ne peut pas déterminer la fonction personnalisée Function test () {return true;} if (function_exists ('test')) {echo "le test est une ...

Depuis 2024-04-29 11:01:01

2460

Comment afficher la version mobile de Google Chrome Bonjour professeur, comment puis-je changer Google Chrome en version mobile ?

Depuis 2024-04-23 00:22:19

2603

La fenêtre enfant exploite la fenêtre parent, mais la sortie ne répond pas. Les deux premières phrases sont exécutables, mais la dernière ne peut pas être implémentée...

Depuis 2024-04-19 15:37:47

2195

Il n'y a aucune sortie dans la fenêtre parent document.onclick = function(){ window.opener.document.write('Je suis la sortie de la fenêt...