CSS form help

**bdavey311** · 01-07-2009 07:20 PM

I'm putting together my first css form and am running into trouble.
View the sample here:
Untitled Document

With the way the CSS and HTML is setup - if I want the input area to be to the right of the label (on just a couple of shorter ones such as expiration date and postal code) I run into all sorts of problems. Can someone help clean up my code so that I have an option to have some of the input areas to the right?
Would appreciate it and would love to hear advice on cleaning up the code. Also, for some reason Expiration Month and Year isn't where it's supposed to be. It should be to the side of Expiration.
Thanks in advance!
Here is the HTML:

Code:

 <div id="stylized" class="myform2">
            <form id="form" name="form" method="post" action="index.html">
            <label>Credit Card:</label>
              <select name="CreditCardType" id="CreditCardType">
                <option>VISA</option>
                <option>MasterCard</option>
                <option>Discover</option>
              </select>
            
            <label>Credit Card Number:
            </label>
            <input type="text" name="LastName" id="LastName" />
            
            <label>Expiration:</label>
            <select name="ExpirationDate" id="ExpirationDate">
              <option>01</option>
                <option>02</option>
                <option>03</option>
                <option>04</option>
                <option>05</option>
                <option>06</option>
                <option>07</option>
                <option>08</option>
                <option>09</option>
                <option>10</option>
                <option>11</option>
                <option>12</option>
              </select>
              <select name="ExpirationDate" id="ExpirationDate">
                <option>2009</option>
                <option>2010</option>
                <option>2011</option>
                <option>2012</option>
                <option>2013</option>
                <option>2014</option>
                <option>2015</option>
              </select>
            
            <label>Name on Card:</label>
            <input type="text" name="Phone" id="Phone" />
            
            <label>Card Security Code:</label>
            <input type="text" name="Phone" id="Phone" />
            
            <label>Address Line 1:</label>
            <input type="text" name="Phone" id="Phone" />
            
            <label>Address Line 2:</label>
            <input type="text" name="Phone" id="Phone" />
            
            <label>City:</label>
            <input type="text" name="Phone" id="Phone" />
            
            <label>State:</label>
            <select name="State" id="State">
                <option value="" selected="selected">Select a State</option> 
                <option value="AL">Alabama</option> 
                <option value="AK">Alaska</option> 
                <option value="AZ">Arizona</option> 
                <option value="AR">Arkansas</option> 
                <option value="CA">California</option> 
                <option value="CO">Colorado</option> 
                <option value="CT">Connecticut</option> 
                <option value="DE">Delaware</option> 
                <option value="DC">District Of Columbia</option> 
                <option value="FL">Florida</option> 
                <option value="GA">Georgia</option> 
                <option value="HI">Hawaii</option> 
                <option value="ID">Idaho</option> 
                <option value="IL">Illinois</option> 
                <option value="IN">Indiana</option> 
                <option value="IA">Iowa</option> 
                <option value="KS">Kansas</option> 
                <option value="KY">Kentucky</option> 
                <option value="LA">Louisiana</option> 
                <option value="ME">Maine</option> 
                <option value="MD">Maryland</option> 
                <option value="MA">Massachusetts</option> 
                <option value="MI">Michigan</option> 
                <option value="MN">Minnesota</option> 
                <option value="MS">Mississippi</option> 
                <option value="MO">Missouri</option> 
                <option value="MT">Montana</option> 
                <option value="NE">Nebraska</option> 
                <option value="NV">Nevada</option> 
                <option value="NH">New Hampshire</option> 
                <option value="NJ">New Jersey</option> 
                <option value="NM">New Mexico</option> 
                <option value="NY">New York</option> 
                <option value="NC">North Carolina</option> 
                <option value="ND">North Dakota</option> 
                <option value="OH">Ohio</option> 
                <option value="OK">Oklahoma</option> 
                <option value="OR">Oregon</option> 
                <option value="PA">Pennsylvania</option> 
                <option value="RI">Rhode Island</option> 
                <option value="SC">South Carolina</option> 
                <option value="SD">South Dakota</option> 
                <option value="TN">Tennessee</option> 
                <option value="TX">Texas</option> 
                <option value="UT">Utah</option> 
                <option value="VT">Vermont</option> 
                <option value="VA">Virginia</option> 
                <option value="WA">Washington</option> 
                <option value="WV">West Virginia</option> 
                <option value="WI">Wisconsin</option> 
                <option value="WY">Wyoming</option>
              </select>
              <label>Zip:</label>
            <input type="text" name="PostalCode" id="PostalCode"/>
            <label>Country:</label>
            <input type="text" name="Country" id="Country"/>
            </h1>
            <a href="form.html"><img src="images/button2.png" width="223" height="43" alt="Button" style="margin-top:10px;"/></a>
            <div class="spacer"></div>            
            </form>
            <p><a href="terms-conditions.html">Terms &amp; Conditions</a></p>
