written on:14 Jan, 2009 by Alen Grakalic

CSSG Collections: Web Forms

Delicious Digg StumbleUpon Reddit Subscribe to RSS Feed

I am happy to present a new thing on CSS Globe: CSSG Collections! Approx. once a months I will design, code and give a way a collection of certain web elements for free. First in the series of CSS(G) collections are web forms. I am giving away 5 uniquely designed and coded web form styles. Hope you'll find them useful!

Take a look at the forms | Download CSSG Forms Collection

CSSG Form Collection

If you like these forms and want more of these collections, please consider bookmarking this page to your favourite social bookmarking service :)

In this collection I used my typical form markup. I always use FIELDSET and LEGEND elements although I sometimes hide them. I find FIELDSET element to be very useful in presentation, because I have an extra element without jeopardizing semantics. i.e. I can combine FORM and FIELDSET to achieve double backgrounds, or use them for vertical "sliding-door" as I did in my first example.

Here's my typical markup:

<form id="form5" action="/" method="post">	
		
	<fieldset><legend>Contact form</legend>
		<p class="first">					
			<label for="name">Name</label>				
			<input type="text" name="name" id="name" size="30" />					
		</p>
		<p>					
			<label for="email">Email</label>				
			<input type="text" name="email" id="email" size="30" />				
		</p>
		<p>
			<label for="web">Website</label>				
			<input type="text" name="web" id="web" size="30" />										
		</p>			
		<p>
			<label for="message">Message</label>
			<textarea name="message" id="message" cols="30" rows="10"></textarea>
		</p>					
		
		<p class="submit"><button type="submit">Send</button></p>	
					
	</fieldset>								
</form>

Also, as an announcement, I am currently developing a jQuery plugin for text fields and text areas that will handle their behavior and validation. Stay tuned for more on this subject.

About the author:

cssglobe's image Designer, developer and a passionate standardista. Long time web professional with huge experience in all types of front-end work. Founder of Css Globe and creator of Easy front-end framework.
To get in touch, visit Alen's personal page, follow Alen on Twitter or become a Facebook friend.

Enjoyed the article?

Then don't miss our next one! Subscribe to our RSS feed or share it with your friends.

Delicious Digg StumbleUpon Reddit Subscribe to RSS Feed

Read more! Here are our most recent articles:

View All Articles

