CSSG Collections Web Forms

posted on:January 14, 2009

CSSG Collections Web Forms

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.

Enjoyed the article?

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

Share on Facebook Tweet this Delicious StumbleUpon Reddit Subscribe

Comments (48 Comments)

Tim Wright
January 14, 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
cssglobe
January 14, 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.
ST
January 14, 2009

Always great seeing different techniques and approaches, thanks for this article!
jose
January 14, 2009

great work, thanks for sharing your knowledge
WebmasterNeal
January 14, 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.
Brad Czerniak
January 14, 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/
Todd Zaki Warfel
January 14, 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.
Flash
January 14, 2009

Bravo, clap clap clap clap clap...
nathaniel
January 14, 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
Dr. Ritalin
January 15, 2009

Hey, dude! It's great. Thank you.
Asger
January 15, 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...
oooh
January 15, 2009

can I bookmark it to my browser instead of a bookmark service?
cssglobe
January 15, 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?
Jimmy
January 15, 2009

Use a section tag =)
jessabean
January 15, 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.
cssglobe
January 15, 2009

@Jimmy: That would be the day, can't wait! :)
Francis Wu
January 15, 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.
ST
January 15, 2009

I preferably use a list item~ But thats just my style/preference :-) *response to your twitter question*
Dan B. Lee
January 15, 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.
cssglobe
January 15, 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!
Mark Aplet
January 15, 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.
webdawson
January 15, 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.
Jason Huck
January 15, 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.
Vladimir Carrer
January 15, 2009

I think that the most natural(semantic) way is to use only br tag. And you have cleaner and smaller HTML code.
Jimmy
January 15, 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
Jimmy
January 15, 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.
Sam Benson
January 15, 2009

Why not use <span> tags?
Vladimir
January 15, 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 >>
Vladimir
January 15, 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!
Luka Vida
January 15, 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.
Luka Vida
January 15, 2009

@Vladimir BRs give you no opportunity for advanced styling
Jimmy
January 15, 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.
Mark Aplet
January 15, 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.
Asger
January 15, 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.
Vladimir
January 15, 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.
mike
January 16, 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?
Jesse
January 16, 2009

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

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

Thanks! They are absolutely cool and very useful. Thank you!
Zach
January 22, 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.
chris
February 10, 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)
Ibrahim
March 9, 2009

Hey Alex! The forms are really good. I like no.3 and no.2 My opinion about mark up is , i prefer divs.
elcodigodebarras
March 10, 2009

Thanks for bring us these clean and beautiful works.
jason
March 12, 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.
Kaveh
March 19, 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.
Guntas
March 24, 2009

Thanks a lot, very useful!!
dlv
June 27, 2009

great ! really cool webforms, usefull ! thanks a lot for share we will be stay tuned for more of this articles! adeux
sasdaman
June 28, 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, the comment form is closed at this time.