HTML Forum

**indyryan** · 10:32 AM

I have created a form and most things are in place.

Is it appropriate to use CSS to justify long forms rather than tables?

I feel like everything in this should be working, however, the few things I want a multiple input/label per , the labels drop to the next line and the inputs stay there. Suggestions?

HTML

Code:

<head>
<link rel="stylesheet" type="text/css" href="css/form.css" />
<script type="text/javascript" src="calendarDateInput.js"></script>
</head>

<body>
<div id="structure">
<form name='egg_donor' action='#' method='POST' >
    
    <p><label for='date'>Today's Date:<b style='color:red'>*</b></label>MAKE CALENDAR SELECTION</p>
    
    <p><label for='interview'>Interviewed By:<b style='color:red'>*</b></label><input type='text' name='interview' id='interview' size='45' value=''></p>

    <p><label for='name'>What is your name?<b style='color:red'>*</b></label><input type='text' name='name' id='name' size='45' value=''></p>
    
    <p><label for='age'>How old are you?<b style='color:red'>*</b></label>
        <select name='age' id='age'>
            <option value=''>please choose</option>
            <option value='21'>21</option>
            <option value='22'>22</option>
            <option value='23'>23</option>
            <option value='24'>24</option>
            <option value='25'>25</option>
            <option value='26'>26</option>
            <option value='27'>27</option>
            <option value='28'>28</option>
            <option value='29'>29</option>
            <option value='30'>30</option>
            <option value='31'>31</option>
            <option value='32'>32</option>
        </select>
    </p>
        
    <p><label for='referal'>How did you hear about our program?<b style='color:red'>*</b></label><textarea name='referal' id='referal' cols='37' rows='4' value=''></textarea></p>
    
    <p><label for='address'>Address:<b style='color:red'>*</b></label><input type='text' name='address' id='address' size='45' value=''></p>
        </td>
    <label for='address2'>&nbsp;</label><input type='text' name='address2' id='address2' size='45' value=''></p>
    
    <p><label for='state'  >State:<b style='color:red'>*</b></label>
        <select name="state">
            <option value="not chosen">please choose</option>
            <option value="AL">AL</option>
            <option value="AK">AK</option>
            <option value="AZ">AZ</option>
            <option value="AR">AR</option>
            <option value="CA">CA</option>
            <option value="CO">CO</option>
            <option value="CT">CT</option>
            <option value="DE">DE</option>
            <option value="DC">DC</option>
            <option value="FL">FL</option>
            <option value="GA">GA</option>
            <option value="HI">HI</option>
            <option value="ID">ID</option>
            <option value="IL">IL</option>
            <option value="IN">IN</option>
            <option value="IA">IA</option>
            <option value="KS">KS</option>
            <option value="KY">KY</option>
            <option value="LA">LA</option>
            <option value="ME">ME</option>
            <option value="MD">MD</option>
            <option value="MA">MA</option>
            <option value="MI">MI</option>
            <option value="MN">MN</option>
            <option value="MS">MS</option>
            <option value="MO">MO</option>
            <option value="MT">MT</option>
            <option value="NE">NE</option>
            <option value="NV">NV</option>
            <option value="NH">NH</option>
            <option value="NJ">NJ</option>
            <option value="NM">NM</option>
            <option value="NY">NY</option>
            <option value="NC">NC</option>
            <option value="ND">ND</option>
            <option value="OH">OH</option>
            <option value="OK">OK</option>
            <option value="OR">OR</option>
            <option value="PA">PA</option>
            <option value="RI">RI</option>
            <option value="SC">SC</option>
            <option value="SD">SD</option>
            <option value="TN">TN</option>
            <option value="TX">TX</option>
            <option value="UT">UT</option>
            <option value="VT">VT</option>
            <option value="VA">VA</option>
            <option value="WA">WA</option>
            <option value="WV">WV</option>
            <option value="WI">WI</option>
            <option value="WY">WY</option>
        </select>
    <label for='city'>City:<b style='color:red'>*</b></label><input type='text' name='city' id='city' size='20' value=''>
    <label for='zip'>Zip:<b style='color:red'>*</b></label><input type='text' name='zip' id='zip' size='8' maxlength='5'  value=''></p>
        
    <p><label for='phone'>Phone:<b style='color:red'>*</b></label><input type='text' name='phone' id='phone' size='15' maxlength='14'  value=''>
       <label for='alt_phone'>Alt. Phone</label><input type='text' name='alt_phone' id='alt_phone' size='15' maxlength='14'  value=''>
    </p>
    
    <p><label for='msg_leave'>Ok to leave message?<b style='color:red'>*</b></label>
            <input type='radio' name='msg'value='yes' CHECKED >yes
            <input type='radio' name='msg'value='no'>no</p>
        
    <p><label for='email'>Email:<b style='color:red'>*</b></label><input type='text' name='email' id='email' size='45' value=''></p>
        
    <p><label for='relationship'>Are you:<b style='color:red'>*</b></label>
            <input type='radio' name='relationship'>single
            <input type='radio' name='relationship' CHECKED >married
            <input type='radio' name='relationship'>divorced
            <input type='radio' name='relationship'>in a relationship</p>
    
    <p><label for='height'>Height:<b style='color:red'>*</b></label><input type='text' name='height' id='height' size='10' value=''>
       <label for='weight'>Weight:<b style='color:red'>*</b></label><input type='text' name='weight' id='weight' size='15' value=''>
       <label for='bmi'>BMI:</label><input type='text' name='bmi' id='bmi' size='15' value=''>
    </p>
    <p><label for='Age'>Race/ethnicity?<b style='color:red'>*</b></label>
            <select name='race' id='race'>
                <option>please choose</option>
                <option>African American</option>
                <option>Asian</option>
                <option>Caucasian</option>
                <option>Hispanic or Latino</option>
                <option>Pacific Island</option>
                <option>Other</option>
            </select>
    </p>
    
    <p><label for='smoke'>Do you smoke?<b style='color:red'>*</b></label>
            <input type='radio' name='smoke'>yes
            <input type='radio' name='smoke'>no
       <label for='smoke_amount'>If yes, how much per day?</label>
            <select name='smoke_amount' id='smoke_amount'>
                <option value='please choose'>please choose</option>
                <option value='0-5 cigarettes'>0-5 cigarettes</option>
                <option value='half a pack'>half a pack</option>
                <option value='whole pack'>whole pack</option>
                <option value=' 1  packs'> 1  packs</option>
            </select>
    </p>
            
    <p><label for='smoked_ever'>Have you ever smoked?<b style='color:red'>*</b></label>
            <input type='radio' name='smoke_ever'>yes
            <input type='radio' name='smoke_ever'>no
       <label for='smoke_quit'>If yes, how long ago did you quit? (must be > 6 months)</label><input type='text' name='smoke_quit' id='smoke_quit' size='20' value=''>
    
    <p><label for="periods">Do you have regular periods?<b style='color:red'>*</b></label>
            <input type='radio' name='periods' CHECKED>yes
            <input type='radio' name='periods'>no
       <label for='cycle'>Length of cycle?<b style='color:red'>*</b></label><input type='text' name='cycle' id='cycle' size='20' value=''></p>
    
    <p><label for='lmp'>LMP:<b style='color:red'>*</b></label><input type='text' name='lmp' id='lmp' size='20' value=''></p>
    
    <p><label for='birthcontrol'>What method of birth control are you using now?<b style='color:red'>*</b></label><input type='text' name='birthcontrol' id='birthcontrol' size='30'></p>
        
    <p><label for='bcp_used'>Have you ever used BCPs?<b style='color:red'>*</b></label>
            <input type='radio' name='bcp_used'>yes
            <input type='radio' name='bcp_used'>no</p>
    
    <p><label for='bcp_which'>If yes, which ones?</label><input type='text' name='bcp_which' id='bcp_which' size='20' value=''>
        <label for='bcp_length'>If yes, how long?</label><input type='text' name='bcp_length' id='bcp_length' size='20' value=''>
    </p>
        
    <p><label for='birthcontrol_stop'>Would you be willing to stop birth control temporarily?<b style='color:red'>*</b></label>
            <input type='radio' name='birthcontrol_stop'>yes
            <input type='radio' name='birthcontrol_stop'>no
    </p>
        
    <p><label for='pregnant'>Have you ever been pregnant? What were the outcomes?<b style='color:red'>*</b></label> (select all that apply)</label>
            <input type='checkbox' name='pregnant'>G
            <input type='checkbox' name='pregnant'>P
            <input type='checkbox' name='pregnant'>T
            <input type='checkbox' name='pregnant'>SAB
            <input type='checkbox' name='pregnant'>TAB
            <input type='checkbox' name='pregnant'>L
            <input type='checkbox' name='pregnant'>E
    </p>
    
    <p><label for='births'>Births:<b style='color:red'>*</b></label><input type='text' name='births' id='births' size='20' value=''></p>
    
    <p><label for='med_problems'>Have you ever had any medical problems?<b style='color:red'>*</b></label><input type='text' name='med_problems' id='med_problems' size='45' value=''></p>
    
    <p><label for='psych_probs'>Have you ever had any psychological problems?<b style='color:red'>*</b></label><input type='text' name='psych_probs' id='psych_probs' size='45' value=''></p>
        
    <p><label for='surgeries'  >Surgeries?<b style='color:red'>*</b></label><input type='text' name='surgeries' id='surgeries' size='45' value=''></p>
    
    <p><input type='submit' name='submit' value='Submit'><input type='reset' name='reset' value='Reset'></p>
    
