Para ello crearemos 2 archivos, mas adelante veremos que se puede realizar con uno solo.
Para empezar creamos el archivo html, que nombraremos como formulario.html, consistente en:
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<link rel="stylesheet" href="hojadeestilo.css">
<title>Formulario</title>
</head>
<body>
<header>
<h1>Formulario</h1>
<figure><img src="milogo.jpeg"/></figure>
</header>
<nav>
<ul>
<li><a href="index.html">Inicio</a></li><li><a href="acercade.html">Acerca de</a></li>
</ul>
</nav>
<section>
<article>
<hgroup>
<h1>Envio de datos a Php</h1>
<h2>practica</h2>
</hgroup>
<form action="datos.php" method="post" name="form">
<input type="text" name="nombre"/><br>
<textarea name="comentario"></textarea><br>
<input type="submit" value="Guardar datos"/>
</form>
</article>
</section>
<aside><h1>Siguenos en:</h1>
<ul>
<li><a href="facebook.html">Facebook</a>
</li><li><a href="twitter.html">Twitter</a></li>
</ul></aside>
<footer>
<p>Pagina creada por Ticoticotaa @2016</p>
<ul>
<li><a href="contacto.html">Contacto</a>
</li><li><a href="mapaweb.html">Mapa Web</a></li>
</ul></footer>
</body>
</html>
El ejemplo de codigo html que tomo como base para agregar el formulario lo podeis obtener de mi Blog Html5 . En dicho blog se explican las etiquetas de Html usadas y el Css.
Lo unico que añadimos aqui es el formulario entre las etiquetas article, incluyendo el nombre del archivo php al que se enviaran los datos, la forma de enviarlos (post) y el nombre de los campos que enviamos (nombre y comentario), junto con el boton que ejecuta el envio.
El siguiente codigo lo nombramos como datos.php que obtiene los datos del formulario, de la siguiente forma:
El codigo php que obtiene los datos lo marco en rojo para destacarlo, este codigo esta incrustado en el codigo html como vimos en anterior entrada, asi podemos mantener el formato de la pagina y cambiar solo el contenido que necesitamos, en este caso mostramos los datos que provienen del formulario.<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<link rel="stylesheet" href="hojadeestilo.css">
<title>Datos formulario</title>
</head>
<body>
<header>
<h1>Datos recibidos</h1>
<figure><img src="milogo.jpeg"/></figure>
</header>
<nav>
<ul>
<li><a href="index.html">Inicio</a></li><li><a href="acercade.html">Acerca de</a></li>
</ul>
</nav>
<section>
<article>
<hgroup>
<h1>Obtengo datos de Php</h1>
<h2>practica</h2>
</hgroup>
<?php
$nombre=$_POST['nombre'];
$comentario=$_POST['comentario'];
echo"<p>Los datos obtenidos son:</p><br>";
echo"nombre: ".$nombre."<br>";
echo"comentario: ".$comentario."<br>";
?>
</article>
</section>
<aside><h1>Siguenos en:</h1>
<ul>
<li><a href="facebook.html">Facebook</a>
</li><li><a href="twitter.html">Twitter</a></li>
</ul></aside>
<footer>
<p>Pagina creada por Ticoticotaa @2016</p>
<ul>
<li><a href="contacto.html">Contacto</a>
</li><li><a href="mapaweb.html">Mapa Web</a></li>
</ul></footer>
</body>
</html>
Espero os sea util.
No hay comentarios:
Publicar un comentario