Семантика структуры HTML для страниц данных - PullRequest
Новая
       6

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

4 голосов
/ 19 сентября 2009

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

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

Как вы думаете, какая самая универсальная структура для использования?

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

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

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

Ответы [ 2 ]

5 голосов
/ 20 сентября 2009

Я использую структуру, очень схожую со структурой, созданной скаффолдингом 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 элементов, так как они предназначены для абзацев текста.

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

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

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

0 голосов
/ 20 сентября 2009

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

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

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

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

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

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

...