Comments

  1. Tim Wright on 14 Jan, 2009 wrote:

    I'm not a fan of using <p> as a wrapper for form controls, I think it actually damages the semantics since <label> and <input/>aren't paragraphs.

    A display:block on the label will give you the same output look.

    Kudos on <button> though, very underused element!

    my2cents

  2. cssglobe on 14 Jan, 2009 wrote:

    Yes, Tim, label could replace p tag, although we'd have to wrap the input element in. Only thing is, with nested input we couldn't achieve everything we wanted in presentation, so I still think we need some sort of container. It can be list item instead of paragraph.

  3. ST on 14 Jan, 2009 wrote:

    Always great seeing different techniques and approaches, thanks for this article!

  4. jose on 14 Jan, 2009 wrote:

    great work, thanks for sharing your knowledge

  5. WebmasterNeal on 14 Jan, 2009 wrote:

    One thing I dislike about using the fieldset+legend elements is that in IE it is difficult to give the fieldset a background-color. IE ends up overlapping the color outside the the boundaries of the fieldset due to the legend element. Perhaps someday they will fix that bug.

  6. Brad Czerniak on 14 Jan, 2009 wrote:

    A List Apart had an article about input positioning that used ordered lists to wrap input-label pairs. Semantically, this KINDA makes sense. http://www.alistapart.com/articles/prettyaccessibleforms/

  7. Todd Zaki Warfel on 14 Jan, 2009 wrote:

    Only thing I would suggest is to swap out your use of p tags for wrappers with line items instead. You could also use dt/dl.

  8. Flash on 14 Jan, 2009 wrote:

    Bravo, clap clap clap clap clap...

  9. nathaniel on 14 Jan, 2009 wrote:

    Nice little article, gave it a stumble thumbs up!

    Noticed you said that you are currently creating a jQuery plugin, will it be able to integrate with the Validate and Forms plugins?

    nathaniel

  10. Dr. Ritalin on 15 Jan, 2009 wrote:

    Hey, dude!
    It's great. Thank you.

  11. Asger on 15 Jan, 2009 wrote:

    I really like 'Form 3' - Very nice indeed!

    Concerning the markup I think divs are the most appropriate tag instead of the p's. Semanticly it's not a paragraph, it's not a list and it's not a definition list - It's a division! One could give the div a semantic class name of 'formelement' if you need a specific hook for you css...

  12. oooh on 15 Jan, 2009 wrote:

    can I bookmark it to my browser instead of a bookmark service?

  13. cssglobe on 15 Jan, 2009 wrote:

    @Asger what you said about divs makes sense although I don't see that in use often. Anyone else have an opinion about this?

  14. Jimmy on 15 Jan, 2009 wrote:

    Use a section tag =)

  15. jessabean on 15 Jan, 2009 wrote:

    Don't agree about divs, really, as they don't add any meaning. All they would accomplish is to indicate that each label/input combination is separate from the next label/input combination, and that's kind of obvious, in my opinion.

    I agree with Todd in that lists make more sense. Either an ordered list or a definition list.

  16. cssglobe on 15 Jan, 2009 wrote:

    @Jimmy: That would be the day, can't wait! :)

  17. Francis Wu on 15 Jan, 2009 wrote:

    For my recent web forms framework (http://github.com/thisisfranciswu/these-are-forms/tree/master), I've favoured the use of DIVs as well for similar reasons as @Asger.

    However, another reason is to avoid styling conflicts and the use of too many style hooks.

    If I were to use P to wrap controls, it may conflict with using P to wrap instructions at the beginning of the form.

    I also avoid the use of LI to wrap controls because I use those for listing check boxes and radio buttons, which can appear in either lists or inline.

  18. ST on 15 Jan, 2009 wrote:

    I preferably use a list item~ But thats just my style/preference :-)

    *response to your twitter question*

  19. Dan B. Lee on 15 Jan, 2009 wrote:

    I'm not a fan of using P to wrap the them. Like ST, I create either an OL or UL and LI each label and input. This gives you a chance to number each step they must take in order to fill out the form.

  20. cssglobe on 15 Jan, 2009 wrote:

    thank you all for comments, could you please use all caps for tag names, my comment form parses tags (need to fix it) Thanks!

  21. Mark Aplet on 15 Jan, 2009 wrote:

    I agree with the use of div's It makes the most sense for use in forms. Lists and paragraphs are not semantic either so choose your poison. Div's seam to be the lesser of two evils to me.

  22. webdawson on 15 Jan, 2009 wrote:

    Great examples!
    I don't know why but in most of my projects i use div's to wrap input & label...i'm not the big <p> fan but its also a good way.

  23. Jason Huck on 15 Jan, 2009 wrote:

    I disagree with the comment that lists are "not semantic." Lists, by definition, have inherent semantic qualities which may or may not be appropriate for a given situation. A form is quite often presented as a list of things (questions), and often needs to be completed in a specific order, so using a list (ordered or unordered) may very well be semantically correct, depending on the circumstances.

  24. Vladimir Carrer on 15 Jan, 2009 wrote:

    I think that the most natural(semantic) way is to use only br tag. And you have cleaner and smaller HTML code.

  25. Jimmy on 15 Jan, 2009 wrote:

    @cssglobe -- Most modern browsers (there are workarounds for IE6) support HTML 5 structural tags. Here's a great article regarding this topic on orderedlist.com: http://orderedlist.com/articles/structural-tags-in-html5

  26. Jimmy on 15 Jan, 2009 wrote:

    @Vladimir -- BR tags are only supposed to be used in content formatting, not structure. It would be inappropriate to use that tag for your forms.

  27. Sam Benson on 15 Jan, 2009 wrote:

    Why not use <span> tags?

  28. Vladimir on 15 Jan, 2009 wrote:

    @Jimmy: We don't have much alternatives we can use tables, lists,div, p or br or just pure CSS.
    Let's start with old Tables, we don't need CSS with the tables. Problem much unnecessary HTML code and the tables shouldn't be use as constructors.
    Lists lists are great for making "lists" but not for Form building.Do you thing is natural to put your for inside a list?
    Imagine the list and the form together without CSS formatting!? Continue >>

  29. Vladimir on 15 Jan, 2009 wrote:

    Or maybe for every input and label we should have one div and for one simple form we will have something like 10 divs, it's like turning back with old HTML tables.
    Then we have p, putting form inside paragraph hmm.No thanks.
    My personal logical solution is BR . And the form will look great and natural even without css.And not to mention less code then anything else.
    Imagine:
    1 2 br
    1 2 3 br this is something natural to write
    And the last solution just pure CSS, how the HTML code will look like without CSS?
    I did a lot of research on web forms and css.My advise use BR!

  30. Luka Vida on 15 Jan, 2009 wrote:

    I usually use P tags because DIVs come too close to each other when stylesheet is disabled. Lists - i prefer them for navigation. On the other hand, definition list may be a solution.

  31. Luka Vida on 15 Jan, 2009 wrote:

    @Vladimir BRs give you no opportunity for advanced styling

  32. Jimmy on 15 Jan, 2009 wrote:

    @Vladimir -- The HTML specification says that line breaks (BR) are only supposed to be used for text formatting, and formatting the text. Using a BR to format your forms as stated isn't semantic, it's lazy.

    Using a paragraph tag would also be problematic unless using a CSS reset, since paragraphs have differing default margins/paddings for various browsers. It is also my firm belief (as stated above) that paragraphs are for text. The specification would be blatantly violated if you were styling your labels/inputs as block elements.

    A DIV makes the most sense according to styling and being in accordance with the HTML spec.

  33. Mark Aplet on 15 Jan, 2009 wrote:

    I agree with Jimmy, and others above. In this case a DIV makes the most sense in accordance with html spec. I don't like the idea of bending any definition of a tag to make it feel more semantically correct. e.g. p, li, ul, br.

  34. Asger on 15 Jan, 2009 wrote:

    I would only add the DIV's if I needed them for some kind CSS stuff - otherwise I would skip them all together. Generally I like my markup to look and behave as anticipated before adding CSS - And in my head it just doesn't seem right when a form is mixed with a bunch of LI's in plain XHTML.

  35. Vladimir on 15 Jan, 2009 wrote:

    @Jimmy @others:Using BR is my personal decision. I don't care if someone says that BR should be used only for text formatting. For me BR are more easy more natural less HTML code then lists,divs .. and works well even without CSS formatting. I repeat this is my personal decision. The problem remains HTML is from 1989(HTML4 1999) and we need something fresh. I hope HTML 5 will bring some news.

  36. mike on 16 Jan, 2009 wrote:

    Hi CssGlobe, if i'm not mistaken, you used 'overflow: hidden;' on p to clear the floats; whereas in one of the recent posts about the most used class names, you had a class for just clearing floats, any particular reason for the two approaches?

  37. Jesse on 16 Jan, 2009 wrote:

    Thank you, any design support I can get is always appreciated. Especially if it looks this good!

  38. Dainis Graveris on 18 Jan, 2009 wrote:

    Actually extremely useful form, also interesting to see how You code it, keep continuing this :)

  39. Hassan on 19 Jan, 2009 wrote:

    Thanks! They are absolutely cool and very useful. Thank you!

  40. Zach on 22 Jan, 2009 wrote:

    I don't like using P, UL, OL lists on forms either to format. What I recently found that I really like now is using DL's, DT's and DD's to format. That helps keep everything in place, doesn't add extra divs that are un-needed and other formatting techniques that shouldn't be used. Just my 2 cents.

  41. chris on 10 Feb, 2009 wrote:

    The form's look really good, but I cannot see how you could use this style for a multi-column form. Your examples are all 1 column, except for 1 and 3, with the textarea to the right. They way that you have done this is with separate fieldset's.

    If you align inputs in multiple columns with separate fieldset's the tabbing direction will be incorrect. Any suggestions? I can only think of table's being the stable way for multi-column form layouts (bring on display:table)

  42. Ibrahim on 9 Mar, 2009 wrote:

    Hey Alex!

    The forms are really good. I like no.3 and no.2

    My opinion about mark up is , i prefer divs.

  43. elcodigodebarras on 10 Mar, 2009 wrote:

    Thanks for bring us these clean and beautiful works.

  44. jason on 12 Mar, 2009 wrote:

    @chris You can use the tabindex property to assign the tab index to any html element.

    Also I too have been using p elements to wrap my labels/form elements but after reading all these opinions I believe I will start using divs since it seems to be the best overall semantically acceptable way to do it.

  45. Kaveh on 19 Mar, 2009 wrote:

    Amazing post! Just a quick question though!... if im using wordpress and I want to have a contact form/page... how should I put these codes in my page and where do I put the CSS Style sheet?

    thanks again.

  46. Guntas on 24 Mar, 2009 wrote:

    Thanks a lot, very useful!!

  47. dlv on 27 Jun, 2009 wrote:

    great ! really cool webforms, usefull !
    thanks a lot for share
    we will be stay tuned for more of this articles!

    adeux

  48. sasdaman on 28 Jun, 2009 wrote:

    Wicked. Have been looking for some reusable forms for a while that actually work with my designs. These are just the job. Thanks again....!

Sorry, further comments are disabled for this post.

Need help with your website?
Hire a CSS/JavaScript expert!

Hey, you are not logged in!
Apply for a membership or login here.

Subscribe to CSSG Feed

Want to join?

If you wish to contribute with your own articles, updates or gallery entries you can apply for a membership and even become our editor.

Apply here

Become a friend