nested fieldsets

Is it semantically correct to represent sub-sections using fieldsets?

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

= A开发者_运维知识库ddress =
Business Name: ________
      Streeet: ________
         City: ________

How do you deal with nested form sections? Isn't there any better way which would also look okay by default?

Yes, it's semantically correct.

http://dev.w3.org/html5/spec-preview/the-fieldset-element.html

You basically asked two questions:

If it's semantically correct your example and if you can nest fielset elements.

Some answers given here were wrong.

It is syntactically correct, but not semantically correct and you can nest fieldset elements.

It is not semantically correct for the very reason that a form it's not a presentational element. Tables are used to display information in rows and columns where you clearly not doing that. A table is not a prop for making good your form and this is how you used it.

Some suggestions you may follow come next.

Referencing the HTML5 standard, I quote from the proposal document: "Each part of a form is considered a paragraph, and is typically separated from other parts using p elements."

http://dev.w3.org/html5/spec/single-page.htm section 4.10

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

Should answer the nesting question as well.

The question, I guess, arise from the wish of knowing how to section form content. The answer is with fieldsets. The form itself has a meaning, so "yes", it will be a fieldset that will contain all form elements (and it may be disabled).

Coming back to your example, you will have a fieldset for "registration" and sections of the registration grouped by nested fieldsets, as one such section in your example is the "address".

The "better" way of making a form... it depends and I guess it is another question that will remain open to debates until the HTML5 will be ready and implemented correctly in all browsers.

Yes, there is an example of nesting in the specs.

<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>