</div>

Ands the CSS:

Code:

/* ----------- My Form ----------- */
.myform{
margin:0 auto;
width:236px;
height:369px;
position:absolute;
top:322px;
left:650px;
}

.myform2{
margin:0 auto;
width:236px;
height:369px;
position:absolute;
top:370px;
left:650px;
}

/* ----------- stylized ----------- */
#stylized{
}
#stylized h1 {
font-size:13px;
font-weight:bold;
margin-bottom:8px;
}
#stylized p{
font-size:16px;
font-weight:bold;
color:#000;
margin-top:5px;
text-align:center;
line-height:.6 em;
}

#stylized p a{
color:#000;
text-decoration:none;
}
#stylized p a:hover{
color:#000;
text-decoration:underline;
}
#stylized label{
display:block;
font-size:12px;
font-weight:bold;
text-align:left;
width:200px;
float:left;
}

#stylized .small{
color:#666666;
display:block;
font-size:11px;
font-weight:normal;
text-align:left;
width:140px;
}
#stylized input{
float:left;
font-size:12px;
padding:1px 1px;
border:solid 1px #aacfe4;
width:200px;
margin:0px 0 8px 0px;
}

#stylized select{
margin-left:10px;
}

#stylized button{
clear:both;
margin-top:10px;
margin-left:6px;
width:223px;
height:43px;
background: url(../images/button.png) no-repeat;
text-align:center;
float:left;
}

**SineQuaNon** · 03-07-2009 10:10 PM

I think you're over-complicating the CSS -- try and keep it simple.

Not using tables (view example here):

PHP Code:


