Es lo primero que tendremos que realizar: el formulario desde el que vamos a enviar nuestros datos. Es te es el contenido de nuestro archivo index.html.

Con esto obtendremos un resultado tal que así:

Espero que los comentarios sean bastante aclaratorios

<!DOCTYPE html>
<!--[if lt IE 7]>
<html class="ie6 lt-ie7 lt-ie8 lt-ie9 no-js" lang="es">
<![endif]-->
<!--[if IE 7]>
<html class="ie7 lt-ie8 lt-ie9 no-js" lang="es">
<![endif]-->
<!--[if IE 8]>
<html class="ie8 lt-ie9 no-js" lang="es">
<![endif]-->
<!--[if (gte IE 9) | !(IE) ]><!-->
<html class="no-js" lang="es">
<!--<![endif]-->
<head>
<!-- Arriba: hacks para IE ;) -->
<title>Formulario de contacto</title>
<!--
Charset (juego de caracteres para que se vean las tildes, etc)
-->
<meta charset="UTF-8">

<!--
Viewport (la usan los móviles para calcular el ancho de las páginas)
-->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />

<!--
Referencia a nuestros archivos CSS
-->
<link rel="stylesheet" type="text/css" href="css/reset.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<!--
Referencia a modernizr (en el head)
script.js => encima de </body>,
para acelerar la carga
y evitar conflictos con el DOM
-->
<script type="text/javascript" src="js/modernizr.js"></script>

</head>
<body>
<div id="container">

<!--
Aquí pondremos los errores (de existir alguno)
-->
<div id="error"></div>

<!--
Definimos el método de envío (POST hace que nuestros datos no se puedan ver desde
el navegador, que es lo más seguro), y la URL a la que enviarlo (post.php)
-->
<form id="formulario" name="formulario" method="POST" action="post.php">
<!--
El nombre
-->
<p>
<label for="nombre">Nombre</label><span class="requerido">*</span>
<input type="text" name="nombre" id="nombre" size="30" required placeholder="Nombre">
</p>
<!--
El e-mail
-->
<p>
<label for="email">e-mail</label><span class="requerido">*</span>
<input type="email" name="email" id="email" placeholder="Introduce tu e-mail" required>
</p>
<!--
El mensaje
-->
<p>
<label for="mensaje">Mensaje</label><span class="requerido">*</span>
<textarea id="mensaje" name="mensaje" placeholder="El asunto" rows="8" required></textarea>
</p>
<p class="submit">
<input type="submit" id="submit" value="Enviar">
</p>
</form>
<!--
Aquí pondremos el mensaje cuando enviemos el mensaje
-->
<div id="correcto"></div>
</div>
<script type="text/javascript" src="js/script.js"></script>
</body>
</html>

Toda la serie:

Un pensamiento en “Creando un formulario de contacto con PHP y Javascript [2]: El HTML

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Puedes usar las siguientes etiquetas y atributos HTML:<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre data-language=""> <ul> <ol> <li>
Para poner código usa <pre data-language="[lenguaje]"><code>[código]</code></pre>, y no olvides escapar el HTMl.