Mostrando entradas con la etiqueta form. Mostrar todas las entradas
Mostrando entradas con la etiqueta form. Mostrar todas las entradas

sábado, 31 de enero de 2015

Crea tu propia página web desde cero (V)

En el capítulo anterior vimos cómo crear nuestra base de datos de ejemplo para empezar a meter datos desde la web. Ahora vamos a ver por fin cómo hacer que desde nuestro formulario web, esos datos que metíamos se guarden en esa BD, y cómo hacer para consultarlos desde la web a modo de listado de usuarios.

Lo primero de todo, crearemos una carpeta llamada protected en la raíz de nuestro proyecto, de modo que ahora tendremos las carpetas bootstrap, css, img y protected, además del fichero index.html. En esa carpeta protected meteremos los códigos PHP que serán invisibles al usuario. Estos códigos tendrán extensión .php, y serán la programación interna desde el servidor para gestionar los datos de la web entre el navegador que ve el usuario, y la base de datos. Atención: es recomendable tener nociones de programación para entender bien este capítulo, aunque se explicará cada código en la medida de lo posible, el usuario debería analizar cada línea para entender lo que hace.

En esa carpeta protected creamos un fichero llamado bd.php que contendrá la información de acceso a nuestra base de datos. Tendrá el código siguiente:

<?php
if(!defined("HOST")) define("HOST", "localhost");
if(!defined("USER")) define("USER", "root");
if(!defined("PASS")) define("PASS", "");
if(!defined("BD")) define("BD", "ejemplo");
$mysqli = new mysqli(HOST, USER, PASS, BD);
$mysqli->set_charset("utf8");
?>

Al ser código PHP, todo irá incluido entre las etiquetas <?php y ?>. Lo que hacemos en este código es decirle en qué servidor se encuentra la BD (en localhost), qué usuario y contraseña accederá a la BD (root y sin contraseña, a no ser que queramos poner más usuarios y contraseñas, lo dejamos así), el nombre de la BD (ejemplo), y se crea la base de datos con esos parámetros, además de decirle que le ponga un cotejamiento utf8 que nos será útil para poder escribir caracteres como acentos y eñes. A nivel de programación, primero comprueba "si no existe la clave HOST, define la variable HOST con el valor localhost", y así con los cuatro parámetros. Luego se crea la variable $mysqli y se le asigna un objeto mysqli (objeto de BD) con esos cuatro parámetros, y después se le asigna la codificación utf8.

Tendremos que modificar un poco nuestro formulario en el fichero index.html para que podamos elegir la asignatura y país de algún desplegable, que se deberán cargar con los datos de asignaturas y países existentes en la BD. Pero para ello crearemos antes un par de páginas nuevas desde las cuales podremos añadir a mano las asignaturas y países.

Empezamos por crear un fichero paises.php en la raíz de la web, junto a index.html. Copiamos el código entero de index.html y lo pegamos en paises.php, cambiando lo que hay en el interior del bloque <div class="cuerpo"> </div>, que será lo único que cambie, y añadimos en ese bloque el código siguiente:

<form class="form-group" id="nuevo-pais" name="nuevo-pais" action="protected/nuevo_pais.php" method="post">
<h2>Crear nuevo país</h2>
<hr>
<div class="form-group">
Nombre del país:<br>
<input type="text" class="form-control" id="nombre" name="nombre" placeholder="Nombre del país">
</div>
<hr>
<input class="btn btn-primary" class="form-control" type="submit" id="enviar" value="Guardar">
</form>
<hr/>
<h3>Países creados:</h3>
<?php
include("protected/paises.php");
?>
<a href="index.html"><-- Volver</a>

Ya tenemos un formulario para añadir países por su nombre, y un enlace para volver a la página anterior. También deberíamos añadir a index.html el código <a href="paises.php">Crear país</a> justo debajo del formulario, para poder acceder a la página de países desde el index. Además hemos incluido un fragmento de código PHP, en donde le estamos indicando que incluya el código del fichero protected/paises.php. Esto servirá para cargar aquí mismo el listado de países que vayamos creando. Esta carga de países realizada desde protected/paises.php tendrá el siguiente código:

<?php
include("bd.php");