<?php $maxYear = 2016; ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title></title>
        <style media="screen" type="text/css">
            /* ----------- My Form ----------- */
            
            .myform2 {
                width:250px;
                height:auto;
                /* position:absolute; */
                /* top:370px; */
                /* left:650px; */
            }
            
            /* ----------- stylized ----------- */
            
            #stylized p {
                font-size:16px;
                font-weight:bold;
                color:#000;
                text-align:center;
            }
            
            #stylized p a:link, #stylized p a:active, #stylized p a:visited {
                color:#000;
                text-decoration:none;
            }
            
            #stylized p a:hover {
                color:#000;
                text-decoration:underline;
            }
            
            #stylized label {
                font-weight:bold;
            }
            
            #stylized input, #stylized select {
                border:solid 1px #aacfe4;
                /* width:200px; */
            }
            
            .OnTheRight {
                padding: 0 10px 0 0;
            }
        </style>
    </head>
    <body>
        <div id="stylized" class="myform2">
            <form id="form" name="form" method="post" action="index.html">
                
                <label for="CreditCardType">Credit Card:</label>
                <br />
                <select name="CreditCardType" id="CreditCardType">
                    <option value="VISA">VISA</option>
                    <option value="MasterCard">MasterCard</option>
                    <option value="Discover">Discover</option>
                </select>
                
                <br />
                <br />
                
                <label for="CreditCardNumber">Credit Card Number: </label>
                <br />
                <input type="text" name="CreditCardNumber" id="CreditCardNumber" />
                
                <br />
                <br />
                
                <label class="OnTheRight">Expiration Date:</label>
                <select name="ExpirationMonth" id="ExpirationMonth">
                    <?php for ($i = 1; $i < 13; $i++) : ?>
                        <option value="<?php echo $i; ?>"><?php echo $i; ?></option>
                    <?php endfor ?>
                </select>
                <select name="ExpirationYear" id="ExpirationYear">
                    <?php for ($j = 2009; $j < $maxYear; $j++) : ?>
                        <option value="<?php echo $j; ?>"><?php echo $j; ?></option>
                    <?php endfor ?>
                </select>
                
                <br />
                <br />
                
                <label for="NameOnCard">Name on Card:</label>
                <br />
                <input type="text" name="NameOnCard" id="NameOnCard" />
                
                <br />
                <br />
                
                <label for="SecurityCode">Card Security Code:</label>
                <br />
                <input type="text" name="SecurityCode" id="SecurityCode" />
                
                <br />
                <br />
                
                <label for="Address1">Address Line 1:</label>
                <br />
                <input type="text" name="Address1" id="Address1" />
                
                <br />
                <br />
                
                <label for="Address2">Address Line 2:</label>
                <br />
                <input type="text" name="Address2" id="Address2" />
                
                <br />
                <br />
                
                <label for="City">City:</label>
                <br />
                <input type="text" name="City" id="City" />
                
                <br />
                <br />
                
                <label for="State">State:</label>
                <br />
                <select name="State" id="State">
                    <option value="" selected="selected">-- Select --</option>
                    <option value="AL">Alabama</option>
                    <option value="AK">Alaska</option>
                    <option value="AZ">Arizona</option>
                    <option value="AR">Arkansas</option>
                    <option value="CA">California</option>
                    <option value="CO">Colorado</option>
                    <option value="CT">Connecticut</option>
                    <option value="DE">Delaware</option>
                    <option value="DC">District Of Columbia</option>
                    <option value="FL">Florida</option>
                    <option value="GA">Georgia</option>
                    <option value="HI">Hawaii</option>
                    <option value="ID">Idaho</option>
                    <option value="IL">Illinois</option>
                    <option value="IN">Indiana</option>
                    <option value="IA">Iowa</option>
                    <option value="KS">Kansas</option>
                    <option value="KY">Kentucky</option>
                    <option value="LA">Louisiana</option>
                    <option value="ME">Maine</option>
                    <option value="MD">Maryland</option>
                    <option value="MA">Massachusetts</option>
                    <option value="MI">Michigan</option>
                    <option value="MN">Minnesota</option>
                    <option value="MS">Mississippi</option>
                    <option value="MO">Missouri</option>
                    <option value="MT">Montana</option>
                    <option value="NE">Nebraska</option>
                    <option value="NV">Nevada</option>
                    <option value="NH">New Hampshire</option>
                    <option value="NJ">New Jersey</option>
                    <option value="NM">New Mexico</option>
                    <option value="NY">New York</option>
                    <option value="NC">North Carolina</option>
                    <option value="ND">North Dakota</option>
                    <option value="OH">Ohio</option>
                    <option value="OK">Oklahoma</option>
                    <option value="OR">Oregon</option>
                    <option value="PA">Pennsylvania</option>
                    <option value="RI">Rhode Island</option>
                    <option value="SC">South Carolina</option>
                    <option value="SD">South Dakota</option>
                    <option value="TN">Tennessee</option>
                    <option value="TX">Texas</option>
                    <option value="UT">Utah</option>
                    <option value="VT">Vermont</option>
                    <option value="VA">Virginia</option>
                    <option value="WA">Washington</option>
                    <option value="WV">West Virginia</option>
                    <option value="WI">Wisconsin</option>
                    <option value="WY">Wyoming</option>
                </select>
                
                <br />
                <br />
                
                <label class="OnTheRight" for="PostalCode">Zip:</label>
                <input type="text" name="PostalCode" id="PostalCode" />
                
                <br />
                <br />
                
                <label for="Country">Country:</label>
                <br />
                <input type="text" name="Country" id="Country" />
                
                <br />
                <br />
                
                <input id="SubmitForm" type="image" src="http://www.estetica-design-forum.com/images/button2.png" value="Add To Cart" />
                
            </form>
            <p>
                <a href="terms-conditions.html">Terms &amp; Conditions</a>
            </p>
        </div>
    </body>
