Зачем использовать теги списков определений (DL, DD, DT) для HTML-форм вместо таблиц?

Недавно я наткнулся на несколько примеров, например:

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

для создания HTML-форм. Почему это? В чем преимущество использования таблиц?

Думаю, семантику решать вам, но на мой взгляд:

Вместо списка определений следует использовать свойства, относящиеся к форме.

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

Атрибут «for» в теге <label> должен ссылаться на атрибут «id» тега <input>. Обратите внимание: когда метки связаны с полями, щелчок по метке переводит связанное поле в фокус.

Вы также можете использовать такие теги, как <fieldset>, чтобы кластеризовать разделы формы вместе, и <legend>, чтобы подписать набор полей.

Я несколько раз успешно использовал технику, описанную в этой статье .

Я согласен с sjstrutt, что вы должны использовать теги, связанные с формой, такие как labelи formв ваших формах, но в HTML, описанном в его примере, часто не хватает кода, который вы можете использовать в качестве «крючков» для стилизации вашей формы с помощью CSS.

Как следствие этого, я размечу свои формы следующим образом:

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

Такой подход оставляет мне понятный набор тегов, который содержит достаточно хуков, чтобы стилизовать формы множеством различных способов.

Это подмножество проблемы семантики и форматирования. В списке определений указано, что это такое, список связанных атрибутов «ключ-значение», но не указано, как его отображать. Таблица говорит больше о компоновке и способах отображения данных, чем данные внутри. Это ограничивает способ форматирования списка, как за счет чрезмерного указания формата, так и за счет неполного указания того, что это такое.

HTML исторически смешивал семантику с форматированием. Теги шрифтов и таблицы - худшие примеры. Переход к CSS для форматирования и удаление множества тегов чистого форматирования из XHTML в некоторой степени восстанавливает разделение смысла и форматирования. Разделив форматирование на CSS, вы можете отображать один и тот же HTML разными способами, переформатируя его для широкого браузера, небольшого мобильного браузера, печати, обычного текста и т. Д.

Для просветления посетите CSS Zen Garden .

В этом случае метки и входные данные являются вашим семантическим значением, и они стоят сами по себе.

Представьте, что вам нужно прочитать эту веб-страницу слепому человеку. Вы бы не сказали: «Хорошо, у меня есть список определений . Первый термин -« имя »». Вместо этого, вы, вероятно , сказать : «Хорошо , мы имеем форму здесь , и это выглядит как есть набор полей , первый вход имеет маркировку „имя“.»

Вот почему важна семантическая сеть. Это позволяет содержимому страницы точно представлять себя как людям, так и технологиям. Например, есть много плагинов для браузера которые помогают людям быстро заполнять веб-формы с их стандартной информацией (имя, номер телефона и т. Д.). Они редко работают хорошо, если входы не имеют связанных меток.

Надеюсь, это поможет.

Использование dl dt, ddдля форм это просто еще один способ структурировать ваши формы, а также ul li, divи table. Вы всегда можете поместить labelв dt. Таким образом вы сохраните элемент формы labelна месте.

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

Списки определений имеют семантическое значение. Они предназначены для перечисления терминов (<dt>) и связанных с ними определений (<dd>). Поэтому в этом случае <dl> отображает семантическое значение контента более точно, чем таблица.

Списки определений почти никогда не используются, потому что семантически они редко появляются в Интернете.

В вашем случае был опубликован правильный код:

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

Вы создаете форму с входами и метками для указанных входов, вы не составляете список слов и не определяете их.

Если вы занимаетесь каким-либо разделом справки, вам подойдут списки определений, например:

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

Отчасти причина использования <dl> для разметки формы состоит в том, что с <dl> гораздо проще выполнять причудливые трюки с макетом CSS, чем с <table>. Во-вторых, он лучше отражает семантику формы (список пар метка / поле), чем таблица.

Хорошо, ненависть к столу тоже часть этого.

Иногда список определений просто представляет информацию желаемым образом, а таблица - нет. Лично я, вероятно, не стал бы использовать список определений для формы, если он не соответствует стилю сайта.

Практически все формы являются табличными. Вы когда-нибудь видели не табличную форму? В рекомендациях, которые я прочитал, предлагается использовать тег table для табличного представления, и именно для этого нужны формы, календари и электронные таблицы. А теперь вместо таблиц используют DD и DT? Куда идет Интернет ?! :)

Данные списка таблиц будут такими:

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

И вы можете использовать данные списка тегов DL, DT, DD следующим образом:

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