NavigationCSS Table-less Form
Hi since you're new here, you may want to subscribe to our RSS feed to get convenient updates.. Thanks for visiting!
CSS Table-less Form
Learn how to create a table-less css form. Knowing CSS, one is able to create a form without using tables, but labels. Some time ago I used to believe that to properly mark up a form you need a table but after learning CSS I realized that one can create a form that does not use tables for its layout.
Here’s how you would use the label tag and CSS to create a form with very little markup:
The HTML code, between <body> </body> tags:
<form action=”#”>
<fieldset>
<legend> This is a contact form</legend>
<p><label for=”name”> First Name</label> <input type=”text” id=”name” /></p>
<p><label for=”name”> Last Name</label> <input type=”text” id=”name” /></p>
<p><label for=”email”>E-mail Address</label> <input type=”text” id=”mail” /><br /></p>
<p>
<label for=”comments”>Comments:<
<textarea name=”comments”></textarea>
<br />
<p>
<label for=”terms”>Agree to Terms?</label>
<input type=”checkbox” id=”terms” class=”boxes” />
</p>
<p>
<input type=”submit” value=”Submit” /> <input type=”reset” value=”Reset” />
</p>
</fieldset>
</form>
The CSS code is much easier:
Label {
- width: 9em;
- float: left;
- text-align: left;
- margin-right: 0.5em;
- display: block;
- color: #666666;
- font-weight: bold;
- font-family: Geneva, Arial, Helvetica, sans-serif;
- font-size: 12px;
}
.submit input {
- margin-left: 4.5em;
}
input {
color: #000000;
background: #CCCCCC;
border: 1px solid #0033FF;
font-weight: bold;
}
.submit input {
- color: #000;
- background: #ffa20f;
- border: 2px outset #d7b9c9
}
Fieldset {
- border: 1px solid #000066;
- width: 20em
}
Legend {
color: #fff;
border: 1px solid #000066;
padding: 2px 6px;
background: #0099FF;
font-weight: bold;
}
.textarea {
- width: 250px;
- height: 150px;
}
br{
- clear: left;
}
© 2007 Anadesign.info. All rights reserved. Article Source
Ana Design is a web designer and a search engine analyst and consultant. She keeps up to date on the latest trends in Web Design and SEO. She maintains a blog in English and Romanian language that provides search engine optimization advice along with other interesting articles centered on internet marketing and web design.
Want to increase visibility of your website and demonstrate your own expertise in website design? Find out how to submit a website design tutorial to Ace Design.
Comment on this article/tutorial
You must be logged in to post a comment.
