CSS Form Design Help

I have always struggled designing css forms, I can never get the input and label side by side. Do you have any words of wisdom that may help me.

I usually use a 10px margin on the bottom but cannot get them aligned

My Common form:

Name:
Email:
Phone:
Message:
开发者_JAVA技巧text area

I know I'm going to get backlash for this from people who think that the only possible way to do things is with pure CSS, divs, spans, etc. However, your form is tabular. You have a column of titles, and a column of input fields. In this case, because of the tabular layout, a valid solution could be tables.....GASP!

Tables are not valid for page layout...let me repeat that again, tables are not valid for layout. However, you've got an element of a page, you're not doing a full page layout. You can easily use <th> elements to style the labels for the inputs, which is quick and simple. Overall, the table (tabular) solution would be less verbose than many of the CSS layouts given, which from a pure HTML standpoint is a win. It will continue to work and layout properly even when the server gets backed up and can't load the external CSS document. To all those who believe that tables are never ok, let me remind you that this solution will validate with W3 100% of the time provided your table is properly structured. And it's far more cross browser compatible, with no box-model issues in the "crabby" legacy browers. Certainly continue to progressively enhance with CSS as is best practice.

Theory and practice, especially in the web world, are two entirely different things. In theory, all of us should be producing 100% HTML5/CSS3/Semantic/SEO Optimized...blah blah blah. In practice, theory only goes as far as the first customer complaint. Progressive enhancement is key to survival. When a webform breaks in a big corporate setting, money is lost and people get fired. For that reason, the International Bank I recently did work for had requirements that demanded all its webforms were tabular (assembled with tables) It's hard to argue with a portfolio of sites whose users generate the company hundreds of millions of $$$ annually.

<style>

ul.anyclassname{
padding:0;
}

ul.anyclassname li{
list-style-type:none;
clear:left;
}

ul.anyclassname li label{
width:300px;
float:left;
}

.inputs{
float:left;
}

</style>

    <form>
    <ul class="anyclassname">
      <li>
      <label>Name:</label>
      <div div class="inputs"><input type="text"></div>
      </li>
      <li>
      <label>Email:</label>
      <div div class="inputs"><input type="text"></div>
      </li>
      <li>
      <label>Phone:</label>
      <div div class="inputs"><input type="text"></div>
      </li>
    </ul>
    </form>

I usually do this:

<div>
  <label for="txtname">Name:</label>
  <input type="text" id="txtname" name="txtname"/>
</div>
<div>
  <label for="txtEmail">Email:</label>
  <input type="text" id="txtEmail" name="txtEmail"/>
</div>
<div>
  <label for="txtPhone">Phone:</label>
  <input type="text" id="txtPhone" name="txtPhone"/>
</div>
etc...

Then with my CSS:

    label { width: 100px; display: inline-block; }

Something along those lines. Nothing fancy, but they are side-by-side and with the surrounding div you get a block level element to give you a line return after each pair.

I wrote a complete form in this answer: how can we make forms like this with css & html? . It has the html markups and the css classes you need to start. The code is also in a fiddle here: http://jsfiddle.net/vSqR3/64/ (Now with the nice addition of the for attribute, thanks Kyle!)

You will find in that link not only how to put one markup next to the other, but how to set sizes and borders for each.

I strongly suggest you to play on the jsfiddle.net website. You'll be able to modify and test immediately all your changes.