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

    This entry was posted on Saturday, August 18th, 2007 at 8:32 pm and is filed under Tutoriale CSS. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

    2 Comentarii »

    1. CSS Table-less Form on September 3rd, 2007 at 11:30 am:

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

    2. dividinglimits on September 18th, 2007 at 1:09 am:

      Nice Logo

    Lasa un comentariu sau Parerea ta despre acest subiect

    Trebuie sa te autentifici pentru a lasa un comentariu.