</form>
</div>
</body>

CSS

Code:

<style type="text/css">

#structure{
    width:800px;

}

p {
    margin-top: 40px;
    font: 11px Helvetica, Verdana, sans-serif;
}

label {
    float:left;
    display: inline;
    margin-right: 0px;
    padding-left: 20px;
    text-align: right;
    width: 150px;
    margin-top: 5px;
}

input, textarea, select {
    text-align: left;
    margin-left: 20px;
    margin-right: 10px;
    max-width: 300;
}


</style>

**burnsyy** · 05-22-2009, 09:38 AM

i use tables as it easyer for the css to work righty

**LadynRed** · 05-22-2009, 09:55 AM

Sorry, but that's just a crock. There really is no reason to use a table for forms, css works quite well without them.

All you need to do is either widen the width of the form container from 600 to something wider, or; reduce the font size on the and then reduce the left margin on the input and textarea elements to less than 40px. Your problem is simple math - your text, plus total widths for fields are too wide to fit in a 600px space.

**indyryan** · 10:48 AM

OK, width has changed however, I am still having trouble with the second label in the 's where I want 3 in a row.

The fields remain inline, but the text drops. The widths should all be fine now.

*edit* does the field need to be floated too?

**indyryan** · 05-22-2009, 02:30 PM

