Styling Your forms with CSS and Labels

web

I had a comment asking about styling forms using CSS with the label tag in my last blog entry, so I thought I would write another post to show an example.

Here's how you would use the label tag and some CSS to create a stylin' form with very little markup:

<style>
label { position: absolute; text-align:right; width:130px; }
input, textarea { margin-left: 140px; }
label.check, label.radio { position:relative; text-align:left; }
</style>

<form>
  <label for="name">Your Name:</label>
  <input type="text" name="name" id="name" /><br />
  <label for="email">Your Email:</label>
  <input type="text" name="email" id="email" /><br />
  <input type="checkbox" name="subscribe" id="subscribe" />
  <label for="subscribe" class="check">Subscribe</label>
</form>

If you don't want to apply this styling to ALL forms on your website what I usually do is give my form an id, and then use the ID in the style sheet such as:

#myFormID input, #myFormID textarea { ... } 

Any questions? Anyone using a different approach?



Related Entries

36 people found this page useful, what do you think?

Trackbacks

Trackback Address: 527/0A077347F0F8F579B6C0D087636BCE06

Comments

On 01/12/2006 at 11:48:29 AM UTC Jon C wrote:
1
Not sure it's necessarily better, but a different approach since I've been tackling the same problem lately: I've found I prefer myself to nest the form element inside the label tag and and style the labels like block elements, without using break tags. Even though this requires a bit more CSS, the benefit is that the HTML needn't be touched if a layout change is desired (i.e. - you want to have First Name and Last Name on the same line instead of separate.) It also gives me additional selectors to use when styling a long form. I'd post an example of what I mean, but it looks like your comments don't allow HTML.

On 01/12/2006 at 11:55:39 AM UTC Pete Freitag wrote:
2
I know what you mean Jon, your method does have the advantage of more flexibility within the CSS. Thanks for sharing.

On 02/02/2006 at 1:52:07 PM UTC Sam Clement wrote:
3
Both very cool techniques. I'll definately use one or the other in the future.

On 02/17/2006 at 3:49:10 PM UTC Kishore wrote:
4
This is cool but is this supported in other browsers?

On 03/22/2006 at 12:49:21 AM UTC matt wrote:
5
I have been trying to use a similar approach with a list of checkboxes & labels. I have the problem of long label text (basically titles and authors of books). These long labels tend to wrap and then end up under the checkbox and looking pretty bad. I don't want to use any absolute positions as the layout is relative. has anyone dealt with this kind of thing before.

On 05/04/2006 at 7:36:45 AM UTC Adam Ness wrote:
6
Why not just use a table? This is one of the few cases where tables actually make sense: I want to have two columns of things, one column of which is labels, the other column of which is fields. The CSS approach you've listed here won't gracefully deal with people scaling their fonts via Firefox, or with people who customize their font size via local stylesheets.

On 05/04/2006 at 9:04:18 AM UTC Pete Freitag wrote:
7
I prefer this approach over tables because it uses much less code. Also if you keep your label width large enough scaling font sizes shouldn't be much of an issue.

This is not to say that there aren't some cases where a table would work better, but I think for most cases this is a better solution.

On 05/25/2006 at 8:36:30 PM UTC phidler wrote:
8
I've just rewritten a table-based form to use CSS instead, but the problem is that the "size" attribute for the text input scales with the font, so it's quite easy to break the layout with only a couple enlargements by the user. Any way to restrict the scaling of the text window?

On 05/25/2006 at 8:37:13 PM UTC phidler wrote:
9
I've just rewritten a table-based form to use CSS instead, but the problem is that the "size" attribute for the text input scales with the font, so it's quite easy to break the layout with only a couple enlargements by the user. Any way to restrict the scaling of the text window?

On 06/08/2006 at 5:06:40 AM UTC Chris/London UK wrote:
10
I prefer separating form controls with p tags rather than br's:

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

You might also want to use a definition list:

<dl> <dt> <label for="name">Your Name:</label> </dt> <dd> <input type="text" name="name" id="name" /> </dd>

<dt> <label for="surname">Your Surname:</label> </dt> <dd> <input type="text" name="surname" id="surname" /> </dd> </dl>

On 06/12/2006 at 10:09:52 AM UTC Michael Johnson wrote:
11
By using "float: left;" on <label>, instead of "position: absolute;", you can avoid using <br />s after every <input> without nesting the "form element inside the label tag," which is not valid XHTML. If this doesn't work in IE/Win, would someone please correct me.

