web-dev-qa-db-fra.com

Pourquoi utiliser des balises de liste de définitions (DL, DT, DD) pour les formulaires HTML au lieu des tableaux?

J'ai rencontré récemment quelques exemples qui font des choses comme:

<dl>
  <dt>Full Name:</dt>
  <dd><input type="text" name="fullname"></dd>
  <dt>Email Address:</dt>
  <dd><input type="text" name="email"></dd>
</dl>

pour faire des formulaires HTML. Pourquoi donc? Quel est l'avantage par rapport aux tables?

htmlcssforms
83
cletus

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

Plutôt qu'une liste de définitions, des propriétés liées au formulaire doivent être utilisées.

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

L'attribut "for" dans la balise <label> doit faire référence à l'attribut "id" d'une balise <input>. Notez que lorsque des étiquettes sont associées à des champs, cliquer sur l'étiquette mettra le champ associé en évidence.

Vous pouvez également utiliser des balises comme <fieldset> pour regrouper des sections d'un formulaire et <legend> pour sous-titrer un fieldset.

103
sjstrutt

J'ai utilisé avec succès la technique décrite dans cet article plusieurs fois.

Je suis d'accord avec sjstrutt que vous devez utiliser des balises liées aux formulaires comme label et form dans vos formulaires, mais le code HTML décrit dans son exemple, manquera souvent de code que vous pouvez utiliser comme "crochets" pour styliser votre formulaire avec CSS.

En conséquence de cela, je marque mes formulaires 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 ensemble compréhensible de balises, qui contient suffisamment de crochets pour styliser les formulaires de différentes manières.

46
Hauge

Il s'agit d'un sous-ensemble de la question de la sémantique vs du formatage. Une liste de définitions indique ce qu'ils sont, une liste d'attributs de clé/valeur associés, mais ne dit pas comment l'afficher. Un tableau en dit plus sur la mise en page et sur la façon d'afficher les données, puis sur la nature des données à l'intérieur. Il limite la façon dont la liste peut être formatée à la fois en sur-spécifiant le format et en sous-spécifiant ce qu'il est.

HTML, historiquement, a mélangé la sémantique avec le formatage. Les balises de police et les tableaux sont les pires exemples. Le passage à CSS pour le formatage et le retrait de beaucoup de balises de formatage pures hors de XHTML rétablit, quelque peu, la séparation du sens et du formatage. En séparant le formatage en CSS, vous pouvez afficher le même HTML de différentes manières en le reformatant pour un large navigateur, un petit navigateur mobile, l'impression, du texte brut, etc.

Pour Enlightenment, visitez le CSS Zen Garden .

21
Schwern

Dans ce cas, les étiquettes et les entrées sont votre sens sémantique et elles sont autonomes.

Imaginez que vous deviez lire la page Web, à vide, à 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 diriez probablement: "D'accord, nous avons un formulaire ici et il semble qu'il y ait un ensemble de champs, le premier entrée est étiqueté 'nom'. "

C'est pourquoi le web sémantique est important. Il permet au contenu de la page de se représenter avec précision auprès des humains et de la technologie. Par exemple, il y a beaucoupnavigateurplugins qui aident les gens à remplir rapidement les formulaires Web avec leurs informations standard (nom, numéro de téléphone, etc.). Celles-ci fonctionnent rarement bien si les entrées n'ont pas d'étiquettes associées.

J'espère que ça t'as aidé.

14
Jeremy Ricketts

Les listes de définitions ont une signification sémantique. Ils servent à répertorier les termes (<dt>) et leurs définitions associées (<dd>). Par conséquent, dans ce cas, un <dl> décrit la signification sémantique du contenu plus précisément qu'une table.

13
Bret

L'utilisation de dldt, dd pour les formulaires n'est qu'une autre façon de structurer vos formulaires, avec ulli, div et table. Vous pouvez toujours mettre un label dans dt. De cette façon, vous gardez l'élément spécifique au formulaire label en place.

<form action="/login" method="post"> 
    <dl>
        <dt><label for="login">Login</label></dt>
        <dd><input type="text" name="login" id="login"/></dd>
        <dt><label for="password">Password</label></dt>
        <dd><input type="password" name="password" id="password"/></dd>  
        <dd><input type="submit" value="Add"/></dd>
    </dl>
</form>
12
ak.

Les listes de définitions ne sont presque jamais utilisées car sémantiquement, elles apparaissent rarement sur Internet.

Dans votre cas, le code correct a été affiché:

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

Vous créez un formulaire avec des entrées et des étiquettes pour ces entrées, vous ne définissez pas une liste de mots et ne les définissez pas.

Si vous faites une sorte de section d'aide, des listes de définitions seraient appropriées, par exemple:

<dl>
    <dt>HTML</dt>
    <dd>Hypertext Markup Language</dd>
    <dt>CSS</dt>
    <dd>Cascade Stylesheets</dd>
    <dt>PHP</dt>
    <dd>Hypertext Preprocessor</dd>
</dl>
4
Andrew G. Johnson

Une partie de la raison d'utiliser <dl> pour baliser le formulaire est qu'il est beaucoup plus facile de faire des astuces de mise en page CSS fantaisie avec un <dl> qu'avec un <table>. L'autre partie est qu'elle reflète mieux la sémantique du formulaire (une liste de paires étiquette/champ) qu'une table.

Ok, la haine de table en fait aussi partie.

3
Theran

Pratiquement toutes les formes sont tabulaires. Avez-vous déjà vu un formulaire qui n'est pas tabulaire? Les directives que j'ai lues suggèrent d'utiliser la balise table pour une présentation tabulaire et c'est exactement à cela que servent les formulaires, les calendriers et les feuilles de calcul. Et maintenant, ils utilisent DD et DT au lieu de tables? Où va le Web?! :)

2
netrox

Parfois, une liste de définitions présente simplement les informations de la manière souhaitée, contrairement à un tableau. Personnellement, je n'utiliserais probablement pas de liste de définitions pour un formulaire, à moins qu'elle ne convienne au style du site.

1
staticsan

Les données de liste de table seront comme ceci:

<table>
<tr>
        <td class="title">Name: </td>
        <td class="text">John Don</td>
</tr>
<tr>
        <td class="title">Age: </td>
        <td class="text">23</td>
</tr>
<tr>
        <td class="title">Gender: </td>
        <td class="text">Male</td>
</tr>
<tr>
        <td class="title">Day of Birth:</td>
        <td class="text">12th May 1986</td>
</tr>
</table>

Et vous pouvez utiliser les données de liste de balises DL, DT, DD comme ceci:

<dl>
        <dt>Name: </dt>
        <dd>John Don</dd>
        
        <dt>Age: </dt>
        <dd>23</dd>
        
        <dt>Gender: </dt>
        <dd>Male</dd>
        
        <dt>Day of Birth:</dt>
        <dd>12th May 1986</dd>
</dl>
0
Kesar Sisodiya