Form Alignment CSS

This is one thing that I really hate within development is forms. Below is my code and what I am trying to do is align the inputs with the labels Name: input. Is there a rule that you use to help remember when coding forms?

CSS:

 #newwebsiteForm form{
    padding:10px;
    margin:10px 0;
    width:480px;
    position: relative;
}
#newwebsiteForm label{
    width:240px;
    display:block;
    float:right;
}
#newwebsiteForm input{
    width:240px;
    display:block;
    float:left;
}

HTML:

<section id="content">
                <h1>Free Quote</h1>
                    <p>Please fill out the below questionnaire to receive your free web development quote</p>
                        <form action="" method="post" accept-charset="utf-8">
                            <select name="requiredOption" id="requiredOption">
                                <option id="pleaseselect" value="pleaseselect">Please Select Your Required Quote</option>
                                <option id="newwebsite" value="newwebsite">New Website</option>
                                <option id="websiteredevelopment" value="websiteredevelopment">Website Redevelopment</option>
                                <option id="other" value="other">Other</option>
                            </select>
                        </form>
                        <div id="newwebsiteSection">
                            <form action="" id="newwebsiteForm" method="get" accept-charset="utf-8">
                            <fieldset>  
                            <label>Do You Require Hosting?</label><input type="radio" name="Yes" value="Yes">Yes</input><input type="radio" name="No" value="No">No</input>

                            <label>Do You Require A Domain?</label><input type="radio" name="Yes" value="Yes">Yes</input><input type="radio" name="No" value="No">No</input>

                            <label>Do You Have A Logo?</label><input type="radio" name="Yes" value="Yes">Yes</input><input type="radio" name="No" value="No">No</input>

                            <label>What is your Domain?</label>
                            <input type="url" name="domain" value="http://example.com"></input>开发者_如何学Go</div>

                            <label>Type of site Required?<label>

                                <select name="newwebsiteType" id="newwebsiteType">
                                <option value="shoppingCart">Shopping Cart</option>
                                <option value="CMS">Content Management System</option>
                                <option value="static">Static Website</option>
                                <option value="otherDevelopment">Other Development</option>
                            </select>

                            <label>Do You Require A Design?</label>
                            <input type="radio" name="Yes" value="Yes">Yes</input><input type="radio" name="No" value="No">No</input>

                            <label>Three Favorite colors?</label>
                                <input name="color1" value=""></input>
                                <input name="color2" value=""></input>
                                <input name="color3" value=""></input>

                                <label>What are your favorite websites?</label>
                                <input type="text" name="fav1" value=""></input>
                                <input type="text" name="fav2" value=""></input>
                                <input type="text" name="fav3" value=""></input>

                            <label>Comments?</label>
                            <textarea name="comments" id="comments"></textarea>

                            <input type="submit" name="submit" value="Send Quote Request">
                            </form>
                        </div>
                            <div id="websiteredevelopmentSection">
                                <p>Website Redevelopment</p>
                            </div>
                                <div id="otherSection">
                                    <p>Other</p>
                                </div>

    </section>

---

Just because tables are the easier option doesn't make using them right.

Here's a great article about css form design. http://www.alistapart.com/articles/prettyaccessibleforms

The author suggests storing each label/input element in an ordered list element keeping them grouped.

I've just used this to implement a bunch of forms for various mini sites and it worked a treat! You can align the label next to the input or above just by changing the ol li label element's display property from display:inline-block to display:block respectively.

Getting the text to align next to a radio button or checkbox can be a bit tricky but is possible by adding and styling a span element.

BEST OF ALL IT'S CROSS BROWSER COMPATIBLE!

Hope that helps.

---

This is probably related to the question: <div> usage correctly? Can't get the columns to line up: You can also check my comments there for some reference when dealing with semantically-correct forms.

The approach you will need to be in habit of is always structure your markup correctly first before jumping to any CSS (or styling).

A <form> is composed of the following:

1. The <form> itself.
2. The <fieldset>: acts a the container of the different sections of your <form>
3. The <legend>: acts as the heading of the <fieldset>
4. The <input />: for fields, checkboxes, radio buttons, and submit button
5. The <button>: an alternative for <input type="submit">, which can wrap something inside of it.
6. The <select>: a list of values inside a drop-down menu.
7. The <label>: from the name itself, the label of the <input />, <button> and <select>

To illustrate, you can check this example:

<form>
    <fieldset>
        <legend>Form Heading: </legend>
        <fieldset>
            <legend>Group 1 Heading: </legend>
            <label for="input-id">Input Label: </label>
            <input id="input-id" />
        </fieldset>

        <fieldset>
            <legend>Group 2 Heading: </legend>
            <label for="select-id">Select Label: </label>
            <select id="select-id">
                <option>Option 1</option>
                <option>Option 2</option>
                <option>Option 3</option>
            </select>
        </fieldset>

        <input type="submit" value="Submit" />
    </fieldset>
</form>

With the exception of radio (<input type="radio" />) and checkboxes (<input type="checkbox" />), where the <label> should come after the <input />

---

You have to use the label element as follows to correctly align them:

<FORM action="http://somesite.com/prog/adduser" method="post">
<P>
<LABEL for="firstname">First name: </LABEL>
          <INPUT type="text" id="firstname"><BR>
<LABEL for="lastname">Last name: </LABEL>
          <INPUT type="text" id="lastname"><BR>
<LABEL for="email">email: </LABEL>
          <INPUT type="text" id="email"><BR>
<INPUT type="radio" name="sex" value="Male"> Male<BR>
<INPUT type="radio" name="sex" value="Female"> Female<BR>
<INPUT type="submit" value="Send"> <INPUT type="reset">
</P>

---

I wrap each input/label pair in a <div>. This helps a lot with styling.

<div class="form-item">
    <label for="first_name">First Name</label>
    <input type="text" name="first_name" id="first_name" />
</div>