Formulario de contacto en HTML5 y CSS3

| diciembre 19, 2011 |
Tags: , , , , , , , , , , , , , , , , , , ,

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.

dca95 formulario contacto html5 css3 1324304030 full550 Formulario de contacto en HTML5 y CSS3

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 …
    Continua leyendo desde la fuente

    Related posts:

    1. Activar CSS3 y HTML5 en editor de Visual Studio 2010 Comparto este sencillo tutorial para activar la sensibilidad del editor...
    2. HTML5 y CSS3 en Dreamweaver CS5.5 Los desarrolladores web podemos ver una luz al final del...
    3. CSS3 en Internet Explorer 6, 7 y 8 100% funcional Hoy en día sabemos que lo de hoy es HTML...
    4. Crear un botón 3D con CSS3 En este tutorial vamos a aprender a crear un botón...

    Related posts brought to you by Yet Another Related Posts Plugin.

    Este articulo no pertenece a Shft.Info
    indexamos los artículos que se encuentran en otros sitios y los organizamos en este directorio de articulos.

Leave a Reply