Pourquoi utiliser des balises de définition listes (DL, DD, DT) pour les formulaires HTML au lieu de tables ?

Question

Je suis récemment tombé sur quelques exemples que faire des choses comme :

pour faire des formulaires HTML. Pourquoi ? Quel est l’avantage par rapport à l’aide de tables ?

Answer 1

Je suppose que c'est à vous de déterminer la sémantique, mais à mon avis:

Plutôt qu'une définition de la liste, sous forme liée à des propriétés doit être utilisé.

<form>
  <label for="fullname">Full Name:</label>
  <input type="text" name="fullname" id="fullname">
  <label for="email">Email Address:</label>
  <input type="text" name="email" id="email">
</form>

Le "pour" de l'attribut dans la balise <label> devrait faire référence à la "id" attribut d'une balise <input>. Notez que lorsque les étiquettes sont associées à des champs, en cliquant sur le label va mettre le champ associé au point.

Vous pouvez également utiliser les balises <fieldset> cluster sections d'un formulaire et <legend> pour ajouter une légende à une fieldset.

Answer 2

J'ai réussi à utilisé la technique décrite dans cet article plusieurs fois.

Je suis d'accord avec sjstrutt que vous devez utiliser le formulaire reated les balises comme l' label et form en vous formes, mais le code HTML indiqué dans son exemple, souvent manque un peu de code que vous pouvez utiliser comme des "crochets" pour le style de votre forme avec les CSS.

Comme un consequense de ce que j'ai balisage mes formes comme ceci:

<form name="LoginForm" action="thispage">
    <fieldset>
        <legend>Form header</legend>
        <ul>
            <li>
                <label for="UserName">Username: </label>
                <input id="UserName" name="UserName" type="text" />
            </li>
            <li>
                <label for="Password">Password: </label>
                <input id="Password" name="Password" type="text" />
            </li>
        </ul>
    </fieldset>
    <fieldset class="buttons">
        <input class="submit" type="submit" value="Login" />
    </fieldset>
</form>

Cette approche me laisse avec un langage compréhensible ensemble de balises, qui contient assez de crochets de style de la forme dans un grand nombre de façons différentes.

Answer 3

C'est un sous-ensemble de la question de sémantique vs la mise en forme. Une liste de définitions dit ce qu'ils sont, une liste de clé/valeur des attributs, mais ne dit pas comment l'afficher. Une table en dit plus sur la disposition et la façon d'afficher les données, puis ce que les données à l'intérieur. Il limite la façon dont la liste peut être mise en forme à la fois par overspecifying le format et par underspecifying ce que c'est.

HTML, historiquement, a mélangé de la sémantique avec la mise en forme. La police des tags et des tables les pires exemples. Le déplacer vers le CSS pour la mise en forme et le décapage d'un lot de la pure balises de mise en forme de XHTML restaure, un peu, la séparation des sens de la mise en forme. Par la séparation de mise en forme en CSS, vous pouvez afficher le même code HTML de beaucoup de manières différentes de le reformater pour un grand navigateur, un petit navigateur mobile, impression, texte, etc...

Pour les lumières, visitez le CSS Zen Garden.

Answer 4

Dans ce cas, les étiquettes et les entrées sont votre sens sémantique et ils se tiennent debout sur leur propre.

Imaginez que vous avez eu à lire la page web, de charge, pour une personne aveugle. Vous ne diriez pas "d'Accord, j'ai une liste de définitions ici. Le premier terme est "nom"." Au lieu de cela, vous auriez probablement dire "Ok, nous avons un formulaire ici et il semble que la il y a un ensemble de champs, la première entrée est marqué "nom"."

C'est pourquoi le web sémantique est importante. Il permet d'afficher le contenu de la page, de se représenter avec précision à la fois les humains et la technologie. Par exemple, il y a beaucoup de navigateur plugins qui aident les gens à remplir rapidement des formulaires web avec leurs informations (nom, numéro de téléphone, etc). Elles sont rarement bien fonctionner si les entrées n'ont pas de labels associés.

Espérons que cela aide.

Answer 5

Listes de définitions ont le sens sémantique. Ils sont pour la liste des termes () et leurs définitions connexes (). C’est pourquoi dans ce cas un dépeint la signification sémantique du contenu avec une précision supérieure une table.