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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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