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 (Ver tutorial) 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 …ver más…

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: 1px 1px 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: