|
Aug 21
2009
|
|
|
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 { ... }
<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 { ... }

Styling Your forms with CSS and Labels





