Ответ 1

Оба правильные.

Я предпочитаю использовать некоторые div/li, так как это позволяет мне создавать несколько разных макетов, но tables для forms не смущается.

На самом деле, по умолчанию Django предоставляет формы, сформированные таблицами.

Ответ 2

Попытки полей

Я предпочитаю разбивать поля на логический <fieldset> на один <legend> каждый, потому что:

• Код менее загроможден.
• Форматирование по умолчанию является удобным для пользователя (мне особенно нравится, как отображается легенда)
• Легко стилизовать с помощью CSS

Вот пример кода. Обратите внимание, что атрибут label < for позволяет щелкнуть эту метку, чтобы переместить фокус на указанный вход (он соответствует атрибуту id).

<form>
  <fieldset>
    <legend>Wombat Statistics</legend>
    <ol>
      <li>
        <label for="punchstrength">Punch Strength</label>
        <input id="punchstrength" name="punchstrength" />
      </li>
      <li>
        <label for="beverage">Favorite Beverage</label>
        <input id="beverage" name="beverage" />
      </li>
    </ol>
  </fieldset>
  <fieldset>
    <legend>Questions That Are Too Personal</legend>
    <ol>
      <li>
        <label for="creditcard">What is your credit card number?</label>
        <input id="creditcard" name="creditcard" />
      </li>
      <li>
        <label for="gullibility">Did you actually fill that in?</label>
        <input id="gullibility" name="gullibility" />
      </li>
    </ol>
  </fieldset>
</form>

Для базового макета вы можете использовать что-то вроде:

label, input, textarea, select { 
  display: inline-block; vertical-align: top; width: 30%; 
}

См. в этой статье для более углубленного изучения.

Ответ 3

Форма не является табличными данными.

Так легко выложить элементы формы с помощью CSS, я не вижу никакого значения, которое стоит обфускации разметки таблицами. Лично я считаю, что создание форм с помощью CSS проще, чем использование таблиц в этот момент. Например:

HTML:

<fieldset>
  <label for="FirstName">First Name</label>
  <input type="text" id="FirstName" />

  <label for="LastName">Last Name</label>
  <input type="text" id="LastName" />

  <label for="Age">Age:</label>
  <select id="Age">
    <option>18-24</option>
    <option>25-50</option>
    <option>51-old</option>
  </select>
</fieldset>

CSS

fieldset {
  overflow: hidden;
  width: 400px;
}

label {
  clear: both;
  float: right;
  padding-right: 10px;
  width: 100px;
}

input, select {
  float: left;
}

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

Ответ 4

Вы можете использовать таблицы. Просто как это.

Ответ 5

Да

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

Ответ 6

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

Ответ 7

Эрик, я согласен с вами, что данные формы являются табличными данными и семантически могут жить внутри таблицы.

Это метод, который я использую для простых экранов ввода данных.

Я бы вообще не использовал divs, но, возможно, упорядоченный список

<ol>...</ol>

так как форма также является упорядоченным списком элементов. Тем не менее, я считаю, что этот метод очень сложный.

Вероятно, вы получите ответ 50/50 в ответах....

Ответ 8

Некоторые скажут "да", некоторые нет.

Здесь вы можете решить: если он действительно содержит табличные данные, то он должен, по крайней мере, согласно WCAG, иметь атрибут summary. Атрибут summary должен описывать назначение и структуру таблицы в интересах пользователей программы чтения с экрана. Можете ли вы написать такой атрибут? Если да, тогда вы должны сделать это и включить его на свой стол. Если вы не можете, то это, вероятно, не очень таблица, и вы должны искать другой способ выложить свою форму.

Ответ 9

Если вы ищете "чистоту css", вы должны использовать что-то вроде этого:

<form action="http://localhost/Zoleris/" method="post" accept-charset="utf-8">
    <ul class="form">
      <li>
        <label for="username">Username</label>
        <input type="text" id="username" name="username">
      </li>

      <li>
        <label for="password">Password</label>
        <input type="password" id="password" name="password">
      </li>

      <li>
        <input type="checkbox" id="remember_me" name="remember_me" >
        <label class="checkbox" for="remember_me">Remember my username</label>
      </li>

      <li>
        <a href="forgot.php">Forgot your password?</a>
      </li>

      <li>
        <button type="submit" id="btnLogin" name="btnLogin" class="button positive" style="float:right"><img src="tick.png">Login</button>
        <button type="submit" id="btnRegister" name="btnRegister" style="float: left"><img src="cross.png">I need an account!</button>
      </li>
    </ul>
</form>

Ответ 10

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

Ответ 11

Важно использовать метки с атрибутом "для" для чтения с экрана (для удобства использования).

Вот почему я использую fieldsets

Ответ 12

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

<fieldset>
  <dl>
    <dt><label for="definition">Definition:</label></dt>
    <dd><input type="text" name="definition" /></dd>
  </dl>
</fieldset>

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

Сказав это, таблицы не кажутся мне неуместными для редактируемых табличных данных.

Ответ 13

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

Кроме того, программа чтения с экрана будет анонсировать эту форму с помощью "Строка 1, столбец 1, метка," Имя ", столбец 2, ввод," Имя "..." вместо простого "Enter", "Имя" "..."

Моя рекомендация - использовать DIV, FIELDSET или ULs/LI. Это оставляет презентацию в руках CSS, именно там, где она принадлежит.