View Single Post
Old 04-02-2014, 03:04 PM   #3
gentleone
gentleone's Avatar
 
Join Date: Nov 2009
Location: Rhodes, Greece
Posts: 2,837
Default

Besides what Edbr says, you don't place inputs or selects inside a label. You use them apart. Also inputs don't have closing input tags. So you might want to have something like this:
HTML Code:
<form action="" method="post">
  <div>
    <label for="name">Full Name:</label>
    <input type="text" name="name" />
  </div>
  <div>
    <label for="foundation-type">Foundation Type:</label>
    <select name="foundation-type">
      <option value="Unknown">Unknown</option>
      <option value="Block">Block</option>
      <option value="Stone">Stone</option>
      <option value="Brick">Brick</option>
      <option value="Poured Concrete">Poured Concrete</option>         	
    </select>
  </div>
</form>
Form elements are by default inline elements which means they line-up by default after each other on the same line. This didn't happen with your form, because your HTML was weird.
Div tags are block level elements which means the fill up a whole line, so the next one starts on the next line.
I made a little demo from the above with some basic CSS:

http://cssdeck.com/labs/full/dwc-form-elements-demo

CSS:
Code:
body {
  padding: 10%
}

div {
  margin-bottom: 1em;
}

label, input, select {
  /* changed to 'inline-block' so we can give them a width,
   * but also height, margins and paddings if we need to
   */
  display: inline-block;
  vertical-align: top;
  width: 200px;
  /* following hacks if you must support IE 7 and even IE6 (lol),
   * because 'inline-block' was not supported in those browsers.
   */
  *display: inline;
  *zoom: 1;
}
__________________
www.gentlemedia.nl
gentleone is offline   Reply With Quote