</html>

Using tables (view example here):

PHP Code:


<?php $maxYear = 2016; ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title></title>
        <style media="screen" type="text/css">
            input, select {
                border:solid 1px #aacfe4;
            }
        </style>
    </head>
    <body>
        <form id="form" name="form" method="post" action="index.html">
            <table cellpadding="10" cellspacing="0" id="FormTable">
                <tr>
                    <td>
                        <label for="CreditCardType">Credit Card Type:</label>
                    </td>
                    <td>
                        <select name="CreditCardType" id="CreditCardType">
                            <option value="VISA">VISA</option>
                            <option value="MasterCard">MasterCard</option>
                            <option value="Discover">Discover</option>
                        </select>
                    </td>
                </tr>
                
                <tr>
                    <td>
                        <label for="CreditCardNumber">Credit Card Number: </label>
                    </td>
                    <td>
                        <input type="text" name="CreditCardNumber" id="CreditCardNumber" />
                    </td>
                </tr>
                
                <tr>
                    <td>
                        <label>Expiration Date:</label>
                    </td>
                    <td>
                        <select name="ExpirationMonth" id="ExpirationMonth">
                            <?php for ($i = 1; $i < 13; $i++) : ?>
                                <option value="<?php echo $i; ?>"><?php echo $i; ?></option>
                            <?php endfor ?>
                        </select>
                        <select name="ExpirationYear" id="ExpirationYear">
                            <?php for ($j = 2009; $j < $maxYear; $j++) : ?>
                                <option value="<?php echo $j; ?>"><?php echo $j; ?></option>
                            <?php endfor ?>
                        </select>
                    </td>
                </tr>
                
                <tr>
                    <td>
                        <label for="NameOnCard">Name on Card:</label>
                    </td>
                    <td>
                        <input type="text" name="NameOnCard" id="NameOnCard" />
                    </td>
                </tr>
                
                <tr>
                    <td>
                        <label for="SecurityCode">Card Security Code:</label>
                    </td>
                    <td>
                        <input type="text" name="SecurityCode" id="SecurityCode" />
                    </td>
                </tr>
                
                <tr>
                    <td>
                        <label for="Address1">Address Line 1:</label>
                    </td>
                    <td>
                        <input type="text" name="Address1" id="Address1" />
                    </td>
                </tr>
                
                <tr>
                    <td>
                        <label for="Address2">Address Line 2:</label>
                    </td>
                    <td>
                        <input type="text" name="Address2" id="Address2" />
                    </td>
                </tr>
                
                <tr>
                    <td>
                        <label for="City">City:</label>
                    </td>
                    <td>
                        <input type="text" name="City" id="City" />
                    </td>
                </tr>
                
                <tr>
                    <td>
                        <label for="State">State:</label>
                    </td>
                    <td>
                        <select name="State" id="State">
                            <option value="" selected="selected">-- Select --</option>
                            <option value="AL">Alabama</option>
                            <option value="AK">Alaska</option>
                            <option value="AZ">Arizona</option>
                            <option value="AR">Arkansas</option>
                            <option value="CA">California</option>
                            <option value="CO">Colorado</option>
                            <option value="CT">Connecticut</option>
                            <option value="DE">Delaware</option>
                            <option value="DC">District Of Columbia</option>
                            <option value="FL">Florida</option>
                            <option value="GA">Georgia</option>
                            <option value="HI">Hawaii</option>
                            <option value="ID">Idaho</option>
                            <option value="IL">Illinois</option>
                            <option value="IN">Indiana</option>
                            <option value="IA">Iowa</option>
                            <option value="KS">Kansas</option>
                            <option value="KY">Kentucky</option>
                            <option value="LA">Louisiana</option>
                            <option value="ME">Maine</option>
                            <option value="MD">Maryland</option>
                            <option value="MA">Massachusetts</option>
                            <option value="MI">Michigan</option>
                            <option value="MN">Minnesota</option>
                            <option value="MS">Mississippi</option>
                            <option value="MO">Missouri</option>
                            <option value="MT">Montana</option>
                            <option value="NE">Nebraska</option>
                            <option value="NV">Nevada</option>
                            <option value="NH">New Hampshire</option>
                            <option value="NJ">New Jersey</option>
                            <option value="NM">New Mexico</option>
                            <option value="NY">New York</option>
                            <option value="NC">North Carolina</option>
                            <option value="ND">North Dakota</option>
                            <option value="OH">Ohio</option>
                            <option value="OK">Oklahoma</option>
                            <option value="OR">Oregon</option>
                            <option value="PA">Pennsylvania</option>
                            <option value="RI">Rhode Island</option>
                            <option value="SC">South Carolina</option>
                            <option value="SD">South Dakota</option>
                            <option value="TN">Tennessee</option>
                            <option value="TX">Texas</option>
                            <option value="UT">Utah</option>
                            <option value="VT">Vermont</option>
                            <option value="VA">Virginia</option>
                            <option value="WA">Washington</option>
                            <option value="WV">West Virginia</option>
                            <option value="WI">Wisconsin</option>
                            <option value="WY">Wyoming</option>
                        </select>
                    </td>
                </tr>
                
                <tr>
                    <td>
                        <label for="PostalCode">Zip:</label>
                    </td>
                    <td>
                        <input type="text" name="PostalCode" id="PostalCode" />
                    </td>
                </tr>
                
                <tr>
                    <td>
                        <label for="Country">Country:</label>
                    </td>
                    <td>
                        <input type="text" name="Country" id="Country" />
                    </td>
                </tr>
                
                <tr>
                    <td colspan="2" align="center">
                        <input type="checkbox" name="AcceptTerms" id="AcceptTerms" />I accept the <a href="terms-conditions.html">Terms &amp; Conditions</a>
                    </td>
                </tr>
                
                <tr>
                    <td colspan="2" align="center">
                        <input type="submit" value="Submit" />
                    </td>
                </tr>
                
            </table>
        </form>
    </body>