$query = "SELECT * FROM pais";
if($result = $mysqli->query($query))
{
$resultado = "";

if(mysqli_num_rows($result) == 0)
{
$resultado = "No existen países";
}
else
{
while($linea = mysqli_fetch_array($result, MYSQLI_ASSOC))
{
$nombre_pais = $linea['nombre'];
$resultado .= $nombre_pais . "<br/>";
}
}
echo $resultado . "<br>";
}
else
{
echo "ERROR al cargar los países: " . $mysqli->error;
}
?>

Lo que hace este código en la primera línea es incluir el código de bd.php, que contiene la información sobre la BD que vamos a manipular. Después crea una sentencia SQL para seleccionar toda la información de la tabla país (se recomienda buscar en Google más información sobre sentencias SQL, en concreto las SELECT, INSERT y UPDATE). Si el resultado de ejecutar esa selección de países es correcta, crea una variable $resultado por ahora vacía, que contendrá el texto a devolver. Si el resultado de países es vacío, el texto resultado dirá que no existen países. Si no, si hubiera países, lo que hace es mientras se crea una línea por cada país, se obtiene su nombre y se añade al texto resultado. Por último, imprime el resultado con echo. Si hubiera algún error previamente al cargar los datos de la BD, imprimirá un mensaje de error.

Si nos fijamos en el formulario de países, el action del form apunta a protected/nuevo_pais.php. Así que tenemos que crear un fichero llamado nuevo_pais.php dentro de la carpeta protected. Su código incluirá lo siguiente:

<?php
include("bd.php");

if(isset($_POST['nombre']))
{
$nombre_pais = $_POST['nombre'];
$query = "INSERT INTO pais (nombre) VALUES ('$nombre_pais')";

if($result = $mysqli->query($query))
{
header("Location: ../paises.php?ok=1");
}
else
{
header("Location: ../paises.php?error=1");
}
}
else
{
header("Location: ../paises.php?error=2");
}
?>

Analicemos un poco el código. En primer lugar está incluyendo el código del fichero bd.php que creamos anteriormente, ya que es necesario saber qué base de datos vamos a manipular. Después hay una condición if, que podemos traducir en si se ha enviado el atributo nombre por POST, es decir, si se envió correctamente el nombre del país desde el formulario anterior. Si esta condición se cumple, ejecuta el bloque encerrado entre llaves: crea una variable $nombre_pais con el nombre enviado por POST, crea una variable $post con el código que inserta por SQL un país cuyo valor para su nombre será el contenido en $nombre_pais, es decir, el nombre que enviamos desde el formulario. Ojo, en esta sentencia, el nombre debe ir entre comillas, ya que se trata de tipo texto (varchar), así tenemos ('$nombre_pais'). Si quisiéramos insertar números, serían sin comillas, pero los textos y fechas van entre comillas. Después, si el resultado de ejecutar esa sentencia es correcto, volvemos a la página paises.php con un atributo ok puesto a 1. Si no, volvemos igualmente a paises.php, pero con un código de error igual a 1. Si no se cumplía la condición de haber recibido el nombre por POST, entonces vuelve a la página paises.php con otro código de error puesto a 2. Estos códigos servirán para mostrar mensajes informativos en la página de creación de países. Para mostrarlos, añadimos el siguiente código justo encima de la etiqueta <form del fichero paises.php:

<?php
if(isset($_GET['ok']))
{
echo '<p style="color: green">País añadido correctamente</p>';
}
if(isset($_GET['error']))
{
$error = $_GET['error'];

if($error == 1)
{
echo '<p style="color: red">ERROR: Hubo un problema con la base de datos</p>';
}
else if($error == 2)
{
echo '<p style="color: green">ERROR: No se envió correctamente el país</p>';
}
}
?>

Si hemos escrito bien los códigos, al acceder a localhost/Ejemplo/paises.php veremos el formulario para crear nuevos países. Podemos probar a crear varios, y comprobar el mensaje de confirmación o los mensajes de error si hubiera algún problema:


Ahora vamos a modificar el código del index.html para poder obtener los países y enviar bien todos los datos. Para empezar, hay que renombrar index.html a index.php, es decir, cambiarle la extensión, pues vamos a manipular PHP. Después, donde teníamos el bloque <select> de la nacionalidad, debemos dejarlo así:

