Juan Manuel Martes, 10 de Junio de 2008 a las 08.40

Formularios hechos sólo con CSS (sin usar tablas HTML)

CSS, html, código, formulario, tabla, formulario CSS

Formularios hechos sólo con CSS (sin usar tablas HTML) Algunos diseñadores odian las tablas en HTML y se preguntan cuál será la mejor forma de diseñar formularios con CSS pura y exclusivamente, emulando la disposición de los elementos que anteriormente pertenecían a celdas dentro de filas y columnas.

Sinceramente, las tablas son el modo más simple de hacer un formulario (¡no son tan malas después de todo! ^_^) pero para todos los fanáticos de los estilos les voy a dejar el código que necesitan para hacer un formulario sólo con CSS.

Cómo hacer un formulario sólo con CSS

Copia el siguiente código HTML dentro del tag <body> de tu página web:

<div id=”stylized” class=”myform”>
<form id=”form” name=”form” method=”post” action=”index.html”>
<h1>Sign-up form</h1>
<p>This is the basic look of my form without table</p>

<label>Email
<span class=”small”>Add a valid address</span>
</label>
<input type=”text” name=”email” id=”email” />

<label>Password
<span class=”small”>Min. size 6 chars</span>
</label>
<input type=”text” name=”password” id=”password” />

</form>
</div>

Para que se entienda a qué responde cada elemento, veamos la siguiente imagen:

Formularios hechos sólo con CSS, sin usar tablas HTML

Ahora copia el código CSS que ves a continuación, dentro del <head> de la página:

body{
font-family:”Lucida Grande”, “Lucida Sans Unicode”, Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
}
p, h1, form, button{border:0; margin:0; padding:0;}
.spacer{clear:both; height:1px;}
/* ———– My Form ———– */
.myform{
margin:0 auto;
width:400px;
padding:14px;
}

/* ———– stylized ———– */
#stylized{
border:solid 2px #b7ddf2;
background:#ebf4fb;
}
#stylized h1 {
font-size:14px;
font-weight:bold;
margin-bottom:8px;
}
#stylized p{
font-size:11px;
color:#666666;
margin-bottom:20px;
border-bottom:solid 1px #b7ddf2;
padding-bottom:10px;
}
#stylized label{
display:block;
font-weight:bold;
text-align:right;
width:140px;
float:left;
}
#stylized .small{
color:#666666;
display:block;
font-size:11px;
font-weight:normal;
text-align:right;
width:140px;
}
#stylized input{
float:left;
font-size:12px;
padding:4px 2px;
border:solid 1px #aacfe4;
width:200px;
margin:2px 0 20px 10px;
}
#stylized button{
clear:both;
margin-left:150px;
width:125px;
height:31px;
background:#666666 url(img/button.png) no-repeat;
text-align:center;
line-height:31px;
color:#FFFFFF;
font-size:11px;
font-weight:bold;
}