la case à cocher et son étiquette au même niveau

Question

Lorsque je crée une case à cocher avec ASP.NET, son étiquette se trouve toujours au niveau inférieur de la case à cocher, mais je veux qu'elles soient au même niveau pour que ce soit plus joli. J'y suis parvenu comme suit ;

<table>
    <tr>
        <td>
            <input type="checkbox" id="chxAgreed" name="chxAgreed" />
        </td>
        <td>
            <label for="chxAgreed">Agreed</label>
        </td>
    </tr>
</table>

mais je ne veux pas utiliser autant de tableaux dans mes balises. Comment puis-je faire la même chose sans tableau ?

Answer 1

Si la question porte uniquement sur le balisage (et non sur l'ASP, que je ne connais pas), c'est toujours une bonne façon de faire des cases à cocher :

<label for="chxAgreed">
    <input type="checkbox" id="chxAgreed" name="chxAgreed" />
    Agreed
</label>

Avantages de cette structure par rapport aux autres structures de balisage :

• L'alignement est facile, pratiquement automatique
• La case à cocher et l'étiquette seront une seule zone cliquable pour cocher/décocher la saisie, plutôt que deux zones distinctes.
• Vous pouvez en fait omettre le for de l'étiquette, et l'attribut id de l'entrée si on le souhaite, il sera sous-entendu que l'étiquette correspond à l'entrée qu'elle contient.
• Vous pouvez faire de belles choses avec CSS en utilisant ce balisage.

Le seul inconvénient auquel je pense est que si vous voulez donner un style au texte de l'étiquette (et non à l'étiquette entière), vous devrez envelopper le texte dans une balise <span> .