Каков наиболее правильный способ группировки элементов формы?

Question

Итак, я видел много уроков и до сих пор не нашел единого ответа на этот вопрос: как правильно / лучше всего разметить форму, где у меня есть логическая группа элементов, состоящая из метки, элемента управления (введите или выберите) и предыдущее значение, т. е. одно поле?

Я бы хотел, чтобы макет CSS размещал каждую группу на новой горизонтальной линии.

Я видел <div> оболочки, <br> теги, <ul>, <fieldset>, <tr> и вообще ничего (т. Е. Без тега разметки, только CSS), используемого для этой цели.

Таблицы, помимо плохой репутации для выполнения макета формы, не очень гибки, когда формат строки должен меняться. И br кажется ужасной идеей (хотя я видел ее в уроках). Я уже использую fieldset для создания логических групп полей в форме, но я всегда могу использовать два разных класса, если это более семантически правильно, чем div. Подход ul кажется странным ... внешний fieldset группирует несколько полей, зачем мне ul, который также группирует их?

Мне очень нравится простота разметки в этом дизайне: http://woork.blogspot.com/2008/06/clean-and-pure-css-form-design.html. Но у меня возникают трудности с адаптацией CSS для обработки более сложных полей, например. выбор и ввод, которые логически связаны друг с другом.

Так что в этом примере, что (если вообще нужно) обернуть вокруг поля № 1 и поля № 2 ниже?

<form .....>
  <fieldset> <legend>Group 1</legend>

    <!-- 'field #1' -->
    <label for="newName">Name</label>
    <input type="text" id="newName">
    <!-- oldVal Filled in with Javascript or server-side script -->
    <span class="oldVal" id="oldName">Old Name</span>

    <!-- 'field #2' -->
    <label for="newFood">Favorite Food</label>
    <select id="newFood">
      <option value="pizza">Pizza</option>
      <option value="tacos">Tacos</option>
      <option value="other">Other</option>
    </select>
    <input type="text" id="newFoodOther"> <!-- type here when 'other' is selected -->
    <span class="oldVal" id="oldFood">Pizza</span>

  </fieldset>
  <fieldset> <legend> Group 2</legend>
    <!-- more fields here -->
  </fieldset>
</form>

Что проще всего использовать для управления макетом формы, и что является наиболее семантически правильным? И достаточно ли мне повезло, чтобы они были одним и тем же?

Answer 1

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

Для гибкости я обычно использую структуру следующим образом:

<form>
    <fieldset>
        <legend></legend> <!-- optional -->
        <label>
            <span>Label Text</span>
            <input type="..." />
        </label>
        <!-- repeat -->
        <input type="submit" ... />
    </fieldset>
</form>

В качестве альтернативы стилю с CSS я мог бы использовать несколько меток:

<form>
    <fieldset>
        <label for="some-id-0">Label Text</label>
        <label class="text-label">
            <input type="text" id="some-id-0" />
        </label>
        <label for="some-id-1">Label Text</label>
        <label class="password-label">
            <input type="password" id="some-id-1" />
        </label>
    </fieldset>
</form>

Но тогда я мог бы выделить это в список:

<form>
    <fieldset>
        <dl>
            <dt>
                <label for="some-id-0">Label Text</label>
            </dt>
            <dd>
                <label class="text-label">
                    <input type="text" id="some-id-0" />
                </label>
            </dd>
            <dt>
                <label for="some-id-1">Label Text</label>
            </dt>
            <dd>
                <label class="password-label">
                    <input type="password" id="some-id-1" />
                </label>
            </dd>
        </dl>
    </fieldset>
</form>

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

<form>
    <p>
        Hi, my
        <label for="fullName">name</label>
        is
        <input type="text" id="fullName" name="fullName" placeholder="Full name" />
        and I would like to request a copy of
        <select id="publication" name="publication">
            <option>Super Awesome Newsletter</option>
            <option>Even more awesome-er newsletter</option>
            <option>Lorem Ipsum weekly</option>
        </select>
        please send it to
        <input type="temail" id="email" name="email" placeholder="email@example.com" />
    </p>
    <input type="submit" value="Thank you!" />
</form>

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

Answer 2

«Семантически правильный» относится к HTML, а не к CSS, и я бы сказал, что вы уже рассмотрели это.

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

label {
    display: block;
    float: left;
    clear: left;
    width: 150px;
}
input, select {
    display: block;
    float: left;
    width: 150px;
}

http://jsfiddle.net/mblase75/ECmwH/

Это оставляет проблему, где отображатьваши поля "oldVal", но я думаю, что это вопрос мнения.