Tutoriale Web Design, Wordpress si SEO

Tutoriale Web Design:CSS, Dreamweaver, Photoshop, Web 2.0 dar si Tutoriale Wordpress si SEO

CSS Tableless Form

Autor admin • Aug 18th, 2007 • Categorie: Tutoriale CSS • Comentarii « 2 Comentarii »

Knowing CSS, you are able to create a form without using tables. A form that does not use tables for its layout is much more lightweight and easily.

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

The HTML code:

<form action=”#”>
<fieldset>
<legend>This is my 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=”e-mail”>E-mail Address</label> <input type=”text” id=”e-mail” /><br /></p>
<p>
<label for=”comments”>Feedback:</label>
<textarea id=”comments” rows=”5″ cols=”18″></textarea>
</p>
<p class=”submit”><input type=”submit” value=”Submit” /></p>
</fieldset>
</form>

The CSS code is much more easier:

label
{
 width: 9em;
 float: left;
 text-align: left;
 margin-right: 0.5em;
 display: block;
 color: #990000;
 font-weight: bold;
 font-family: Verdana, Arial, Helvetica, sans-serif;
 font-size: 12px;
}

.submit input
{
margin-left: 4.5em;
}
input
{
 color: #781351;
 background: #CCCCCC;
 border: 1px solid #781351;
}

.submit input
{
color: #000;
background: #ffa20f;
border: 2px outset #d7b9c9
}
fieldset
{
border: 1px solid #781351;
width: 20em
}

legend
{
color: #fff;
background: #ffa20c;
border: 1px solid #781351;
padding: 2px 6px
}
.textarea{
width: 250px;
height: 150px;
}


This is my contact form


Articole asemanatoare:

  • Formular cu CSS
  • Scroll Bar CSS
  • Submit
  • Form in Dreamweaver
  • Search intr-o tema wordpress
  • admin is Ana Design. V-a placut tot ce v-am recomandat in tutorial? Atunci nu uitati sa faceti un link catre articol si bookmark it!
    Email this author | Toate articolele scrise de admin

    2 Comentarii »

    1. […] © 2007 Anadesign.info. All rights reserved. Article Source […]

    2. Nice Logo

    Lasa un comentariu sau Parerea ta despre acest subiect

    Trebuie sa te autentifici pentru a lasa un comentariu.