Formulario elegante

Vou mostrar como fazer um formulário ficar mas atraente usando css e algumas pequenas imagens.

Precisaremos:

• icon_user.gif
• icon_pass.gif
• bgForm.gif

HTML

<form action=”#” method=”post” name=”formLogin”>
<fieldset>
<legend>Acceso a usuarios </legend>
<p>

<label for=”username1″ accesskey=”n”>Username: </label>
<input id=”username1″ name=”username1″ tabindex=”1″ value=”" title=”username1″ type=”text”>
</p>
<p>
<label for=”password2″ accesskey=”e”>Password:</label>
<input id=”password2″ name=”password2″ tabindex=”2″ title=”password2″ type=”password2″>
</p>
<p>

<input value=”Ingresar” id=”submit3″ class=”button” tabindex=”3″ type=”submit”>
</p>
</fieldset>
</form>

CSS

.formLogin {
width: 250px;
margin:auto;
font-size:10px;
}

.formLogin fieldset {
background:#F9F9F9 url(pix/bgForm.gif);
border:1px solid #CCC;
padding: 10px;
margin: 0;
}

.formLogin fieldset legend {
color:#666;
}

.formLogin label {
display: block;
float: left;
padding: 0;
width:70px;
margin:5px 5px 5px 0px;
}

.formLogin fieldset label:first-letter {
color:#999;
}
.formLogin input {
width:50%;
border:1px solid #A0A0A0;
font-size:10px;
padding:3px 0px 3px 25px;
}
.formLogin input#username {
background:#FFF url(pix/icon_user.gif) no-repeat left;
}
.formLogin input#password {
background:#FFF url(pix/icon_pass.gif) no-repeat left;
}

.formLogin input.button {
width:95%;
background-color:#C2C7C0;
border:1px solid #A0A0A0;
padding:3px;
color:#FFF;
}

Fonte: http://www.infectedfx.net/

Este exemplo esta no link acima no arquivo compactado