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!
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.
Comments (48 Comments)
Sorry, the comment form is closed at this time.