Использование тегов таблиц при отображении форм в html - это плохой дизайн?

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

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

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

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

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

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

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

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

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

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

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

.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 предоставляет более чем достаточно инструментов для компоновки форм, как вам нравится.

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

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

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

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

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

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