On 06/12/2006 at 10:20:48 AM UTC Michael Johnson wrote:
12
Does anyone know if perhaps <label> and <input> are supposed to be enclosed by a block level element such as <p> or <dl>? If you notice, without styling, all of these elements will render on the same line.

On 07/26/2006 at 7:34:41 AM UTC Andy wrote:
13
One problem that you might run into with this approach is that because you've used fixed-pixel widths - the user will have problems when resizing text (or when your labels are too long?)

I usually use a relative unit to define widths of elements.

Check out my form template: http://afrobean.dyndns.org:81/ap/examples/form-layout.html

On 07/28/2006 at 9:41:53 PM UTC Hannah wrote:
14
Uh. How do you make a form just like this one? Can you give me the code please?

On 08/10/2006 at 10:31:00 AM UTC michael wrote:
15
Still a bit lost how do you align the input boxes so they are vertical and spaced a bit without using the <p> or <br /> tags? I am a web design intern/student (more of a print media kind of designer), so sorry if it is here already and I haven't picked it up.

On 08/10/2006 at 10:57:34 AM UTC Jon C. wrote:
16
Michael,

If you are asking your question regarding my first response to Pete's post, I have actually changed my opinion since I posted my response in favor of using <br/> tags. I've found some situations where this makes form layout much easier.

If you do want to do without <br/> or <p> tags you can do so like this using CSS: /*Use the Label as Block Element */ /*You can control spacing using padding and line-height styles - we've applied a class attribute to the <label> tag */

label.formLabel {position: relative; display:block!important; width: 100%; text-align:left;padding: 5px 0 5px 0; line-height: 15px;}

/*Form Inputs -we've already applied a class to the input */ /* Note: We'll use the margin-top attribute to control the v-position of the input within the label element. */

label input.formInput {position: relative; float:right; margin-top: -15px;}

Hope that clarifies for you.

On 08/10/2006 at 11:41:19 AM UTC michael wrote:
17
Thanks Jon, it makes a little bit more sense, trying to wrap my head around it right now. I am going to use the CSS method but for now I am just trying to find out what works the the AD wants to get it clean coded and place it in the site we are doing. I applied a <div> to the section and that has lined up everything for now. I just need to adjust their widths so the browsers all render the same thing. Thanks again.

On 05/02/2007 at 11:38:11 PM UTC BlueBoden wrote:
18
Why not just use display: block; ?

it is rendering it as display: inline;, the simple solution would be to render it as a block and give it float'(s) and positioning if or as it is needed.

On 06/22/2007 at 10:34:51 AM UTC Tim wrote:
19
Why try so hard to avoid table tag? It's on the contact form. I am not going to spend extra time optimizing contact page. They will fill the form no matter what (if they want to contact me). I have other pages to worry about.

On 06/24/2007 at 9:30:55 AM UTC BlueBoden wrote:
20
what i really miss is the ability to control the look of my form 100%, the whole idea of a standardized look and feel is useless among most skilled webdesigners, becourse most younger users simply dont care about that part, since they could reconise a button/whatever the grapical opject is intended for instantaneously.

In this case, if someone speak about accessibility of a given website, its more of a brag about his own skills, then its going to help you. Becourse, what he is doing, is simply stating the obvious.

The trick to get older or just inexperianced computer users to reconise a given opjects use, is obviously to indicate its use as moch as possible, make it as obvious as possible without limiting your design to moch, almost anyone trying to learn how to create websites can allready feel this to some degree, however some who call themself "webdesigners" have become lazy and incompetent, and while they feel somthing is wrong with their site, they wont lift a finger to learn how to fix it.

alone the style'ing can be really hard to learn, and dose take some time.

However the result is well worth it, and somtimes it would guantee your page a 1th ranking on a given keyword.

Why we havent even a fully functional and reliable way of doing things yet is really slowing down my own work, and forms is one of the outdated things that could use a'little work by w3c.

Tables allways somehow seam to get the work done, almost regardless of what you want. But damn its annoying, to read the source code of bigger sites who use tables for everything, its not hard for experianced webdesigners, but it dose increase the time required to understand the site structure before we can modify it, and in last end (somtimes the costs of the finished product/website becourse of the increase in work hours)

It is so moch faster to finish a bit of work, for someone who have had his whole site made without tables to begin with, somtimes a major update can be applied in a matter of mins. (if the site structore is correct)

When looking at dedicated webmasters design patterns, we will often find that they are very similer. So if they reconize a given design pattern, it will be moch faster for them to apply a patch/major update.

