Form paginado: revisión final
Revisión final
Ya teníamos enlazado el archivo CSS, solo queda enlazar el archivo con las rutinas Javascript.
Colocamos el enlace justo antes de cerrar el apartado body. De esta manera el script no interrumpe la carga de la página y cuando se ejcuta el documento está cargado.
También se puede poner en head pero al script le añadimos el atributo defer. Este atributo hace que el navegador no detenga la carga del documento mientras carga el script y que este se ejecute cuando el documento se haya cargado
<head><script src="formpag.js " defer></script></head>
Pasamos a revisar el archivo HTML, CSS y el Javascript. En este repaso debemos detectar si existe algún detalle olvidado, algo que mejorar...
Para probar que todo funciona correctamente necesitamos el programa para procesar los datos del formulario.
Este programa php va a recibir los datos y los mostrará en la página final o de salida que se menciona en el diagrama de flujo
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Registro de datos</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
html {
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif"
}
.caja {
align-items: center;
display: flex;
flex-direction: column;
justify-content: center;
margin: 0 auto;
width: 40%;
}
table {
width: 100%;
margin: 0 auto;
display: table;
}
table td{
padding: 8px 8px;
}
tr td:first-child{
font-weight: 600;
}
table tr:nth-of-type(2n+1) {
background: #ededed;
}
table tr:nth-of-type(2n) td {
border-right: 1px solid #ededed;
}
table caption {
caption-side: top;
text-align: center;
font-weight: bold;
font-size: 2rem;
}
tr td:first-child{
width: 20%;
}
tr td:last-child{
width: 80%;
}
</style>
</head>
<body>
<?php
error_reporting( 0 );
function cleanData( $dato ) {
$dato = trim( $dato );
$dato = htmlspecialchars( $dato );
return $dato;
}
foreach ( $_POST as $clave => $valor ) {
$CLEAN_DATA[ $clave ] = cleanData( $valor );
}
?>
<section class="caja">
<table class="table table-striped">
<caption> Datos recibidos </caption>
<tr>
<td>Nombre</td>
<td><? echo $CLEAN_DATA['nombre']?></td>
</tr>
<tr>
<td>Alias</td>
<td><? echo $CLEAN_DATA['alias']?></td>
</tr>
<tr>
<td>Password</td>
<td><? echo $CLEAN_DATA['password']?></td>
</tr>
<tr>
<td>Email</td>
<td><? echo $CLEAN_DATA['email']?></td>
</tr>
<tr>
<td>Calle</td>
<td><? echo $CLEAN_DATA['calle']?></td>
</tr>
<tr>
<td>Ciudad</td>
<td><? echo $CLEAN_DATA['ciudad']?></td>
</tr>
<tr>
<td>CP</td>
<td><? echo $CLEAN_DATA['codpostal']?></td>
</tr>
<tr>
<td>Teléfono</td>
<td><? echo $CLEAN_DATA['telefono']?></td>
</tr>
<tr>
<td>Web</td>
<td><? echo $CLEAN_DATA['web']?></td>
</tr>
<tr>
<td>Facebook</td>
<td><? echo $CLEAN_DATA['facebook']?></td>
</tr>
<tr>
<td>Twitter</td>
<td><? echo $CLEAN_DATA['twitter']?></td>
</tr>
<tr>
<td>Linkedin</td>
<td><? echo $CLEAN_DATA['linkedin']?></td>
</tr>
</table>
</div>
</body>
</html>
Reúne todos los códigos que hemos ido viendo en cada etapa, prepara los archivos y comprueba que todo funciona correctamente.
Comentarios
El último paso requiere una comprobación para
- No se olvidó nada
- Los enlaces a archivos css y js son correctos
- Incorporar mejoras tanto a html, css como a los scripts.
Una vez hecho esto pasamos a probar la página.
Desmos intentar cometer errores al rellenar el formulario para comprobar que los scripts lo detectan y no se producen situaciones no previstas.
Si ves algún error usa la consola de desarrolladores del navegador (F12) para:
- Depurar los scripts
- Depuar los estilos CSS
- Depurar el código HTML
Desde esa consola puedes introducir cambios a la página que se reflejan inmediatamente.