вложенные fieldsets

EDIT: Downvotes заставил меня переформулировать вопрос.

семантически правильно ли представлять подразделы с помощью наборов полей?

= Basic Info =
   First Name: ________
    Last Name: ________

= Address =
Business Name: ________
      Streeet: ________
         City: ________

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

3 ответов


Да, это семантически правильно.


вы в основном задали два вопроса:

Если это семантически корректным ваш пример и если можно вложить fielset элементов.

некоторые ответы здесь ошибались.

это синтаксически правильно, но не семантически правильно, и вы можете вложить элементы fieldset.

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

некоторые предложения, вы можете следовать дальше.

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

http://dev.w3.org/html5/spec/single-page.htm раздел 4.10

http://dev.w3.org/html5/spec-LC/forms.html

должен также ответить на вопрос о вложенности.

вопрос, я думаю, возникает из желания знать, как разделять содержание формы. Ответ с fieldsets. Сама форма имеет значение, поэтому "да", это будет набор полей, который будет содержать все элементы формы (и он может быть отключен).

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

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


Да, есть пример вложенности в спецификациях.

<fieldset name="clubfields" disabled>
 <legend> <label>
  <input type=checkbox name=club onchange="form.clubfields.disabled = !checked">
  Use Club Card
 </label> </legend>
 <p><label>Name on card: <input name=clubname required></label></p>
 <fieldset name="numfields">
  <legend> <label>
   <input type=radio checked name=clubtype onchange="form.numfields.disabled = !checked">
   My card has numbers on it
  </label> </legend>
  <p><label>Card number: <input name=clubnum required pattern="[-0-9]+"></label></p>
 </fieldset>
 <fieldset name="letfields" disabled>
  <legend> <label>
   <input type=radio name=clubtype onchange="form.letfields.disabled = !checked">
   My card has letters on it
  </label> </legend>
  <p><label>Card code: <input name=clublet required pattern="[A-Za-z]+"></label></p>
 </fieldset>
</fieldset>