Tuesday, July 21, 2009

Keeping Labels and inputs together.

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.


No comments:

About Me

My photo
Connecticut, United States