Лучшая практика для макета формы в HTML - таблица или поток?

Question

Что считается наилучшей практикой для размещения форм в html?В частности, где у вас есть набор полей с метками и возможными индикаторами ошибок.Лучшее, что я могу сделать, - это использовать таблицу, но это не очень хорошо работает в CSS-ориентированном макете.Например:

<table>
  <tr>
    <td>Name:</td>
    <td><input type="text" /></td>
    <td style="display: none" id="NameError">*</td>
  </tr>
  <tr>
    <td>Phone:</td>
    <td><input type="text" /></td>
    <td style="display: none" id="PhoneError">*</td>
  </tr>
  <tr>
    <td>Birthday:</td>
    <td><input type="text" /></td>
    <td style="display: none" id="BirthdayError">*</td>
  </tr>
</table>

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

Что будет считаться наилучшей практикой

Answer 1

Я не знаю, как вы, ребята, но я не использую много разметки для макета формы.

Вот разметка для простой формы входа в систему (без разметки макета, т. Е. Div, таблиц и т. Д.)

<form method="post">
    <label>Username</label>
    <input type="text" name="username" />

    <label>Password</label>
    <input type="password" name="password" />

    <input type="submit" name="Log In" />
</form>

Вот CSS для формы

label,input{float:left}
label,input[type="submit"]{clear:left}

Вот результат

Удивительная вещь об этом:

• Отсутствие разметки
• Отсутствие CSS
• Гибкость

Если вы посмотрите на css, элемент label очищается влево (и перемещается влево). Это означает, что метка будет всплывать со своими собратьями input с, однако каждые label будут новой строкой.

Это делает ОЧЕНЬ ЛЕГКИМ добавление дополнительных входов. Четные сообщения проверки после ввода

Возьмите эту форму, например

<form method="post">
    <label>Name</label>
    <input type="text" name="username" />

    <label>Password</label>
    <input type="password" name="password" />

    <label><abbr title="Date of Birth">D.O.B.</abbr></label>
    <input type="text" name="dob_day" />
    <input type="text" name="dob_month" />
    <input type="text" name="dob_year" />

    <input type="submit" name="Log In" />
</form>

С этим CSS

label,input{float:left}
label,input[type="submit"]{clear:left}
input[name^="dob_"]{width:44px;margin:2px}
label{width:70px}

Получаем

Это действительно так просто:)

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

Answer 2

Используйте фактические <label> элементы для меток полей, что также удобно для удобства использования, и стилизуйте их соответствующим образом с помощью CSS.

Например,

<label for="name">Name</label> <input type="text" name="name">

Затем в вашем CSS вы можете стилизовать LABEL элементов с, например, display:block и шириной по вашему желанию и соответствующими значениями clear.

Для тиковых / радиовходов сам вход долженнаходиться внутри элемента <label> - это означает, что для выбора этого входа должна быть доступна сама метка, например:

<label for="mycheckbox"> <input type="checkbox" name="mycheckbox"> Tick me if you dare</label>

Answer 3

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

В вашем примере, я не уверен, что вы получите от использования таблицы поверх CSS.

Answer 4

Рекомендация = НИКОГДА не используйте таблицу для разметки.

Вы можете попробовать CSS-фреймворк, как проект нашей системы сетки 960.

Answer 5

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

Answer 6

Размещение моего ответа на ваш дополнительный вопрос здесь, поскольку он может быть закрыт как дубликат.

Я не уверен, насколько хороша поддержка браузера на этом, протестированов FF4: http://jsfiddle.net/shanethehat/7h3bC/11/

<div id="tableForm">
    <div class="tableRow">
        <div class="tableCell">
            <label for="mycheckbox">  Tick me if you dare</label>
        </div>
        <div class="tableCell">
            <input type="checkbox" name="mycheckbox" id="mycheckbox">
        </div>
    </div>
    <div class="tableRow">
        <div class="tableCell">
            <label for="mytext">  Give me some text test test</label>
        </div>
        <div class="tableCell">
            <input type="text" name="mytext" id="mytext">
        </div>
    </div>
</div>


div#tableForm {
 display:table;   
}
div.tableRow {
  display:table-row;  
}
div.tableCell {
    display:table-cell;   
    width:inherit;
}

Да, я знаю, я только что создал таблицу, используя div.Суть в том, что это хорошо доступно и семантически правильно.

Редактировать: с треском проваливается в IE7, где фиксированная ширина будет единственным способом, но 8 и 9 кажутся нормальными.

Edit2: поменял метку / поля и установил выравнивание по правому краю: http://jsfiddle.net/shanethehat/7h3bC/12/. В этот момент разметка становится немного тяжелее.:first-child будет альтернативой использованию класса left, но за счет IE8.