Плохо ли использовать теги таблиц при отображении форм в HTML?

StackOverflow https://stackoverflow.com/questions/109488

  •  01-07-2019
  •  | 
  •  

Вопрос

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

Это было полезно?

Решение

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

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

Другие советы

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

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

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

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

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

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

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

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

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

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

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

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

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

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top