Семантика структуры HTML для страниц данных

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

  •  11-09-2019
  •  | 
  •  

Вопрос

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

Например, каркас платформы ASP.NET MVC создает набор полей с легендой вверху и всеми полями в p (метка, а затем набор ввода/редактора).

Как вы думаете, какую структуру лучше всего использовать?

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

Спасибо,
Кирон

РЕДАКТИРОВАТЬ: Друзья рекомендовали использовать dl, dt и dds... есть ли у кого-нибудь какие-нибудь мысли по этому поводу?

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

Решение

Я использую структуру, очень похожую на структуру, созданную с помощью каркасов ASP.NET, за исключением того, что я использую div вместо ps:

<form>
    <fieldset>
        <legend>Legendary Fieldset</legend>
        <div>
            <label for="textBox">Text Input</label>
            <input name="textBox" id="textBox" />
        </div>
        <div>
            <label for="selectBox">Select box</label>
            <select name="selectBox" id="selectBox">
                <option>1</option>
                <option>2</option>
            </select>
        </div>
    </fieldset>
    <!-- more fieldsets if required -->
</form>

Я использую элементы div, потому что считаю, что это более семантически правильно, чем элементы p, поскольку они предназначены для абзацев текста.

Когда дело доходит до стилизации, это также универсальная структура, потому что вы можете, например, сделать набор полей шириной 500 пикселей, а div набора полей шириной 250 пикселей и плавающим, таким образом добившись бок о бок.Или вы можете иметь ту же ширину для набора полей, что и для div набора полей.ИЛИ вы могли бы иметь набор полей и набор полей одинаковой ширины, а затем прикрепить класс к некоторым элементам div (скажем, «половине»), которые имеют половину ширины и плавают.Возможности действительно безграничны.

В любом случае, это именно то, что я использую в повседневных делах — хотя он универсален, он может не соответствовать всем требованиям.

РЕДАКТИРОВАТЬ Что касается списков определений, то они представляют собой специализированные элементы, которые семантически не следует использовать для компоновки формы.

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

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

<form>
  <input>
  <input>
  <input>
</form>

И тогда, когда вам нужны группировки

<form>
  <div>
    <input>
    <input>
  </div>
  <input>
</form>

А затем сделайте всю свою презентацию в CSS.Лучший способ проверить доступность — отключить все таблицы стилей и посмотреть, имеет ли сайт смысл.

Формы являются элементами уровня блока, поэтому они семантически корректны для размещения других элементов.

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