Home Styling Your forms with CSS and Labels

Aug 21
2009

Styling Your forms with CSS and Labels

Posted by: admin in CSS

Tagged in: CSS

Here's how you would use the label tag and some CSS to create a stylin' form with very little markup:

<style>
label { position: absolute; text-align:right; width:130px; }
input, textarea { margin-left: 140px; }
label.check, label.radio { position:relative; text-align:left; }
</style>
<form>
<label for="name">Your Name:</label>
<input type="text" name="name" id="name" /><br />
<label for="email">Your Email:</label>
<input type="text" name="email" id="email" /><br />
<input type="checkbox" name="subscribe" id="subscribe" />
<label for="subscribe" class="check">Subscribe</label>
</form>

If you don't want to apply this styling to ALL forms on your website what I usually do is give my form an id, and then use the ID in the style sheet such as:

#myFormID input, #myFormID textarea { ... }


Comments (0)

Subscribe to this comment's feed

Write comment

smaller | bigger

busy

Want to write articles for this blog? Click Here»

Namaste!

Nirmal: Freelance web designer and developer from nepalThis is Nirmal Gyanwali, a freelance web developer from kathmandu, Nepal. Currently I'm working as a web developer at Image Channel. I am well versed with Open source CMS and portal frameworks like Joomla, Wordpress and also a Master's Degree holder in Information Technology. Please feel free to contact me if you have anything you want to discuss.

Skype ID: nirmalgyanwali
Gtalk: nirmalgyanwali
Email: info[at]nirmal.com.np

Latest Articles

None

Nirmal's Travel Photo Blog

Nirmal's Nepali Blog on Information technology

Nirmal's Programming Blog, JAVA, oracle, c++, sql, vb.net

Nirmal's Modeling portfolio, Nepali Male Model Nirmal, Glamorous Photo of Nirmal

Popular Tags

Content View Hits : 3487240