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

Ответ 1

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

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

Ответ 2

Я думаю, что миф о том, что формы "трудно" хорошо оформлять с хорошим 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>

Ответ 3

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

Ответ 4

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

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

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

Ответ 5

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

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

Ответ 6

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

Ответ 7

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

Ответ 8

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

Ответ 9

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

Ответ 10

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

Ответ 11

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

Ответ 12

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