Bio0Logia

Tutorial – Formulario de contacto en HTML5 Y CSS3
By Johansoon agosto 14, 2012in Css3, Html5 / 6 comments
* digg
*
*
13

EmailShare
* Sharebar
* digg
*
* 13EmailShare
En este nuevo tutorial vamos a crear un simpático formulario de contacto para usarlo en nuestra web, Hace algun tiempo realizamos un tutorial de las nuevas propiedades de formularios en HTML5 (Vertutorial) lo vamos a hacer con las nuevas etiquetas de HTML5 y también vamos a necesitar la ayuda de CSS3 para lograr una buena y dinámica apariencia.
Esto es lo que vamos a Lograr:

Este formulario tendrá buena apariencia en IExplorer de 8 y versiones anteriores pero en las versiones modernas de los navegadores se verá muy cool.
Ahora si comencemos:-------------------------------------------------
1 – El html
1234567891011121314151617181920212223242526 | <form class="contact_form" action="#" method="post"><ul><li><h2>Contáctanos</h2></li><li><label for="name">Nombre:</label><input type="text" placeholder="Johan Ricardo" required /></li><li><label for="email">Email:</label><input type="email"name="email" placeholder="jricardo@ejemplo.com" required /></li><li><label for="website">Sitio Web:</label><input type="url" name="web" placeholder="http://tutosytips.com" required /></li><li><label for="Mensaje">Mensaje:</label><textarea name="Mensaje" cols="40" rows="6" required ></textarea></li><li><buttonclass="submit" type="submit">Enviar</button></li></ul></form> |
En el html tenemos la forma del formulario, dentro de la etiqueta <form> y con una clase para darle un estilo, dentro tenemos una lista desordenada <ul> y cada elemento <li> será un campo para el formulario, esto lo podemos hacer con <div>, <p> o tablas, pero en este casoutilizaremos los ítems de la lista <li>. Especificamos los diferentes tipo de <input> para cada campo, ejemplo <input type=”url”> que nos especifica que ese campo es para una dirección de web, y cada campo lo asociamos con su respectivo <label> para definirlo todos los campos son requeridos por que tienen la propiedad required y por medio de los placeholder de cada campo especificamosel valor esperado de cada campo de entrada. Básicamente el código de un formulario html5 básico.
Esto es lo que llevamos al momento.

-------------------------------------------------
2 – El Css
1234567891011 | .contact_form h2 {background: none repeat scroll 0 0 #F3F3F3;border-radius: 5px;color: #5CD053;display: block;font-family: sans-serif;font-size: 20px;padding: 5px;text-shadow: 1px1px 1px #CCCCCC;width: 433px;} |

Este código css fue para darle un poco de estilo al título h2 que está dentro del formulario.
123456789101112 | /*--- estilos para los ul y li del formulario ---*/.contact_form ul {width:750px;list-style-type:none;margin:0px;padding:0px;}.contact_form li{padding:12px; border-bottom:1px solid #eee;position:relative;} |
Aplicamos los estilos para los <li> y<ul> del formulario que son los contenedores de cada campo con su label, damos una anchura a la lista y quitamos los margin y padding y de igual posicionamos los ítems <li> y colocamos bordes debajo de cada <li>.
1234567891011 | .contact_form label {color: #555555;display: inline-block;float: left;font-family: sans-serif;font-size: 13px;font-weight: bold;margin-top:3px;padding: 3px;width: 90px;} |
estilos para los lebel da cada <li>

123456789101112 | .contact_form input {height:20px; width:220px; padding:5px 8px;}.contact_form textarea {padding:8px; width:300px;}.contact_form button {margin-left:90px;} |
Con el anterior código damos estilos a los <input>, damos un ancho, alto y padding, de igual manera al textarea y al botón de enviar la damos un...