Nacionalidad:<br>
<select id="nacionalidad" class="form-control" name="nacionalidad">
<option value="0">Elije tu país</option>
<?php
include("protected/bd.php");
$query = "SELECT * FROM pais";
$result = $mysqli->query($query);
while($linea = mysqli_fetch_array($result, MYSQLI_ASSOC))
{
$id_pais = $linea['id'];
$nombre_pais = $linea['nombre'];
echo '<option value="' . $id_pais . '">' . $nombre_pais . '</option>';
}
?>
</select>

Se podría hacer más eficiente utilizando el fichero protected/paises.php, que ya nos devolvían los países, y utilizar plantillas para añadir esos países como opciones del desplegable, pero no vamos a entrar en más complicaciones. Si todo funciona bien, ahora nuestra página principal index.php debe mostrar algo así:


Ahora vemos como en el desplegable aparecen los países que hemos creado desde la página de creación de países. Por ahora lo de las asignaturas lo vamos a dejar, os lo dejo como deberes, pues se haría igual que con los países, aunque en el formulario de registro sería interesante que se pudieran elegir varias asignaturas. Lo dejaremos como está, sólo con el nombre de usuario, email, contraseña, fecha de nacimiento y foto, aunque lo de la foto lo dejaremos para otro capítulo, ya que sería interesante hacer copias de foto y obtenerlo por su ruta, etc.

Vamos por fin a crear el fichero protected/registro.php que tendrá el código que procese los datos del usuario registrado. Contendrá lo siguiente:

<?php
if(isset($_POST['nombre']) && isset($_POST['email']) && isset($_POST['password']) && isset($_POST['pais']))
{
$nombre = $_POST['nombre'];
$email = $_POST['email'];
$password = sha1($_POST['password']);
$pais = $_POST['pais'];
$fecha_nac = "";
if(isset($_POST['fecha-nacimiento'])) $fecha_nac = $_POST['fecha-nacimiento'];
include ("bd.php");
$query = "INSERT INTO usuario (nombre, email, password, pais, fecha_nac) VALUES ('$nombre', '$email', '$password', $pais, '$fecha_nac')";
if($result = $mysqli->query($query))
{
header("Location: ../index.php?ok=1");
}
else
{
header("Location: ../index.php?error=1");
}
}
else
{
header("Location: ../index.php?error=2");
}
?>

Este código es similiar al de creación de países, pero para usuarios, y con sus atributos. Notad que para el password se ha utilizado una función sha1 hacia el password enviado, esto lo que hace es encriptarlo para que no se pueda ver desde la BD. Y la fecha de nacimiento, como no es obligatoria, depende de si se ha enviado o no, el incluirla.

Por último, vamos a crear un fichero protected/usuarios.php para obtener los datos de los usuarios, con el siguiente código, igual que para países, pero con usuarios:

<?php
include("bd.php");

$query = "SELECT * FROM usuario";
if($result = $mysqli->query($query))
{
$resultado = "";

if(mysqli_num_rows($result) == 0)
{
$resultado = "No existen usuarios";
}
else
{
while($linea = mysqli_fetch_array($result, MYSQLI_ASSOC))
{
$nombre = $linea['nombre'];
$email = $linea['email'];
$resultado .= $nombre . " - " . $email . "<br/>";
}
}
echo $resultado . "<br>";
}
else
{
echo "ERROR al cargar los usuarios: " . $mysqli->error;
}
?>

Dentro del bloque while sólo hemos incluido el nombre y email, pero podríamos poner el resto, y añadirlo al resultado con el formato y estilo que queramos (por ejemplo en bloques <p> o en una tabla, etc.)

Finalmente, vamos a ver cómo quedaría el index.php definitivo para que funcione todo el trasvase de datos y presentación de la web (sólo se incluye el contenido de su bloque <body>):

<div class="encabezado">
<h1>Mi primera web</h1>
</div>

