Comunidad de diseño web y desarrollo en internet

¿Olvidaste tu usuario o clave? «
registrate

Cerrar

Formulario de contacto en HTML5 y CSS3

Por johnwmartinez el 19 de Diciembre de 2011 con 7,418 visitas
HTML, CSS y Javascript Otros tutoriales por johnwmartinez.

Hola a todos, espero que se encuentren muy bien. Vamos a hacer un formulario de contacto usando HTML5 y CSS3. Para este tutorial vamos a preparar dos archivos. Uno es el html (formularioContacto.html) y el otro es el archivo de estilos cascada (formularioContacto.css).

En el archivo con el html vamos a realizar toda la diagramación y la estructura de los elementos del formulario. En el archivo CSS vamos a tener todo el diseño que aplicaremos a las capas del archivo.



Estructura HTML.



A continuación, agregamos el código HTML:

Código :

<!DOCTYPE html>
<html lang=”es”>
<head>
<meta charset=”UTF-8″ />
<title>Formulario de contacto | John W. Martinez</title>
<link href=”formularioContacto.css” rel=”stylesheet” type=”text/css” media=”screen” />
</head>
<body>
<section id=”Formulario”>
<h1>Enviar mensaje</h1>
<form action=”" method=”post” enctype=”multipart/form-data” name=”formu”>
<fieldset>
<label for=”nombre”>Nombre: </label>
<input type=”text” name=”nombre” id=”nombre” placeholder=”Escriba su nombre completo” required=”" />

<label for=”correo”>Correo: </label>
<input type=”email” name=”correo” id=”correo” placeholder=”Escriba su correo electr&oacute;nico” required=”required”/>

<label for=”mensaje”>Mensaje: </label>
<textarea id=”mensaje” name=”mensaje” placeholder=”Escriba sus comentarios”></textarea>

<input type=”submit” value=”Enviar mensaje” />

</fieldset>
</form>
</section>
</body>
</html>


Explicamos algunos detalles acerca de la estructura HTML5:


  1. Usamos la etiqueta fieldset para agrupar todos los campos del formulario.

  2. A las etiquetas “label” le asignamos el atributo “for” con el ID del campo de texto que estamos relacionando.

  3. El atributo “placeholder” me permite tener un texto por defecto en cada una de las cajas de texto, las cuales al ser seleccionadas (evento focus) se borra automáticamente (esto antes se podía hacer pero usando javascript y muchas más líneas de código).

  4. La etiqueta de tipo “email” me hace una verificación automática del formato correcto de correo electrónico. Antes podía hacerse con javascript usando varias líneas de código, con HTML5 es solo agregar el type=”email” y ahorras código y tiempo.

  5. El atributo “required” me permite hacer que el campo sea obligatorio antes de activar el evento submit en el formulario. Al igual que los dos puntos anteriores, esto antes era posible con javascript, pero HTML5 me permite hacerlo solo aplicando la propiedad.


Aplicando el CSS.



El código es el siguiente:

Código :

body, section, h1, form, fieldset, input, textarea{
   margin:0; 
   padding:0; 
   border:0; 
   outline:none;
   }

html{
   height:100%;
   }

body{
   background: #728eaa;
   background: -moz-linear-gradient(top, #002c3c 0%, #2099aa 100%);
   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#002c3c), color-stop(100%,#2099aa));
   font-family: sans-serif;
   }

#Formulario {
   width: 430px; 
   margin: 60px auto; 
   padding: 60px 30px;
   background: #eee; 
   border: 1px solid #e1e1e1;
   -moz-box-shadow: 0px 0px 8px #444;
   -webkit-box-shadow: 0px 0px 8px #444;
   border-radius: 20px; 
   -moz-border-radius: 20px;
   -webkit-border-radius: 20px;
   }

h1 {
   font-size: 35px; 
   color: #445668; 
   text-transform: uppercase;
   text-align: center; 
   margin: 0 0 35px 0; 
   text-shadow: 0px 1px 0px #f2f2f2;
   }

label {
   float: left; clear: left;
   margin: 11px 20px 0 0; 
   width: 95px;
   text-align: right; 
   font-size: 16px; 
   color: #445668;
   text-transform: uppercase; 
   text-shadow: 0px 1px 0px #f2f2f2;
   }

