Hi all, I am having a bit of a designer's block and i am wondering if you could show me some nice "web 2.0" form example. With web 2.0 am just referring to all sites with a 'reflection logo' and for the form am looking for the use of fieldset and legend tag regards
Well I cant find an example at the moment, but they use a good amount of shadom on objects, and use several div's to create effective group box consisting of different colours background images etc.
I hate how it's worded as "web 2.0 form" but here is what you're looking for below.. http://www.smashingmagazine.com/2006/11/11/css-based-forms-modern-solutions/
Here's an old example I was working on before my computer died. I noticed a problem with IE that I couldn't fix until I decided to "fake" it by adding a DIV around the fieldsets and a SPAN around the text in the legends. Ironically, John Faulds of Tyssen Design came up with an identical solution (I didn't find out until afterwords though). You can read up on it here: http://www.tyssendesign.com.au/articles/legends-of-style Anyway, here's my original code (I still need to update it to include the fix, but it should be enough for you to learn from). <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>CSS Based Form Layout</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <style type="text/css"> * { margin: 0; padding: 0; } body { background: #FFF; color: #000; font-family: "Times New Roman", Times, serif; padding: 1em; } h1 { font-family: Georgia, Garamond, "Times New Roman", Times, serif; margin-bottom: 0.25em; } #exampleForm { padding: 0.5em 0; } #about { float: left; margin-right: 1em; width: 28em; } #survey { float: left; width: 22em; } #controls { clear: left; } fieldset { border: 1px solid #000; display: block; margin-bottom: 0.5em; padding: 0 0 0.25em 0.5em; } #tell-us { padding-top: 0.25em; padding-bottom: 0.5em; } fieldset div { padding: 0.25em 0 0 0; } legend { background: #EEE; color: #00C; border: 1px solid #000; padding: 0 0.25em; } label { margin: 0.25em 0; } #about label { clear: left; float: left; width: 12em; } #browsers label { margin: 0; width: auto; } #browsers label:hover { background: #FFF; color: #00F; font-weight: bold; } #poll label { margin: 0; width: 10em; } #poll label:hover { background: #FFF; color: #00F; font-weight: bold; } input { margin: 0.25em 0; } #browsers input { margin: 0; vertical-align: middle; } #poll input { margin: 0 0.25em 0 0; } #submit, #reset { clear: left; float: none; margin-left: 0; width: 8em; } textarea { background: #EEE; color: inherit; display: block; margin: 0 auto; padding: 0.5em; overflow: auto; width: 90%; } </style> </head> <body> <h1>Semantic Forms with (X)HTML and CSS</h1> <form id="exampleForm" method="post" action="#"> <div id="about"> <fieldset id="basicInfo"> <legend>Basic Information</legend> <label for="name">Your Name:</label> <input id="name" type="text" size="30" /><br /> <label for="email">Your Email Address:</label> <input id="email" type="text" size="30" /> </fieldset> <fieldset id="favorites"> <legend>Favorite Things</legend> <label for="favorite-animal">What is your favorite animal?</label> <input id="favorite-animal" type="text" size="30" /><br /> <label for="favorite-sport">What is your favorite sport?</label> <input id="favorite-sport" type="text" size="30" /><br /> <label for="favorite-food">What is your favorite food?</label> <input id="favorite-food" type="text" size="30" /> </fieldset> <fieldset id="tell-us"> <legend>Tell Us About Yourself</legend> <div> <textarea rows="10" cols="40"></textarea> </div> </fieldset> </div> <div id="survey"> <fieldset id="browsers"> <legend>What browsers are installed on your computer?</legend> <div> <label for="msie"><input id="msie" type="checkbox" name="browser" value="Microsoft" /> Internet Explorer</label><br /> <label for="netscape"><input id="netscape" type="checkbox" name="browser" value="Netscape" /> Netscape Browser</label><br /> <label for="mozilla"><input id="mozilla" type="checkbox" name="browser" value="Mozilla" /> Mozilla FireFox</label><br /> <label for="opera"><input id="opera" type="checkbox" name="browser" value="Opera" /> Opera Web Browser</label><br /> <label for="konqueror"><input id="konqueror" type="checkbox" name="browser" value="Konqueror" /> Konqueror KDE</label><br /> <label for="safari"><input id="safari" type="checkbox" name="browser" value="Apple" /> Safari Web Browser</label><br /> <label for="another-browser"><input id="another-browser" type="checkbox" name="browser" value="Other" /> Something Else</label> </div> </fieldset> <fieldset id="poll"> <legend>What do you use to build your Web sites?</legend> <div> <label for="golive"><input id="golive" name="editor" type="radio" value="Adobe GoLive" /> Adobe GoLive</label><br /> <label for="dreamweaver"><input id="dreamweaver" name="editor" type="radio" value="Macromedia Dreamweaver" /> Macromedia Dreamweaver</label><br /> <label for="frontpage"><input id="frontpage" name="editor" type="radio" value="Microsoft FrontPage" /> Microsoft FrontPage</label><br /> <label for="hand"><input id="hand" name="editor" type="radio" value="A Text Editor" /> Text Editor</label><br /> <label for="other"><input id="other" name="editor" type="radio" value="Other" /> Something Else</label> </div> </fieldset> </div> <div id="controls"> <input id="submit" type="submit" value="Submit Form" /> <input id="reset" type="reset" value="Clear Form" /> </div> </form> <p> Copyright © 2006-2007, The Monster Under the Bed. All Rights To Scare Unsuspecting Children Reserved. </p> </body> </html> Code (markup):
@bacanze, that's what i mean. @soulscratch, Sorry to get you in a neg. motion. Nowadays, i am too trying to avoid 2.0 but i didn't know how to explain it in plain english. And that's indeed what i was looking for. Thank you very much
@dan, that's a coincidence. i was anwering at the same time. tx, for your div/span solution and your source code to play with
No problem. Like I said, it's old (and obsolete), but it should be enough to use as a starting point for you, especially with John's article.