Por que usar tags de listas de definição (DL, DD, DT) para formulários HTML em vez de tabelas?

Eu encontrei alguns exemplos recentemente que fazem coisas como:

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

para fazer formulários HTML. Por que é que? Qual é a vantagem de usar tabelas?

Acho que depende de você determinar a semântica, mas na minha opinião:

Em vez de uma lista de definições, as propriedades relacionadas ao formulário devem ser usadas.

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

O atributo "for" na tag <label> deve fazer referência ao atributo "id" de uma tag <input>. Observe que quando os rótulos são associados a campos, clicar no rótulo colocará o campo associado em foco.

Você também pode usar tags como <fieldset> para agrupar seções de um formulário e <legend> para legendar um fieldset.

Usei várias vezes com sucesso a técnica descrita neste artigo .

Concordo com sjstrutt que você deve usar tags relacionadas a formulários como labele formem seus formulários, mas o HTML delineado em seu exemplo, muitas vezes, não terá algum código que você possa usar como "ganchos" para estilizar seu formulário com CSS.

Como consequência disso, eu marco meus formulários assim:

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

Essa abordagem me deixa com um conjunto compreensível de tags, que contém ganchos suficientes para estilizar os formulários de várias maneiras diferentes.

Este é um subconjunto da questão de semântica versus formatação. Uma lista de definições diz o que são, uma lista de atributos de chave / valor relacionados, mas não diz como exibi-la. Uma tabela diz mais sobre o layout e como exibir os dados do que os dados dentro dela. Limita a forma como a lista pode ser formatada, especificando excessivamente o formato e subespecificando o que é.

O HTML, historicamente, confundiu semântica com formatação. Tags de fonte e tabelas são os piores exemplos. A mudança para CSS para a formatação e a remoção de muitas das tags de formatação pura do XHTML restaura, de certa forma, a separação do significado da formatação. Ao separar a formatação em CSS, você pode exibir o mesmo HTML de muitas maneiras diferentes, reformatando-o para um navegador amplo, um navegador móvel pequeno, impressão, texto simples, etc ...

Para obter informações, visite o CSS Zen Garden .

Nesse caso, rótulos e entradas são seu significado semântico e são independentes.

Imagine que você tivesse que ler a página da web para uma pessoa cega. Você não diria "Ok, tenho uma lista de definições aqui. O primeiro termo é 'nome'." Em vez disso, você provavelmente diria "Ok, temos um formulário aqui e parece que há um conjunto de campos , a primeira entrada é rotulada como 'nome'."

É por isso que a web semântica é importante. Ele permite que o conteúdo da página se represente com precisão para os humanos e para a tecnologia. Por exemplo, existem muitos plug-ins de navegador que ajudam as pessoas a preencher rapidamente formulários da web com suas informações padrão (nome, número de telefone, etc). Eles raramente funcionam bem se as entradas não tiverem rótulos associados.

Espero que ajude.

Usar dl dt, ddfor forms é apenas outra maneira de estruturar seus formulários, junto com ul li, dive table. Você sempre pode colocar um labelem dt. Dessa forma, você mantém o elemento específico do formulário labelno lugar.

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

As listas de definições têm significado semântico. Eles são para listar termos (<dt>) e suas definições associadas (<dd>). Portanto, neste caso, um <dl> retrata o significado semântico do conteúdo com mais precisão do que uma tabela.

As listas de definições quase nunca são usadas porque semanticamente falando, raramente aparecem na Internet.

No seu caso, o código correto foi postado:

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

Você está criando um formulário com entradas e rótulos para as referidas entradas, não está estabelecendo uma lista de palavras e definindo-as.

Se você estiver fazendo algum tipo de seção de ajuda, as listas de definição seriam apropriadas, por exemplo:

<dl>
    <dt>HTML</dt>
    <dd>Hypertext Markup Language</dd>
    <dt>CSS</dt>
    <dd>Cascade Stylesheets</dd>
    <dt>PHP</dt>
    <dd>Hypertext Preprocessor</dd>
</dl>

Parte da razão para usar <dl> para marcar o formulário é que é muito mais fácil fazer truques de layout CSS sofisticados com um <dl> do que com uma <table>. A outra parte é que ele reflete melhor a semântica do formulário (uma lista de pares rótulo / campo) do que uma tabela.

Ok, o ódio à mesa também faz parte disso.

Às vezes, uma lista de definições simplesmente apresenta as informações da maneira desejada, enquanto uma tabela não. Pessoalmente, provavelmente não usaria uma lista de definições para um formulário, a menos que ela se adeque ao estilo do site.

Praticamente todos os formulários são tabulares. Você já viu um formulário que não seja tabular? As diretrizes que li sugeriram usar a tag de tabela para apresentação tabular e é exatamente para isso que os formulários, calendários e planilhas se destinam. E agora eles estão usando DD e DT em vez de tabelas? Aonde a Web está chegando ?! :)

Os dados da lista de tabelas serão assim:

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

E você pode usar DL, DT, DD Tags List Data como este:

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