<div class="cuerpo">
<?php
if(isset($_GET['ok']))
{
echo '<p style="color: green">Usuario creado correctamente</p>';
}
if(isset($_GET['error']))
{
$error = $_GET['error'];

if($error == 1)
{
echo '<p style="color: red">ERROR: Hubo un problema con la base de datos</p>';
}
else if($error == 2)
{
echo '<p style="color: red">ERROR: No se envió correctamente el usuario</p>';
}
}
?>
<form class="form-group" id="registro" name="registro" action="protected/registro.php" method="post">
<h2>Registro de usuario</h2>
<hr>
<h3>Introduce tus datos personales:</h3>
<div class="form-group">
Nombre de usuario:<br>
<input type="text" class="form-control" id="nombre" name="nombre" placeholder="Introduce tu nombre">
</div>
<div class="form-group">
E-Mail:<br>
<input type="email" class="form-control" id="email" name="email" placeholder="email@ejemplo.com">
</div>
<div class="form-group">
Contraseña:<br>
<input type="password" class="form-control" id="password" name="password">
</div>
<div class="form-group">
Fecha de nacimiento:<br>
<input type="date" class="form-control" id="fecha-nacimiento" name="fecha-nacimiento">
</div>
<div class="form-group">
Nacionalidad:<br>
<select id="pais" class="form-control" name="pais">
<option value="0">Elije tu país</option>
<?php
include("protected/bd.php");
$query = "SELECT * FROM pais";
$result = $mysqli->query($query);
while($linea = mysqli_fetch_array($result, MYSQLI_ASSOC))
{
$id_pais = $linea['id'];
$nombre_pais = $linea['nombre'];
echo '<option value="' . $id_pais . '">' . $nombre_pais . '</option>';
}
?>
</select>
</div>
<div class="form-group">
Foto:<br>
</div>
<input type="file" id="foto" name="foto">
<div class="form-group">
<input type="checkbox" id="acepto" name="acepto" required>
Acepto los términos y condiciones
</div>
<hr>
<input class="btn btn-primary" class="form-control" type="submit" id="enviar" value="Enviar datos">
</form>
<hr/>
<h3>Usuarios registrados:</h3>
<?php
include("protected/usuarios.php");
?>
<hr/>
<a href="paises.php">Crear país</a>
</div>

Si todo lo habéis hecho correctamente, nuestra página principal será así:



Vemos como en la parte superior aparece el mensaje de que el usuario fue añadido correctamente. Y abajo del todo aparece el listado de usuarios, que por ahora sólo es uno.

Y eso es todo por ahora. Os animo a practicar con nuevos datos, clases y atributos, así como presentar a vuestro gusto los datos que vayáis cargando. En el próximo capítulo veremos cómo subir imágenes, y cómo presentar el listado de usuarios de manera más elegante con todos sus datos y fotos.

Extra:

Crea tu propia página web desde cero (I)

domingo, 21 de diciembre de 2014

Crea tu propia página web desde cero (II)

Seguimos con esta especie de tutorial para crear nuestra propia web desde cero. En el artículo anterior vimos cómo configurar los servicios necesarios para lanzar nuestro primer proyecto web de forma local y empezar a mostrar algunos resultados a modo de texto de bienvenida. Ahora vamos a ver cómo rellenar nuestra primera página con algo más de contenido y con más elementos hasta crear nuestro primer formulario.

ATENCIÓN: Si no tienes instalado un servidor local o tuviste problemas con los pasos del artículo anterior para instalar y configurar WAMP (no te funciona Apache o PHP, etc.), puedes probar cualquier código HTML y probar sus resultados aquí:

Tryit Editor de W3Schools

Si habéis hecho los deberes y habéis practicado un poco con código HTML habréis visto que cada elemento de una web lo contienen unas etiquetas. Cada tipo de etiqueta es un elemento distinto, por ejemplo para texto, tenemos que...

<h1>Esto es un título grande</h1>
<h6>Y este es el título más pequeño, pasando por h2, h3, h4 y h5</h6>
<br>
<p>Esto es un párrafo. Y el br de arriba es un espacio en blanco</p>
<i>Esto estará en cursiva</i>
<b>Esto en negrita</b>
<u>Y esto subrayado</u>
Todo esto va junto, ya que no lo hemos encerrado en un párrafo.
<p>Y esto es un nuevo párrafo. Y bajo esto habrá una línea gracias al hr:</p>
<hr>

