Multiple fieldset in a form tag

Question

I Wanted to know if a <form> can contain many <fieldset> in it? Or is it better to use <div> instead? In my case, I want to design a sophisticated responsive designed <form> with many different kinds of <input>.' And if so, do theshould be in his own` alone?

Better like this :

        <form action="#" method="POST">

          <fieldset id="input1-wrapper">
            <h3>Input 1</h3>
            <input type="texte" name="input1" placeholder="input1">
          </fieldset>

          <fieldset id="input2-wrapper">
            <h3>Input 2</h3>
            <input type="texte" name="input2" placeholder="input2">
          </fieldset>

        </form>

Or like this :

        <form action="#" method="POST">

          <div id="input1-wrapper">
            <h3>Input 1</h3>
            <input type="texte" name="input1" placeholder="input1">
          </div>

          <div id="input2-wrapper">
            <h3>Input 2</h3>
            <input type="texte" name="input2" placeholder="input2">
          </div>

        </form>

Answer 1

Multiple Fieldsets in a form are allowed. Example: Data entry fields in one fieldset and action buttons ('submit,' 'cancel' etc.) in a separate fieldset.

Fieldset should always have a legend tag according to the standards.

Actually, Fieldsets are just another 'display' block level element. i.e. think of it as a 'fancy div'. It can be used anywhere a 'block level element' can. It has no 'special knowledge' of what is inside it. As the 'legend' is a separate element that it can be styled individually with CSS.

being pedantic ;-/

www.whatwg.org/specs/web-apps/current-work/multipage/forms

Extracted text: ' ..., one can use the fieldset element. The title of such a group of controls is given by the first element in the fieldset, which has to be a legend element.'.

It looks a lot nicer that a 'div' with headings, in my opinion. To the point that I use it outside of forms for grouping things. Try getting that text in the border with CSS.

 <form action="#" method="POST">
    <fieldset id="input1-wrapper">
       <legend>Input 1</legend>
       <input type="text" name="input1" placeholder="input1">
    </fieldset>

    <fieldset id="input2-wrapper">
       <legend>Input 2</legend>
       <input type="text" name="input2" placeholder="input2">
    </fieldset>

 </form>