That is my reason why you would dump tables, even thoug that one or two pages containing a form in a table, isent/wont be the problem.

On 06/24/2007 at 9:55:36 AM UTC Blueboden wrote:
21
Having that said, i still lack the skills to present everything 100% the way i want it to be shown.

But even with my humble skills as a grapical designer, where everything i make pretty moch end up randomly in photoshop. Im atleast trying to get things shown the way i want, and i hope that im not limited by outdated views of how the web should be.

views like having the most accessible website, wont hold in the long run, we shouldent be limited by the device that is rendering our site.

And never, ever.. will i limit my webdesign, just becourse some wannabee PC equipment trys to take the role of a real computer. Or cant live up to peoples expectations, when rendering websites and disslike.

As far as im conserned, its the device that has a problem, not the designer. And thats the pure truth, and im shure we will see devices getting their problems solved insted of people blameing it on the designers in the future.

If these new devices want to browse the web, they really need a major update in their rendering engine... Becourse, well it simply suck.

Or they should be limited to their own web, im not going to kneel as long at theres the PC, witch where here first.

I feel like jumping on my mobile phone, im shure it would be a greath feeling. Better not, i need it right now. HAHA

On 09/30/2007 at 9:52:37 AM UTC Marco Fabiani wrote:
22
Haven't read every entry in too great detail, but the original post and some subsequent ones got me on the right track. Here's what i ended up doing... form label { display: table-cell; width: 80px; float:left; } form input, textarea, select { display: table-cell; }

It worked a treat, and the html uses only the <form> tag and <label> tags, nothing more.

On 10/29/2007 at 12:39:36 PM UTC gaby wrote:
23
Flobo Recovery is the leading provider of powerful data recovery, drive image, HDD repair and PC privacy utilities for the Windows OS family. All Flobo software titles are listed below.Trial versions of each program can be downloaded free of charge by using the Download link above or the FREE Trial link listed with each product. Use the Buy It! link to securely purchase any Flobo product and download right to your desktop. www.floborecovery.us

On 11/01/2007 at 12:52:56 PM UTC gaby wrote:
24
Flobo Recovery is the leading provider of powerful data recovery, drive image, HDD repair and PC privacy utilities for the Windows OS family. All Flobo software titles are listed below.Trial versions of each program can be downloaded free of charge by using the Download link above or the FREE Trial link listed with each product. Use the Buy It! link to securely purchase any Flobo product and download right to your desktop. www.floborecovery.us

On 02/01/2008 at 12:06:07 PM UTC miguel wrote:
25
beautiful code! a couple of lines and all my forms passed from horrible to quite nice. in less that 5 minutes

On 02/02/2008 at 8:56:33 AM UTC mental wrote:
26
this was exactly the solution I was looking for. thank you very much

On 10/30/2008 at 8:47:16 PM UTC Kevin Sargent wrote:
27
Don't forget that the fieldset tag is required for strict xhtml

Also, I do prefer floating the inputs, it removes the br tags, and allows you to easily re-arrange the position of the label on each 'row' of the form: for example: you might want the label to be positioned ABOVE the input on some forms that can't afford the extra width.

I do also use a div for each row of the form as someone asked about in comments. it helps with positioning a lot to have several types of form 'rows' already set up in CSS (submit, regular input, indendted, required, optional, etc...).

On 06/02/2009 at 7:31:14 PM UTC Tom wrote:
28
The article code works well, but I cannot figure out how to format using the same technique as the top comment. I cannot seem to get the boxes to left-align like the presented in this article. Has anyone been able to get this version to display the same: "I've found I prefer myself to nest the form element inside the label tag and and style the labels like block elements, without using break tags."

On 08/24/2009 at 11:34:32 AM UTC Nk wrote:
29
I can't figure out how to make this code cross browser compatible. It looks pretty bad in IE 7

On 05/17/2010 at 11:41:08 AM UTC choch wrote:
30
thanks, this works great across all browsers.

On 07/13/2010 at 4:49:03 AM UTC praveen wrote:
31
i need only print label in html page. using css. pls help me

On 10/13/2010 at 12:24:15 AM UTC stratocentric wrote:
32
label {display:block;margin:5px;} .intro{width: 10em; float: left; font-weight: bold; text-align: right;}

and then ...

<label><span class="intro">name: </span><input type="text" name="" value="" /></label>

On 12/12/2010 at 10:04:43 AM UTC Alex wrote:
33
Hi,

I am using this code to center my login form.Is there any other way which is more convenient.