Podéis probar el código de arriba para ver lo que muestra. Recordad que todos los ejemplos de código que veamos aquí deben ser introducidos en el cuerpo (salvo que se diga otra cosa), es decir, entre las etiquetas <body> </body>. El ejemplo anterior mostraría lo siguiente:

Una vez dominados los elementos de texto, vamos a añadir otros elementos como botones, cuadros de texto o menús seleccionables. Estos nuevos elementos están hechos para realizar alguna acción en concreto, pero estas acciones y funciones las veremos más adelante. Por ahora sólo vamos a ver cómo añadirlas a nuestra página.

Vamos a suponer el típico ejemplo de una página de registro de usuario. Necesitamos introducir un nombre de usuario, un correo electrónico, una contraseña, elegir nuestra edad... y una vez rellenado el formulario, necesitaremos un botón para enviar esa información al servidor. Vamos a ver cada uno de estos elementos:


Los inputs son elementos que reciben alguna información, como por ejemplo un cuadro de texto, o una casilla de validación. Es algo con lo que interactuamos. Y hay de varios tipos según la versión HTML5 que estamos utilizando y que acepta nuevos modelos predefinidos, algunos de los más utilizados y que veremos son:

text: Son los clásicos cuadros de texto, donde introduciremos texto cualquiera.
number: Son cuadros de texto donde sólamente introduciremos algún número.
email: Estos cuadros de texto validarán automáticamente una dirección de correo electrónico.
password: En estos cuadros de texto se ocultarán los caracteres para introducir contraseñas.
file: Esta vez nos mostrará un botón que al pulsarlo nos permitirá seleccionar un archivo.
date: Nos mostrará un cuadro con un calendario para seleccionar una fecha.
button: Un botón cualquiera
radio: Es un botón de opción, donde sólo podemos elegir uno entre los que haya.
checkbox: Es también un botón de opción o validación, pudiendo seleccionar varios.

Ahora bien, ¿cómo hacemos en nuestro código para decidir de qué tipo queremos añadir el input, y cómo lo escribimos exactamente? Pues toca hablar de los atributos de las etiquetas. Cada etiqueta puede tener atributos para indicarle el tipo, la clase, el estilo... cosas concretas que queramos para el bloque que estamos etiquetando en ese momento. En el caso de la etiqueta <input> lo que queremos indicarle es el tipo, y así sería la manera de hacerlo:

<input type="text">

Es decir, a continuación del nombre de la etiqueta (pero siempre dentro, antes de acabar con el símbolo de cierre > ) le indicamos que el tipo será "text". Para los tipos de arriba se utiliza la palabra clave type, seguida del símbolo igual, y la palabra del tipo que queramos entre comillas. Así tendríamos también <input type="file">, <input type="button"> o lo que queramos. 

Además del tipo, hay más atributos que podemos añadir a las etiquetas. Por ejemplo, es útil y a veces necesario identificar cada elemento de manera única, para no confundirlo con otros elementos parecidos. Por ejemplo, cuando queramos rellenar un formulario, debemos identificar qué input será el que recoja el nombre, y cuál el que contenga la contraseña, etc. Para identificar cada elemento utilizamos la opción id, que como todas las opciones irá dentro de la etiqueta. Además, para que luego el servidor sepa cómo se llama cada dato que recoge, lo reconoce con la opción name, es decir, el nombre del dato. Normalmente id y name sirven para casi lo mismo, para identificar con un nombre el elemento en cuestión, la diferencia es que cada opción los identifica para un contexto distinto. Más adelante veremos en detalle estas diferencias. Por ahora vamos a ver algunos atributos que nos interesan para nuestros elementos:

type: Indica el tipo de elemento (input en este caso) como hemos visto antes.
id: Identifica un elemento con un nombre, que debe ser único en la página.
name: También identifica un elemento con un nombre único, pero esta vez es usado por el formulario para nombrar cada valor recogido. Los elementos sin nombre no serán procesados.
class: Indica que el elemento pertenece a una clase, a la que le daremos un nombre. Puede haber muchos elementos de la misma clase, útil para indicar a ese conjunto ciertas acciones o comportamientos por igual. Esto lo utilizaremos más adelante para dar estilos con CSS.
text: Podemos añadir un texto adicional al elemento.
value: Es un valor que ya predefinimos si queremos, pero que podemos modificar.
placeholder: Es un texto informativo que aparecerá sobre el cuadro de texto, pero que desaparece en cuanto escribimos.

