HTML form layout with CSS

I need to build a form for data input, let's say FirstName and LastName. I know how to do this with a table. In the first <td> I'd put a label tag and in the second I'd use an input tag with a type="text" attribute. This way the labels and textboxes would be lined up in two columns.

Is there a way to do this with CSS?

回答1:

Here's a tutorial for this.

回答2:

You do NOT need tables to make great HTML forms. In fact, you don't want them! Try this code at home and see what you think..

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Contact info</title>

<LINK href="main2.css" type="text/css" rel="stylesheet">

<!--[if IE]>
<style>
    fieldset.nested 
    {
        position: relative;
        margin-top: 15px;        
    }

    fieldset.nested legend 
    {
        position: absolute; top: -8px; left: 1em;
    }
</style>
<![endif]-->

</head>

<body>

<div>    
    <form>

    <fieldset class="main">
        <legend>Contact info</legend>

        <fieldset class="nested">
            <legend>Name</legend>    
            <ol>
                <li>
                    <label for="textboxName">Name</label>
                    <input id="textboxName" name="textboxName" type="text" style="width: 15em;"/>
                </li>
                <li>
                    <label for="textboxName" >Title</label>
                    <input id="textboxName" name="textboxTitle" type="text" style="width: 15em;"/>
                </li>
                <li>
                    <label for="textboxCompany">Company</label>
                    <input id="textboxCompany" name="textboxCompany" type="text" style="width: 15em;"/>
                </li>
            </ol>
        </fieldset>        

        <fieldset class="nested">
            <legend>Address</legend>    
            <ol>
                <li>
                    <label for="textboxAddress1" >Street address</label>
                    <input id="textboxAddress1" name="textboxAddress1" type="text" style="width: 15em;"/>
                </li>
                <li>
                    <label for="textboxAddress2" >Street address</label> 
                    <input id="textboxAddress2" name="textboxAddress2" type="text" style="width: 15em;"/>
                </li>
                <li>
                    <label for="textboxCity" >City</label>
                    <input id="textboxCity" name="textboxCity" type="text" style="width: 15em;"/>
                </li>
                <li>
                    <label for="textboxRegion" >City/Region</label>
                    <input id="textboxRegion" name="textboxRegion" type="text" style="width: 15em;"/>
                </li>
                <li>
                    <label for="textboxPostalCode" >Postal code</label>
                    <input id="textboxPostalCode" name="textboxPostalCode" type="text" style="width: 15em;"/>
                </li>
                <li>
                    <label for="textboxCountry" >Country</label>
                    <input id="textboxCountry" name="textboxCountry" type="text" style="width: 15em;"/>
                </li>
            </ol>
        </fieldset>        

        <fieldset class="nested">
            <legend>Phone numbers</legend>
            <ol>
                <li style="display:none">
                    <label for="textboxName" >Name</label>
                    <input id="text1" name="textboxName" type="text" style="width: 15em;"/>
                </li>
                <li style="display:none">
                    <label for="textboxAddress1" >Address</label>
                    <input id="text2" name="textboxAddress1" type="text" style="width: 15em;" />
                </li>
                <li>
                    <label for="textboxAddress2" >Phone</label> 
                    <input id="text3" name="textboxAddress2" type="text" style="width: 15em;"/>
                </li>
            </ol>    
        </fieldset>        

        <div class="buttonsContainer">
            <input class="button" type="submit" value="OK" /> 
            <input class="button" type="button" value="Cancel" /> 
        </div>

    </fieldset>

    </form>
</div>    


</body>

</html>

CSS:

body 
{   
    margin: 0;
    padding: 0; 
    font-family: Verdana, Tahoma, Arial, sans-serif;
}

fieldset.main 
{  
    margin: 1.5em 0 0 1.5em;  
    padding: 1em 0 0 0;
    width: 400px;
    font-size: .9em;    
}

fieldset.main legend
{  
    margin-left: 1em;  
    color: #000000;  
    font-weight: bold;    
}

fieldset.main ol 
{  
    padding: 1em 1em 0 1em;  
    list-style: none;
}

fieldset.main li 
{  
    padding-bottom: .5em;
}

fieldset.main ol li label 
{  
    float: left;
    width: 10em;        
    margin-right: 1em;
}

/* ----------------------------------------- */

fieldset.nested 
{  
    margin: 0 0 1em 1em;  
    padding: 0;
    width: 93%;
    font-size: .8em;
    border: 1px solid gray;
    background: #B0C4DE;    

}

fieldset.nested legend
{  
    margin-left: 1em;      
    font-weight: normal;
    font-size: .9em; 
    color: black;
    background-color: white;
    padding: 0 1em 0 1em;
    border: 1px solid black;
}

fieldset.nested ol 
{  
    padding: 0 1em 0 1em;  
    list-style: none;
}

fieldset.nested li 
{  
    /* Control leading between rows. */
    padding-bottom: .7em;
}

fieldset.nested ol li label 
{  
    float: left;
    width: 10em;        
    margin-right: 1em;
}

/* ----------------------------------------- */

input.button
{                                  
    /* border-style: none; */
    width: 6em;
    height: 2.5em;
}

div.buttonsContainer
{
    float: right;
    margin: 1em 1em 1em 0;
}

回答3:

CSS will work fine -- IF you are okay with entering pixel widths for things But sadly fails when you need to localize your strings and discover labels don't fit. For an address entry form, I would stick to using Tables, as they do all the right re-sizing and wrap behaviour and work w/o issues on almost every browser there is.

EDIT: I kinda wonder if any of the down-voters has checked the layout for these S.O. pages

回答4:

A really good way to do this yourself is to install firebug on firefox and inspect elements on websites which implement this really well.

There is a great smashing maagzine on sign up forms. Several approaches in CSS can be seen, with some really great examples.