Introducción a los formularios - Curso de PHP y MySQL - Capítulo 9

Comenzamos con un tema más interesante, los formularios. En este capítulo no vas a ver todavía como hacer un formulario completo. El objetivo es que veas como se puede enviar información a través de un simple formulario a PHP. Va a ser un par de inputs y un botón con el que poner tu nombre y apellidos. Una vez sepas obtener los valores de formularios y manejarlos en variables de PHP, podrás hacer una infinidad de cosas.

Formulario HTML

Copia y pega el siguiente formulario HTML para hacer pruebas. Lo único que tienes que hacer es guardar el archivo con extensión .php, ya que vamos a añadirle código PHP.

Uno de los requisitos que puse al curso era el de saber html, por lo tanto, no voy a explicar muchas cosas de html, algunas sí, otras no. De todas formas, si no tienes claro algo, me puedes dejar un comentario, da igual que sean preguntas básicas de html.

El siguiente formulario está creado con estilos BootStrap, por si no sabes que es, BootStrap una biblioteca muy famosa con muchos estilos CSS. Esta está enlazada en el <head>.

Puesto que esto es un formulario de pruebas, he añadido algunos estilos sobre etiquetas html. No me gusta hacer esto normalmente, pero es lo más simple y práctico en este momento.

Te he marcado la línea 51, es ahí donde colocaras el código PHP que vaya explicando.

test.php 

<!doctype html>
<html>
<head>
	<meta charset="utf-8">
	<title>Curso de PHP y MySQL</title>
	<link rel="stylesheet"
	href="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/css/bootstrap.min.css"
	integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
	crossorigin="anonymous">
</head>
<body style="margin:1em">

	<form class="form-horizontal" method="post">
		<fieldset>

			<!-- Título del formulario -->
			<legend style="margin:0.6em">Formulario INÚTIL de saludo</legend>

			<!-- Nombre -->
			<div class="form-group">
				<label class="col-md-4 control-label" for="textinput">Nombre</label>
				<div class="col-md-4">
					<input id="textinput" name="nombre" type="text"
					placeholder="Escribe tu nombre" class="form-control input-md"
					required="">
				</div>
			</div>

			<!-- Apellidos -->
			<div class="form-group">
				<label class="col-md-4 control-label" for="apellidos">Apellidos</label>
				<div class="col-md-4">
					<input id="apellidos" name="apellidos" type="text"
					placeholder="Escribe tus apellidos" class="form-control input-md"
					required="">
				</div>
			</div>

			<!-- Botón de envío -->
			<div class="form-group">
				<label class="col-md-4 control-label" for="enviar"></label>
				<div class="col-md-4">
					<button id="enviar" name="enviar"
					class="btn btn-success">Enviar</button>
				</div>
			</div>

		</fieldset>
	</form>

<!-- PON AQUÍ LAS ETIQUETAS PHP -->
</body>
</html>

Fíjate en el atributo method="post". Con esto conseguiremos enviar los datos del formulario al pulsar el botón "Enviar".

Código PHP 

<div style="margin-left:1em">
	<?php
		$nombre = $_POST["nombre"]?? null;
		$apellidos = $_POST["apellidos"]?? null;

		if($_POST){
			echo "Bienvenido/a a www.programacionfacil.org, ".$nombre." ".$apellidos.".";
		}
	?>
</div>

En las líneas 3 y 4 tenemos dos variables, una para almacenar el nombre y otra para los apellidos. Con $_POST["nombre"] o $_POST["apellidos"] obtenemos el valor del <input> con su atributo name.

?? null aún no lo explicaré, ya que es demasiado pronto. Este capítulo es más para que vayas pillándole el gusto a PHP.

Con el if, otra cosa que todavía hay que explicar, evitaremos que el echo se imprima antes de enviar el formulario. Sin él, obtendremos esto en el navegador:

Resultado en el navegador

Aparece el echo, pero los valores de las variables están vacíos, ya que aún no hemos enviado el formulario en el momento en que se interpreta el código PHP.

Bienvenido/a a www.programacionfacil.org, .

Pruebalo e intenta añadir más inputs al formulario si quieres. El resultado es el siguiente:

Resultado en el navegador

Este resultado es después de rellenar el formulario y darle a enviar.

Formulario con PHP