Para ver algún ejemplo aclaratorio, veamos el siguiente código:

<input type="text" id="nombre" name="nombre" placeholder="Introduce tu nombre">
<input type="password" id="contrasena" name="contrasena">
<input type="button" id="enviar" value="Enviar datos">

Esto es lo que mostraría ese código:

Podemos ver que aparece el texto Introduce tu nombre en el primer input, esto sería el texto que pusimos en la opción placeholder. El segundo sería el de la contraseña, y si escribimos ahí, veremos los símbolos punteados que ocultan lo que escribamos, gracias a que pusimos type="password". Por último, el botón muestra el texto Enviar datos, que introdujimos en la opción value. Por otra parte vemos que los tres elementos aparecen alineados uno detrás de otro. Si queremos que aparezcan uno debajo del anterior, debemos poner cada elemento encerrado en un párrafo, o introducir espacios en blanco. También podemos añadir texto de por medio para aclarar mejor lo que vemos en pantalla. Por ejemplo:

<p>
Nombre de usuario:<br>
<input type="text" id="nombre" name="nombre" placeholder="Introduce tu nombre">
</p>
<p>
Contraseña:<br>
<input type="password" id="contrasena" name="contrasena">
</p>
<hr>
<input type="button" id="enviar" value="Enviar datos">



Vamos a ver también este elemento que utilizaremos en nuestro formulario. Los select son listados con opciones predefinidas a elegir. La forma de su código es muy sencilla:

<select id="nacionalidad" name="nacionalidad">
   <option value="0">Elije tu país</option>
   <option value="1">España</option>
   <option value="2">Resto de Europa</option>
   <option value="3">Resto del mundo</option>
</select>



Como vemos, hemos llamado e identificado a ese elemento select como nacionalidad, y dentro de las etiquetas <select></select> hemos añadido varias opciones, cada una con su etiqueta <option></option>. A su vez, estos elementos option contienen el atributo value, que indica que internamente cada opción valdrá ese valor (en este ejemplo, 0, 1, 2 y 3). Pero lo que se muestra al usuario es el texto contenido entre las etiquetas, y no esos valores numéricos. Podemos añadir el atributo selected al final de la etiqueta option que queramos, para que esa opción sea la marcada por defecto. Si no ponemos nada, la que veamos marcada al principio será la primera. Si por ejemplo queremos en el ejemplo anterior que por defecto esté marcada la opción Resto de Europa, en esa opción pondríamos:

<option value="2" selected>Resto de Europa</option>



Un elemento div es una sección de la página. Viene a ser una división por bloques de la página, como si quisiéramos trocear la web para añadir varios bloques dentro del cuerpo. Por ejemplo, nos puede interesar añadir una sección arriba que ocupe todo el ancho, para poner el título de la web. Después podemos querer tener un bloque a la izquierda que ocupe hasta abajo, para añadir un menú, y un bloque contenedor principal que ocupará el resto del cuerpo. Los divs son invisibles, son simplemente una organización de los elementos que tenemos en la página. Pero son útiles a la hora de añadir estilos con CSS, por lo que entraremos más en detalle con este elemento más adelante. Un ejemplo sería el siguiente:

<div class="encabezado">
   <h1>Mi primera web</h1>
</div>

<div class="cuerpo">
   <h2>Esto es el resto de la página</h2>
   <p>Y podemos escribir y rellenar todo el cuerpo</p>
</div>


Nótese en la figura anterior que lo marcado en rojo no se muestra, es una indicación que hago para indicar que cada una de las dos secciones div de la página contienen una parte de la página. Visualmente no se ve ni diferencia nada en este caso. Pero veremos cómo sacarle partido más adelante con los estilos.

