Formulario elegante

Vou mostrar como fazer um formulário ficar mas atraente usando css e algumas pequenas imagens.
Image Hosted by ImageShack.us
Precisaremos:

  • Image Hosted by ImageShack.us icon_user.gif
  • Image Hosted by ImageShack.us icon_pass.gif
  • Image Hosted by ImageShack.us 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;
}

Image Hosted by ImageShack.us

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

Este exemplo esta no link acima no arquivo compactado

Anúncios

Um comentário sobre “Formulario elegante

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s