Formulario de Contacto en HTML5 y CSS3

Formulario de contacto en HTML5 y CSS3
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 diagramacin y la estructura de los elementos
del formulario. En el archivo CSS vamos a tener todo eldiseo que aplicaremos a las capas del
archivo.
Estructura HTML.
A continuacin, agregamos el cdigo HTML:
Cdigo :
<!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ó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 automticamente (esto antes se
poda hacer pero usando javascript y muchas ms lneas de cdigo).
4.
La etiqueta de tipo email me hace una verificacin automtica del formato correcto de
correo electrnico. Antes poda hacerse con javascript usando varias lneas de cdigo, con
HTML5 es solo agregar el type=email y ahorras cdigo 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 cdigo es el siguiente:
Cdigo :
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, colorstop(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-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, colorstop(0%,#002c3c), color-stop(20%,#204c5c)); /* 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-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;
textarea {
width: 260px;
height: 170px;
padding: 12px 20px 0px 20px;
margin: 0 0 20px 0;
background: #5E768D;
firefox */
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-shadow: 0px -1px 0px #334f71;
resize:none;
}
textarea::-webkit-input-placeholder
color: #ddd;
}
textarea:-moz-placeholder {
color: #ddd; text-shadow: 0px -1px 0px #38506b;
}
input:focus, textarea:focus {
background: #728eaa;
firefox */
}
input[type=submit]{
width: 185px;
height: 52px;
float: right;
padding: 10px 15px;
margin: 0 15px 0 0;

border: 1px solid #556f8c;
firefox */
cursor: pointer;
}
input[type=submit]:hover {
width: 185px; height: 52px;
float: right;
padding: 10px 15px;
margin: 0 15px 0 0;
border: 1px solid #556f8c;
background: -moz-linear-gradient(top, #668099 0%, #728eaa 100%); /*
firefox */
cursor: pointer;
}
Este cdigo 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 cdigo:
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.
Despus 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. Adems hemos agregado una nueva
caracterstica 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 cdigo no resta sino empezar a hacer pruebas y ver qu
resultados salen.

Formulario de Contacto en HTML5 y CSS3

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Formulario de Contacto en HTML5 y CSS3

Uploaded by

Copyright:

Available Formats

Formulario de contacto en HTML5 y CSS3

<label for=correo>Correo: </label>

<label for=mensaje>Mensaje: </label>

<input type=submit value=Enviar mensaje />

Explicamos algunos detalles acerca de la estructura HTML5:

body, section, h1, form, fieldset, input, textarea{

background: -moz-linear-gradient(top, #002c3c 0%, #204c5c 20%); /*

-webkit-box-shadow: 0px 0px 5px #999;

You might also like