<style> label { position: absolute; text-align:center; width:370px; } input, textarea { margin-left: 400px; } label.check, label.radio { position:relative; text-align:center; } </style>

On 05/01/2014 at 12:53:00 PM UTC ?????????`&????å? ???????å? wrote:
34
?????????????h?????????? Styling Your forms with CSS and Labels ???????? |?g?H???|??g?H|??|???} ?S???????y??????{?????|??????????????|??????????????| ?y??? ??????????R????????????????? ?????????`&????å? ???????å? http://www.rematchsportsnh.com/images/abercrombie.html

On 05/03/2014 at 12:00:58 AM UTC ??????? ??`???` ???`?? ?????? wrote:
35
??????? ???????????? Styling Your forms with CSS and Labels ????????????????? ???? ????? ??????? ??`???` ???`?? ?????? http://www.mpeg-laser.org/porter.html

On 05/03/2014 at 12:56:36 AM UTC ???????? wrote:
36
?? ??? ??? Styling Your forms with CSS and Labels ??????å???????? ?????????????????????`??2???????? ???????? http://www.ssreuta.com/ferragamo.html

On 05/03/2014 at 11:41:03 AM UTC ?????`??? ??å? wrote:
37
????S???? ??????? YouTube??????????~???? ??B???????L????`????`??????? Styling Your forms with CSS and Labels ??`??? |???|??`???????z???????????????????? ?????`??? ??å? http://rematchsportsnh.com/images/ralphlauren.html

On 05/04/2014 at 10:33:17 AM UTC ??å????????? ???????å? wrote:
38
? Styling Your forms with CSS and Labels ???????????¡??????_?? ?????????? ??å????????? ???????å? http://www.shbokanedu.com/

On 05/06/2014 at 11:11:24 PM UTC ????`?? ??? wrote:
39
?_?????????????`???????????? Styling Your forms with CSS and Labels ??????????????????? ?C??? ????`?? ??? http://www.antiqueflyin.com/

On 05/06/2014 at 11:18:36 PM UTC ????`?? ??å? wrote:
40
??g?H ???????? ?????????????{??`???`??|??|??????l??????ä?????????????????????? |??????????????L??????????????????????????????????k?? Styling Your forms with CSS and Labels ?????????? ????`?? ??å? http://www.antiqueflyin.com/

On 05/07/2014 at 8:10:46 AM UTC ?????????`?? ???? ????`??å? wrote:
41
?????????????? ????????? Styling Your forms with CSS and Labels ???? I ??????????????`????????|?o??|???????o???Google????ä???????????????? ?????????`?? ???? ????`??å? http://www.ssreuta.com/katespade.html

On 05/07/2014 at 6:32:32 PM UTC ?????????`&????å? ???????å? wrote:
42
??????i?????? ??? ???v???????å????v???? ?`?? |????|????|?????????????????g????????????????????`??????? Styling Your forms with CSS and Labels ?? ?????????`&????å? ???????å? http://www.rematchsportsnh.com/images/abercrombie.html

On 05/08/2014 at 12:49:45 AM UTC ?????????`?? ??å? wrote:
43
????????????? Styling Your forms with CSS and Labels ??i???????`??ä??????????????????????? A ???y???? ??¡??????S?????|??z???????? ?????????`?? ??å? http://www.ssreuta.com/katespade.html

On 05/08/2014 at 7:58:57 PM UTC ??????? ??`???` wrote:
44
??????i????? ??? ???v???? ??? |????|????|???????¤??`??????????g????????????????`??????? Styling Your forms with CSS and Labels ?? ??????? ??`???` http://www.mpeg-laser.org/porter.html

On 05/08/2014 at 8:30:25 PM UTC ?????? ??`???? wrote:
45
????`??????????????????? ?????? ??? ?C?????????å??? Styling Your forms with CSS and Labels ??????????????????????????????? ?????? ??`???? http://www.eccolapasta.com/??????.html

On 05/09/2014 at 3:12:10 PM UTC ????`?? ???????å? wrote:
46
I ????????i?????r?g??????M????? ??¤????` Styling Your forms with CSS and Labels ???? ???å????w??? ????`?? ???????å? http://www.antiqueflyin.com/

On 05/09/2014 at 6:12:27 PM UTC ????`?? ??å? wrote:
47
?????????????????? ?L??????B?????????????????????????????????????????ä????? Styling Your forms with CSS and Labels ??? ?????????????????????????? ??|??????????????? ????`?? ??å? http://www.antiqueflyin.com/

