CSS form labels

AdRock · #1 Dec 1st, 2006, 22:49

I am using labels to help layout the text in my forms but am wandering how I go about reducing the horizontal space between labels

Here is an example of my form

HTML: Select all

<fieldset>
    <legend><b>Image Dimensions</b></legend>
     <p><label for "Image">Image:</label>
     <input type="file" name="image"></p>
     <p><label for "percent">Resize to:</label>
     <input type="text" name="percent" size="1" /> % (percentage)</p>
     <p><label for "new_width">OR new width:</label>
     <input type="text" name="new_width" size="1" /> pixels (height will be calculated automatically)</p>
    
     <p><label for "new_height">OR new height:</label>
     <input type="text" name="new_height" size="1" /> pixels (width will be calculated automatically)</p>      
</fieldset>

I would like the gaps between each of the form elements to be reduced.

I also have another question becuase I presume you can't use a table within a form properly.

How would I go about displaying the same effect as this but using CSS?

HTML: Select all

<tr> 
                <th>OR new height and new width: </th> 
                <td> 
                    <table> 
                        <tr><td>width:</td><td><input type="text" name="width" size="1" /> pixels</td></tr> 
                        <tr><td>height:</td><td><input type="text" name="height" size="1" /> pixels</td></tr> 
                    </table> 
                </td> 
            </tr>

Any help is much appreciated

Accurax · #2 Dec 11th, 2006, 16:02

personally i tend to use tables to lay forms out, simply because i veiw them as verging on tabular data.

Doing it with CSS wouldnt be difficult, i should imaging the html would look something like this:

Code: Select all

<div id="divform">

<div id="divfieldone">
<div id="field1left">
</div>
<div id="field1right>
</div>
</div>

<div id="divfieldtwo">
<div id="field2left">
</div>
<div id="field2right>
</div>
</div>

<div id="divfieldthree">
<div id="field3left">
</div>
<div id="field3right>
</div>
</div>

</div>

As for the CSS to get these to lay out like a table........ id have to actually buid it to see ... maybe someone else can help ?

ukgeoff · #3 Dec 12th, 2006, 11:58

Your code as shown will not form an association between the label and input elements. The value of the 'for' attribute of the label should match the 'id' value of the input but you only have 'name' attributes and not 'id's.

You can adjust the spacing between labels and their respective inputs and between lines of labels and inputes by using margin and/or padding attributes.

You should not need to use a table to layout your form but some people do find this easier. Some also use the method where each line of the form is enclosed in a <div> element.

Feel free to look at the xhtml and css behind this form: http://1ontheweb.net/enquiries.html

moojoo · #4 Dec 13th, 2006, 03:05

Also I think there is an issue with Safari where the label has to wrap the entire input.. woot!

Ryan Fait · #5 Dec 13th, 2006, 07:36

Yeah, that's what I've always done. It seems weird, but the validator doesn't hiccup.

<label for="name">Name: <input type="text" id="name" name="name" /></label>

snow · #6 Dec 13th, 2006, 08:58

AListApart has a great article on making forms without tables:
http://alistapart.com/articles/practicalcss

This one is a bit scarier:
http://alistapart.com/articles/prettyaccessibleforms

I'm not sure about tables with forms... they don't sound like tabular data to me! But what do I know?

Snow

moojoo · #7 Dec 13th, 2006, 18:03

I would say it depends on the form. Very complex forms with loads of inputs etc could easily be done with tables and since most users like to tab through forms why not.

Ryan Fait · #8 Dec 13th, 2006, 23:53

The tabindex attibute is beautiful, too.

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Hiding / Showing form fields based on previous form input	John Alexander Hopper	PHP Forum	1	Mar 10th, 2008 11:30
Button and box labels.What is the best way?	Mulith	Starting Out	17	Nov 5th, 2007 10:26
Tabs, labels, user group whatsits...	pa007	Webforumz Cafe	12	Sep 30th, 2007 03:12
Control Main Timeline Using a Function (Jumping to a different frame using labels)	JamesHatter	Flash & Multimedia Forum	1	Jun 27th, 2007 21:02
Help Please - Radio Button Labels not showing	sandyb	Flash & Multimedia Forum	0	Jan 16th, 2006 22:56

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
CSS form labels