Вопрос по layout, forms, html, css – Это плохой дизайн для использования табличных тегов при отображении форм в HTML?

20

Я продолжаю слышать этоdiv теги должны использоваться для макета, а неtable теги. Так это же относится и к макету формы? Я знаю, что макет формы по-прежнему является макетом, но кажется, что создание макетов форм сdivс требует большеhtml а такжеcss, Так что с учетом этого следует использовать формы макетовdiv теги вместо?

«Я продолжаю слышать, что теги div следует использовать для макета». Это распространенное заблуждение. Для разметки следует использовать соответствующую семантическую разметку и CSS, а не DIV. Charles Roper
Div на самом деле не следует использовать для макета. Их следует использовать для разделения контента и, при необходимости, для создания правильной раскладки страницы. CSS должен использоваться для верстки / форматирования, это еще одно распространенное заблуждение. Div просто используются как общие элементы уровня блока. Nicholas Flynt

Ваш Ответ

12   ответов
3

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

Итак, краткий ответ: вы можете делать все, что хотите, но лучшие практики предполагают, что вы используете только табличные теги для представления табличных данных и вместо этого используете любые html-теги, которые лучше всего передают то, что вы пытаетесь представить. Сначала это может быть немного сложнее, но как только вы привыкнете к этой идее, вы удивитесь, почему вы когда-либо делали это по-другому.

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

0

Большинство ответов, которые я здесь видел, кажутся подходящими. Единственное, что я хотел бы добавить, особенно к апатичным или мистеру Мэтту, - это использовать<dl>/<dt>/<dd>, Я считаю, что они представляют список семантически.

<dl>
  <dt><label for="nameTextBox">Name:</label></dt>
  <dd><input value="input value" type="text" name="fieldName" id="fieldName" /></dd>
</dl>

Возможно, вы захотите изменить их, но это семантически говорит о том, что происходит, то есть у вас есть список «терминов». (<dt>) и "определения" (<dd>), причем термин является меткой, а определение - введенными пользователем значениями.

Зависит от того, как ты смотришь на это. Для меня ярлык формы - это термин, который я должен определить. При этом я не вижу много против использования таблицы, так как это действительно табличная информация, это всего лишь одна строка (или столбец) просматриваемых данных.
Если TABLE неверен, потому что форма не является таблицей чисел, то, несомненно, DL ошибочен, поскольку элемент формы не является определением метки элемента формы ....
0

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

13

Я думаю, что это миф о том, что формы "трудны" хорошо оформить с хорошим HTML и CSS. Уровень контроля, который CSS дает вам над макетом, выходит далеко за пределы того, что когда-либо делал неуклюжий макет на основе таблиц. Это не новая идея, так какэта статья Smashing Magazine с далекого прошлого 2006 года показывает.

Я склонен использовать варианты следующей разметки в моих формах. У меня есть общий стиль .form в моем CSS, а затем варианты для ввода текста, флажки, select, textareas и т. Д. И т. Д.

.field label {
  float: left;
  width: 20%;
}

.field.text input {
  width: 75%;
  margin-left: 2%;
  padding: 3px;
}
<div class="field text">
  <label for="fieldName">Field Title</label>
  <input value="input value" type="text" name="fieldName" id="fieldName" />
</div>

Таблицы не являются злом. Они, безусловно, лучший вариант, когда необходимо отобразить табличные данные. Формы ИМХО не являются табличными данными - они являются формами, а CSS предоставляет более чем достаточно инструментов для разметки форм, как вам нравится.

Базовая линия текста не совпадает, что выглядит визуально неловко.
Ссылка указывает на статью 2013 года, а не 2006 года. Это та же статья?
22

Да, это действительно для макетов форм. Имейте в виду, что существуют также такие теги, как FIELDSET и LABEL, которые существуют специально для добавления структуры в форму, поэтому на самом деле речь не идет просто об использовании DIV. Вы должны иметь возможность разметить форму с довольно минимальным HTML, и позволить CSS делать всю остальную работу. Например.:

<fieldset>
    <div>
         <label for="nameTextBox">Name:</label>
         <input id="nameTextBox" type="text" />
    </div>
    ...
</fieldset>
Возможно, вы захотите добавить то, что сделал @Mr Matt - оберните все это в & lt; ol & gt ;. Вместе это должно быть лучшим ответом.
Я не согласен с тем, что форма должна быть завернута в OL, поскольку при заполнении формы порядок не важен. Вы могли бы обернуть поля в UL, но элементы формы уже семантически сгруппированы с использованием FIELDSET.
Я обычно использую UL (или OL, в зависимости от контекста), потому что он предоставляет контейнеры, необходимые для стилизации, и информирует вспомогательные технологии (программы чтения с экрана и т. Д.) О количестве полей или разделов. (Кстати, я взял это из @ jfc3jfciii.com )
@ MatthewRapati, я уверен, что ссылка больше не относится к месту, которое, по вашему мнению, имеет место
4

Если вам просто нужен макет типа захвата столбца строки, вы не должны испытывать чувство вины при использовании таблиц. Я не знаю, как кто-то может назвать это «плохим дизайном». только потому, что это не CSS. Я виделmany плохой дизайн на основе CSS. Мне нравится CSS, и я думаю, что он во многих отношениях превосходит традиционные схемы вложенных таблиц, но делаю то, что работает лучше, а что проще, поддерживать и переходить к более важным и более эффективным решениям.

3

Я использую CSS в основном до тех пор, пока CSS не станет бременем. Например, намного легче создать форму столбца 3+ (3 набора меток + поле формы) с использованием таблицы, чем в CSS. Я не мог заставить макет выглядеть должным образом во всех основных браузерах, использующих чистый CSS, и я тратил слишком много времени на то, чтобы заставить его работать. Поэтому я сказал, прикрути это, и я сделал это легко, используя стол Стол не плохой.

1

Разумеется, для размещения таблицы проще использовать таблицу, чем div, но имейте в виду, что таблица должна что-то значить - она представляет данные на регулярной основе, чтобы пользователь мог ее видеть, а не просто ставит прямоугольники на экран. в заданном порядке. Как правило, я думаю, что макеты форм должны использовать div, чтобы решить, как отображаются элементы формы.

2

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

1

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

С другой стороны, на странице, помеченной как RTL, таблицы должны автоматически переключаться на разметку RTL, тогда как CSS-файлам потребуется «float: left» apos; изменено на «float: rioght» на протяжении.
Если вы правильно настроили свои классы, у вас все равно не должно быть достаточного числа плавающих элементов "плавающего" значения. вокруг вашего CSS, чтобы это имело значение. Тем не менее, это интересное изменение, которое нужно сделать. Язык не является чем-то, что я рассматривал в любых недавних проектах, я придерживаюсь английского языка. ^ _ ^
table можно превратить во что-нибудь еще, используяdisplay собственность, однако. Учитывая многословиеtable разметка, в большинстве случаев они более гибкие, чемol или жеfieldset решение. Я уверен, что рассматриваемое приложение могло быть откорректировано по необходимости исключительно с помощью CSS. (Все это при условии, что браузер не накладывает особых ограничений наtable элементы).
3

Чтобы сделать формы максимально доступными и семантически правильными, я использую следующий формат:

  <fieldset>
  <ol>
    <li>
      <label for='text_field'>Text Field</label>
      <input type='text' name='text_field' id='text_field' />
    </li>
  </ol>
  </fieldset>
Это именно то, что я использую. Откомандирован. Я не считаю более простым оформление таблиц - слишком грязный.
0

Если ваши формы расположены в табличном формате (например, метки слева и поля справа), тогда да, используйте теги таблицы.

Похожие вопросы