Vamos a seguir haciendo nuestro formulario de registro. Por ahora con los elementos input y los elementos de texto que conocemos, ya tenemos para construir nuestro propio formulario. Y todo un bloque de elementos que forman un formulario deben ir a su vez en un bloque <form></form>, que lo que hará será recoger todos los datos introducidos en los inputs para enviárselos después al servidor. A esta etiqueta form también hay que pasarle algunas opciones. Por ejemplo, debemos indicarle a qué página debe dirigirse con los datos que recoja del formulario, para que el servidor trate esos datos (para guardarlos después o lo que sea). También debemos indicarle al formulario el método de recogida de datos, pudiendo ser GET o POST (más info sobre GET/POST), que son métodos del protocolo HTTP de Internet. Básicamente, GET recoge los datos por parámetros que se pasarán en la url, y POST recogerá esos parámetros de manera más oculta para el usuario. Por ejemplo, si vemos en alguna web una dirección del tipo www.ejemplo.com/enviar.php?id=1&nombre="Pepito", esto quiere decir que esa web está enviando por su página enviar.php, y a continuación envía los parámetros id y nombre con valores 1 y Pepito, respectivamente. Los parámetros se añaden tras el símbolo ? detrás de la dirección de la página, y por cada parámetro añadido, se coloca tras el símbolo &. Esto es útil a veces, pero para formularios donde introducimos información privada y contraseñas, no es recomendable, pues lo podría ver cualquiera en la barra de direcciones. Por eso en nuestro formulario utilizaremos el método POST. Esto se lo indicamos con la opción method="post" dentro de la etiqueta form

Bien, es hora de escribir un formulario completo, así que aquí tenéis el siguiente ejemplo. En algunos elementos se ha añadido el atributo required, que indica que es obligatorio introducir algún dato en ese campo antes de enviar nada. Probad por vuestra cuenta con los elementos y textos que queráis, y analizad bien lo que hace cada cosa:

<div class="encabezado">
  <h1>Mi primera web</h1>
</div>
<div class="cuerpo">
  <form id="registro" name="registro" action="registro.php" method="post">
    <h2>Registro de usuario</h2>
    <hr>
    <h3>Introduce tus datos personales:</h3>
    <p>
    Nombre de usuario:<br>
   <input type="text" id="nombre" name="nombre" placeholder="Introduce tu nombre" required>
    </p>
    <p>
    E-Mail:<br>
  <input type="email" id="email" name="email" placeholder="email@ejemplo.com" required>
    </p>
    <p>
    Contraseña:<br>
    <input type="password" id="contrasena" name="contrasena" required>
    </p>
    <p>
    Fecha de nacimiento:<br>
    <input type="date" id="fecha-nacimiento" name="fecha-nacimiento">
    </p>
    <p>
    Nacionalidad:<br>
    <select id="nacionalidad" name="nacionalidad">
      <option value="0">Elije tu país</option>
      <option value="1" selected>España</option>
      <option value="2">Resto de Europa</option>
      <option value="3">Resto del mundo</option>
    </select>
    </p>
    <p>
    Foto:<br>
    <input type="file" id="foto" name="foto">
    <p>
    <input type="checkbox" id="acepto" name="acepto" required>
    Acepto los términos y condiciones
    </p>
    <hr>
    <input type="submit" id="enviar" value="Enviar datos">
  </form>
</div>



Por ahora este formulario no hace nada. Fijaos en que el botón de enviar datos es de tipo submit, y no button. Esto hace que el elemento se convierta en un botón de envío de datos (submit en inglés), y al pulsarlo, lo que hará el formulario será dirigirse a la página registro.php que es la que hemos puesto en el atributo action de la etiqueta form, arriba. Pero aún no tenemos esa página, por lo que si pulsamos el botón nos dará un error. Más adelante veremos cómo crear una página del servidor en PHP para que recoja esos datos y haga cosas con ellos, y crearemos una pequeña base de datos para guardar esos datos.

Por ahora eso es todo. En el siguiente post veremos cómo crear estilos para que la web sea algo más bonita, y no en blanco y negro como hasta ahora. Y después veremos cómo crear una base de datos en MySQL y una página PHP que trabaje con los datos del formulario. También veremos cómo validar datos con JavaScript, pero paso a paso. Os recomiendo seguir practicando con los elementos HTML consultando la web del W3Schools y añadiendo elementos y creando plantillas o pequeñas webs de texto y otros elementos


Extra:


Prueba tu propio código HTML sin instalar nada: Tryit Editor