Hace unas semanas os contamos como se podía hacer un formulario con HTML5 y hoy le daremos un formato más atractivo gracias al CSS3, ese lenguaje ideal para conseguir un buen diseño con un código hecho en HTML5. Así que vamos a contaros como Darle diseño a un Formulario sencillo con HTML5 y CSS3.
Evidentemente no vamos a hacer una virguería de diseño, ni nada complejo, solo unas nociones básicas para que no sea HTML5, puro y duro. Para ello, y aunque se puede hacer insertando el código CSS directamente en el archivo html, nosotros preferimos crear un archivo a parte al que tradicionalmente se llama style.css y hay que indicarle al html donde encontrar este archivo. Para ello eh <head> le indicamos la ruta hasta el css, en nuestro caso css/style.css porque hemos colocado el archivo dentro de una carpeta llamada css y quedarí así:
<link rel="stylesheet" href="css/style.css">
Además de esta linea nosotros hemos visto conveniente añadir enun div que engloba todo el formulario, que utilizaremos para darle diseño:
<div id=”contact-form”>
(…formulario…)
</div>
Si pasamos al archivo style.css es donde empezamos a darle diseño al Formulario sencillo con HTML5 y CSS3. Lo primero de todo es resetear todos los elementos estándar como html, body, form, h1, etc. Solo los que aparezcan en nuestro formulario. En nuestro casi será h2, h4 y body:
body, h2, h4{
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
Y elegimos la fuente de la letra que usaremos:
body{
font:13px/1.231 sans-serif;
*font-size:small;
}
select, input, button{
font:99% sans-serif;
}
A continuación configuramos los títulos que usaremos y el tamaño de letra:
h2{
margin-bottom:15px;
font-style:italic;
font-weight:normal;
font-size:32px;
}
h4{
font-weight: bold;
}
#contact-form input,#contact-form select,#contact-form label{
font-size:15px;
margin-bottom:2px;
}
Le daremos un estilo al fondo del formulario con:
#contact-form {
background-color:#e6eded;
width:460px;
padding:20px;
margin: 50px auto;
border: 6px solid #00B97F;
-moz-border-radius:15px;
-webkit-border-radius:15px;
border-radius:15px;
position:relative;
}
Destacar que hemos utilizado algunas nuevas funcionalidades de esta versión de CSS como las esquinas redondeadas con border-radius. También personalizaremos los bordes de cada caja, primero la normal y a continuacion con focus para la que esté seleccionada en ese momento
#contact-form input, #contact-form select{
width:450px;
border: 1px solid #00B97F;
margin-bottom:20px;
padding:4px;
}
#contact-form input:focus, #contact-form select:focus{
border: 1px solid #2DAFC5;
background-color: #CCE8DF;
}
Para la estrella que indica que un campo obligatorio también tenemos que darle un color determinado:
#contact-form .required{
font-weight:bold;
color:#F00;
}
Y el botón de enviar lo personalizamos diferente para sus tres posiciones: Normal, poner el ratón encima y presionar con el botón:
#contact-form #submit-button{
width: 100px;
padding: 10px;
background-color:#333;
color:#FFF;
border:none;
display:block;
float:right;
margin-bottom:0px;
margin-right:6px;
background-color:#00B97F;
-moz-border-radius:15px;
-webkit-border-radius:15px;
border-radius:15px;
}
#contact-form #submit-button:hover{
background-color: #2DAFC5;
}
#contact-form #submit-button:active{
position:relative;
top:1px;
}
Y por perfilar terminaremos poniendo en cursiva la frase “rellenar obligatoriamente” con:
#req-field-desc{
font-style:italic;
}
Con esto tenemos nuestro Formulario sencillo con HTML5 y CSS3 al que le hemos dado un diseño personalizado y más atractivo para los visitantes de nuestra página web. Aunque no hemos entrado en detalle a analizar cada atributo, podemos resolver las dudas que tengáis.
Ahora que le hemos dado un diseño al formulario, sería el momento de darle seguridad y reglas de uso con JavaScript.
Pero de momento hasta aquí: Cómo darle diseño a un formulario sencillo con HTML5 y CSS3. Podéis verlo en funcionamiento en la siguiente demo.
Imagen encontrada en www.clevertech.biz