Зачем использовать теги списков определений (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-форм. Это почему? В чем преимущество использования таблиц?
11 ответов
Я думаю, что это зависит от вас, чтобы определить семантику, но на мой взгляд:
Вместо списка определений следует использовать связанные с формой свойства.
<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" в теге
Вы также можете использовать теги, такие как
Я успешно использовал технику, описанную в этой статье несколько раз.
Я согласен с 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.
С помощью dldt,dd для форм это просто еще один способ структурировать ваши формы, наряду с ulli, 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>
В этом случае метки и входные данные - это ваше семантическое значение, и они стоят сами по себе.
Представьте, что вы должны были прочитать веб-страницу, загрузить, для слепого человека. Вы не сказали бы: "Хорошо, у меня есть список определений здесь. Первый термин -" имя "". Вместо этого вы, вероятно, сказали бы: "Хорошо, у нас здесь есть форма, и похоже, что есть набор полей, первый вход помечен как " имя "".
Вот почему семантическая сеть важна. Это позволяет контенту страницы точно представлять себя как людям, так и технологиям. Например, существует множество плагинов для браузера, которые помогают людям быстро заполнять веб-формы своей стандартной информацией (имя, номер телефона и т. Д.). Они редко работают хорошо, если входные данные не имеют связанных меток.
Надеюсь, это поможет.
Списки определений имеют семантическое значение. Они предназначены для перечисления терминов (
- отображает семантическое значение контента более точно, чем таблица.
Списки определений почти никогда не используются, потому что с семантической точки зрения они редко появляются в Интернете.
В вашем случае правильный код был размещен:
<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>
Одной из причин использования
- для разметки формы является то, что намного проще делать причудливые трюки с макетом CSS с помощью
- , чем