Это плохой дизайн для использования табличных тегов при отображении форм в HTML?

Question

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

Answer 1

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

<fieldset>
    <div>
         <label for="nameTextBox">Name:</label>
         <input id="nameTextBox" type="text" />
    </div>
    ...
</fieldset>

Answer 2

Я думаю, что это миф о том, что формы "сложно" красиво оформить с помощью хорошего 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>

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

Answer 3

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

Answer 4

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

Answer 5

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

  <fieldset>
  <ol>
    <li>
      <label for='text_field'>Text Field</label>
      <input type='text' name='text_field' id='text_field' />
    </li>
  </ol>
  </fieldset>

Answer 6

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

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

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

Answer 7

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

Answer 8

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

Answer 9

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

Answer 10

Большинство ответов, которые я здесь видел, кажутся подходящими. Единственное, что я хотел бы добавить, особенно к апатичным или мистеру Мэтту, это использовать <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>), причем термин является метка и определение, являющиеся введенными пользователем значениями.