When you are placing multiple inputs (and labels) in a <form> tag organizing the layout can sometimes get tricky. There are times when <fieldsets> seem appropiate, that's easy then however there will be times to have more control even with in a <fieldset>. Placing a <div> around each <label> and <input> works. Then use ID or CLASS attributes to control your layout.
<fieldset>
<legend>Set of inputs</legend>
<div id="item01">
<label for="item01input">item01</label>
<input id="item01input">
</div>
<div id="item02">
<label for="item02input">item02</label>
<input id="item02input">
</div>
</fieldset>
That's great! However I think we should make it more semantic. <div> tags are technically block elements. Lets change those <div> tags to <p> tags.
<fieldset>
<legend>Set of inputs</legend>
<p id="item01">
<label for="item01input">item01</label>
<input id="item01input">
</p>
<p id="item02">
<label for="item02input">item02</label>
<input id="item02input">
</p>
</fieldset>
Now I'm happy! If you have other solutions and comments please feel free to speak up.
Posts
