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

Вот почему я использую наборы полей

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

Кто-то скажет да, кто-то нет.

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

Если вы ищете "чистоту 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>

Да

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

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

С помощью 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;
}

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

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

Попробуйте наборы полей

Я предпочитаю разбивать поля на логические

<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%; 
}

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

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

I обычно не будет использовать div, но возможно упорядоченный список

<ol>...</ol>

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

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