On 05/10/2014 at 10:18:29 PM UTC ????`?? ??`???å? ??`???` wrote:
48
???????????? Styling Your forms with CSS and Labels ????????? ?C????????????`?????????????????????`???|????C?????| ???????????g?H????? ????`?? ??`???å? ??`???` http://www.rematchsportsnh.com/images/porter.html

On 05/11/2014 at 12:19:27 AM UTC ???`??`?? ??å? wrote:
49
???????|??????? Styling Your forms with CSS and Labels ????????????????????????`?????????????????????L???????????ä?????????L? I ??????????? conations ????g ??? |???|??`??|????| ?????y?????????? ???`??`?? ??å? http://www.caesarcole.com/

On 05/11/2014 at 10:13:29 AM UTC ?????????? wrote:
50
???????????i???????????????? ??P???? Styling Your forms with CSS and Labels I??????????? ??????????????????U?Y??R??????????? ?????????? http://www.ssreuta.com/

On 05/18/2014 at 2:07:49 AM UTC ????????` wrote:
51
?????????| ????????????????? Styling Your forms with CSS and Labels ??i????????????????????????????ä???????????????????C??r?g??kavin AM ??????????}????{?A??????????????? ????????` http://www.gordleydesign.com/tiffanyoutlet.html

On 05/18/2014 at 4:23:10 AM UTC ????`?? ??å? wrote:
52
??r????|????????????? ??????YouTube?????????`??????ä?????? ?C????????????? Styling Your forms with CSS and Labels ?????????? A ?????|??????? ????`?? ??å? http://www.qdhzr.com/

On 05/18/2014 at 4:21:10 PM UTC ???????? wrote:
53
????????`??????? Styling Your forms with CSS and Labels YouTube?????????? ?????????????? |?????????????? ????????????????????????????????????? ???????? http://www.ssreuta.com/

On 05/19/2014 at 2:32:10 AM UTC ???å? ??å? wrote:
54
??????i????? ??? ???v???? ?`?? |????|????|???????¤??`??????????g????????????????`??????? Styling Your forms with CSS and Labels ?? ???å? ??å? http://www.cafeplazma.com/???å?.html

On 05/20/2014 at 7:43:11 PM UTC ??????? ??????`???? wrote:
55
? Styling Your forms with CSS and Labels ??? ??Z??????????k????????????????ä??? ???\?? ??????? ??????`???? http://www.pabzhou2002.com/ferragamo.html

On 05/20/2014 at 9:01:01 PM UTC ???`??`??? ???????å? wrote:
56
??|????????????`????T?¤??????L???? ?????? ??????????? Styling Your forms with CSS and Labels ?????????????????????????????????? ???`??`??? ???????å? http://www.caesarcole.com/

On 05/21/2014 at 9:06:38 PM UTC ???????????? ???????` wrote:
57
?P???????????????????????????????????????????`?????P?????????? Styling Your forms with CSS and Labels ????????????????????????????????????????? ???????????? ???????` http://www.chicagovintageweddings.com/images/samantha.html

On 05/22/2014 at 7:33:55 AM UTC ???`????` ???????å? wrote:
58
???????? Styling Your forms with CSS and Labels ???? ???????O???????_???????????¤?????????L???????????g?H??????g???????? ???`????` ???????å? http://www.rematchsportsnh.com/lays/oakleyoutlet.html

On 05/24/2014 at 12:53:08 PM UTC ???????????? wrote:
59
??????????1??????|????r?F???? ?????????????? Styling Your forms with CSS and Labels ???????????? ???????????Y?????????????¤????g|??R}????????{?????S????? ???????????? http://www.gordleydesign.com/samantha.html

On 05/25/2014 at 7:16:29 AM UTC ??`???` ??? wrote:
60
???????????????`?? Styling Your forms with CSS and Labels ?m??????????????|?m??}??????????????{?????????????????? ??`???` ??? http://www.rematchsportsnh.com/images/porter.html

On 05/25/2014 at 1:42:31 PM UTC ???`????` wrote:
61
??????????????ä??????????????????? Styling Your forms with CSS and Labels ????????????????? ?? ???`????` http://www.maria4home.com/oakley.html

On 05/26/2014 at 1:16:15 PM UTC ??????? wrote:
62
?????????????? ??????? ??????????? Styling Your forms with CSS and Labels ???????? ??????????????S????????????????????wrinting?????????? ??????? http://www.wildfiredt.com/

Post a Comment




  



Spell Checker by Foundeo

Recent Entries



foundeo


did you hack my cf?