</html>

I'll no doubt get flamed for using tables, but the code is simpler, there's less CSS, and it looks better in my opinion. Make sure you turn your submit image button into an actual <input type="submit" />, otherwise that form won't actually be doing anything. I also validated your HTML, cause it was a bit funky. Hope that helps.

**graphicsAZ** · 13-07-2009 10:01 PM

I agree with Sine....i might just be easier to use a table to organize this info? However, if your set on using css, why not use a UL instead? Put each INPUT into an LI, and you will not need the DIV (stylized). A UL has the sam eblock level properties as a DIV.

**Harry** · 14-07-2009 12:40 AM

Neither of the supplied codes are too cracking, I wouldn't recommend using either. One uses tables, the other is riddled with line breaks.

**SineQuaNon** · 14-07-2009 12:45 AM

Well that was an easy way out, now wasn't it?

**Harry** · 14-07-2009 12:50 AM

Que?

**graphicsAZ** · 14-07-2009 04:07 PM

Originally Posted by PR Design

Neither of the supplied codes are too cracking, I wouldn't recommend using either. One uses tables, the other is riddled with line breaks.

whats up bud,
what do you think is the best method for organizing this form?

**Harry** · 14-07-2009 08:54 PM

Well the problem with line breaks and tables is they mean the form always displays one way. If you wrap <label>…</label><input … /> etc in a div or paragraph then you can alter the layout so much more. You can float the divs left, or clear them. You don't get anything like the same amount of flexibility with forced line breaks.

Thread: CSS form help

LinkBack

Thread Tools

Display

CSS form help

Similar Threads

Order Form

Form follows function

How to create a form?????

PHP Form

Form Help

Bookmarks

Bookmarks

Posting Permissions