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

Question

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

<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-форм. Это почему? В чем преимущество использования таблиц?

Answer 1

Полагаю, вам нужно определить семантику, но по моему мнению:

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

<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» в теге должен ссылаться на атрибут «id» тега . Обратите внимание, что когда метки связаны с полями, при щелчке по метке соответствующее поле будет выделено.

Вы также можете использовать теги, такие как

для кластеризации разделов формы вместе и

для заголовка набора полей.

Answer 2

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

Я согласен с 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>

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

Answer 3

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

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

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

Answer 4

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

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

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

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

Answer 5

Списки определений имеют семантическое значение. Они предназначены для перечисления терминов (

) и связанных с ними определений (). Поэтому в этом случае

Answer 6

Использование 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>

Answer 7

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

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

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

Answer 8

Одной из причин использования

Answer 9

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

Answer 10

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