any ideas? still not quite right.

**LadynRed** · 05-22-2009, 03:52 PM

Did you reduce the text size ?? Like I said, you need to do the math. The parts cannot be greater than the whole

You CAN float the field, though it may not be necessary.

**indyryan** · 05-26-2009, 09:34 AM

Quote:

Originally Posted by LadynRed

Did you reduce the text size ??

yes, I even have taken it down to 1px. still the text drops to the next line. When you set a width in a field, in the html, what unit is it using (so I can add it up).

Quote:

Originally Posted by LadynRed

The parts cannot be greater than the whole

nice.

**LadynRed** · 05-26-2009, 10:24 AM

Quote:

what unit is it using (so I can add it up).

What unit did you specify ???

**indyryan** · 05-26-2009, 11:33 AM

Example:

Code:

<input type='text" name="address" size="45" value="">

It's set as default. Where can I specify what it uses? What do fields use by default?

Ryan

**han55** · 05-26-2009, 12:16 PM

not quite right I think...

**indyryan** · 05-26-2009, 01:19 PM

Quote:

Originally Posted by han55

not quite right I think...

i know, that's why i'm asking for help. any suggestions?

**indyryan** · 05-26-2009, 01:31 PM

I don't know if I have come up with the best solution, however, it works.

For the classes that have more than 1 label and 1 field, I only put a <label> on the first one, the rest of the text is nested in the .

thanks.

HTML Forum

Find a Professional HTML Freelancer!

FREE Outsourcing eBook!