written on:14 Jan, 2009 by Alen Grakalic

CSSG Collections: Web Forms

Delicious StumbleUpon Reddit Subscribe

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 StumbleUpon Reddit Subscribe

Read more! Here are our most recent articles:

View All Articles

Comments

  1. Tim Wright 14 Jan, 2009

    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 14 Jan, 2009

    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 14 Jan, 2009

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

  4. jose 14 Jan, 2009

    great work, thanks for sharing your knowledge

  5. WebmasterNeal 14 Jan, 2009

    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 14 Jan, 2009

    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 14 Jan, 2009

    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 14 Jan, 2009

    Bravo, clap clap clap clap clap...

  9. nathaniel 14 Jan, 2009

    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 15 Jan, 2009

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

  11. Asger 15 Jan, 2009

    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 15 Jan, 2009

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

  13. cssglobe 15 Jan, 2009

    @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 15 Jan, 2009

    Use a section tag =)

  15. jessabean 15 Jan, 2009

    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 15 Jan, 2009

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

  17. Francis Wu 15 Jan, 2009

    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 15 Jan, 2009

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

    *response to your twitter question*

  19. Dan B. Lee 15 Jan, 2009

    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 15 Jan, 2009

    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 15 Jan, 2009

    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 15 Jan, 2009

    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 15 Jan, 2009

    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 15 Jan, 2009

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

  25. Jimmy 15 Jan, 2009

    @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 15 Jan, 2009

    @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 15 Jan, 2009

    Why not use <span> tags?

  28. Vladimir 15 Jan, 2009

    @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 15 Jan, 2009

    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 15 Jan, 2009

    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 15 Jan, 2009

    @Vladimir BRs give you no opportunity for advanced styling

  32. Jimmy 15 Jan, 2009

    @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 15 Jan, 2009

    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 15 Jan, 2009

    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 15 Jan, 2009

    @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 16 Jan, 2009

    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 16 Jan, 2009

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

  38. Dainis Graveris 18 Jan, 2009

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

  39. Hassan 19 Jan, 2009

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

  40. Zach 22 Jan, 2009

    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 10 Feb, 2009

    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 9 Mar, 2009

    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 10 Mar, 2009

    Thanks for bring us these clean and beautiful works.

  44. jason 12 Mar, 2009

    @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 19 Mar, 2009

    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 24 Mar, 2009

    Thanks a lot, very useful!!

  47. dlv 27 Jun, 2009

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

    adeux

  48. sasdaman 28 Jun, 2009

    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.

CSS Globe is a web design magazine brought to you by Alen Grakalic and kept fresh with member contributed news and exlusive articles.

CSSG Ads

Useful Links

Friends