input {
   width: 260px; 
   height: 35px; 
   padding: 5px 20px 0px 20px; 
   margin: 0 0 20px 0;
   background: #5E768D;
   background: -moz-linear-gradient(top, #002c3c 0%, #204c5c 20%); /* firefox */
   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#002c3c), color-stop(20%,#204c5c)); /* webkit */
   border-radius: 5px; 
   -moz-border-radius: 5px; 
   -webkit-border-radius: 5px;
   -moz-box-shadow: 0px 1px 0px #f2f2f2;
   -webkit-box-shadow: 0px 1px 0px #f2f2f2;
   font-family: sans-serif; 
   font-size: 16px; color: #f2f2f2;
   text-transform: uppercase; 
   text-shadow: 0px -1px 0px #334f71;
   }

input::-webkit-input-placeholder  {
   color: #ddd; 
   text-shadow: 0px -1px 0px #38506b; 
   text-transform:capitalize;
   }
   
input:-moz-placeholder {
   color: #ddd; 
   text-shadow: 0px -1px 0px #38506b; 
   text-transform:capitalize;
   }

textarea {
   width: 260px; 
   height: 170px; 
   padding: 12px 20px 0px 20px; 
   margin: 0 0 20px 0;
   background: #5E768D;
   background: -moz-linear-gradient(top, #002c3c 0%, #204c5c 20%); /* firefox */
   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#002c3c), color-stop(20%,#204c5c)); /* webkit */
   border-radius: 5px; 
   -moz-border-radius: 5px; 
   -webkit-border-radius: 5px;
   -moz-box-shadow: 0px 1px 0px #f2f2f2;
   -webkit-box-shadow: 0px 1px 0px #f2f2f2;
   font-family: sans-serif; font-size: 16px;
    color: #f2f2f2; 
   text-transform: uppercase; 
   text-shadow: 0px -1px 0px #334f71;
   resize:none;
   }
   
textarea::-webkit-input-placeholder  {
   color: #ddd; 
   text-shadow: 0px -1px 0px #38506b; 
   text-transform:capitalize;
   }

textarea:-moz-placeholder {
   color: #ddd; text-shadow: 0px -1px 0px #38506b; 
   text-transform:capitalize;
   }

input:focus, textarea:focus {
   background: #728eaa;
   background: -moz-linear-gradient(top, #204c5c 0%, #406c7c 20%); /* firefox */
   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#204c5c), color-stop(20%,#406c7c)); /* webkit */
   }

input[type=submit]{
   width: 185px; 
   height: 52px; 
   float: right; 
   padding: 10px 15px; 
   margin: 0 15px 0 0;
   -moz-box-shadow: 0px 0px 5px #999;
   -webkit-box-shadow: 0px 0px 5px #999;
   border: 1px solid #556f8c;
   background: -moz-linear-gradient(top, #002c3c 0%, #204c5c 100%); /* firefox */
   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#002c3c), color-stop(100%,#204c5c)); /* webkit */
   cursor: pointer;
   }

input[type=submit]:hover {
   width: 185px; height: 52px; 
   float: right; 
   padding: 10px 15px; 
   margin: 0 15px 0 0;
   -moz-box-shadow: 0px 0px 5px #999;
   -webkit-box-shadow: 0px 0px 5px #999;
   border: 1px solid #556f8c;
   background: -moz-linear-gradient(top, #668099 0%, #728eaa 100%); /* firefox */
   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#204c5c), color-stop(100%,#406c7c)); /* webkit */
   cursor: pointer;
   }


Este código CSS3 no es nada del otro mundo, ni algo que no hayamos visto en los tutoriales anteriores; sin embargo, explicaremos un poco sobre las funciones de este código:


  1. Es necesario aplicar “reset” a algunas etiquetas HTML que por defecto vienen con propiedades (dependiendo del explorador). En este caso, formateamos las etiquetas body, section, h1, form, fieldset, input y textarea.

  2. Luego aplicamos a todo el documento html un alto del 100%; con esto hago que el documento mida el alto de la pantalla para hacer el degradado en el fondo.

  3. Después seguimos con la etiqueta “body”, donde voy a definir un fondo degradado. Esta etiqueta es indispensable que esté aplicada tanto para mozilla como para webkit (Chrome y Safari).

  4. El siguiente es la etiqueta section, quien para este tutorial lo vamos a usar como la caja donde estará el formulario contenido. A esta caja le aplicamos un color de fondo, una sombra de caja y los bordes redondeados.

  5. Luego definimos las etiquetas label, input y textarea con bordes redondeados, colores degradados y cambio en los colores al evento focus. Además hemos agregado una nueva característica que trae CSS3 que son los selectores (o corchetes). Con esto, podemos aplicar efectos a etiquetas que tengan ciertos atributos (como el tipo, cantidad determinada de caracteres, alto, ancho, etc.).


Y bien, esto es todo por hoy, con este código no resta sino empezar a hacer pruebas y ver qué resultados salen.

Ver demo de este tutorial

Descargar archivos de este tutorial

 

 

Envia un comentario (14)

css3 html5

Publica tu comentario

o puedes...

¿Estás registrado en Cristalab y quieres
publicar tu URL y avatar?

¿No estás registrado aún pero quieres hacerlo antes de publicar tu comentario?

Registrate