FORMULARIO DE DATOS DE USUARIO EN HTML Y PHP


Vamos a resolver este ejercicio que nos pide crear un formulario desde cero, el botón registrar deberá de mostrar los datos que ingresemos en cada entrada y el botón cancelar limpiará el formulario.

1.- Crear el siguiente formulario. (5 puntos)



2.- Botones. (10 puntos)

El botón registrar mostrará los datos ingresados como en la imagen. (8 puntos)


El botón cancelar limpiará el formulario. (2 puntos)

3.- Realizar todo el procedimiento en un solo archivo. (5 puntos)

Posible solución

Creamos un archivo con nombre Ejercicio6.php

Diseño

<html>
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
</head>
<style>
</style>
<body>
<form name="Ejercicio6" method="post" action="Ejercicio6.php"> 
<table>
<tr><td colspan="2" align="center"><h2>Datos de usuario</h2></td></tr>
<tr><td>Nick de usuario: </td><td><input type="text" name="nick"></td></tr>
<tr><td>Correo: </td><td><input type="email" name="correo"></td></tr>
<tr><td>Contraseña: </td><td><input type="password" name="pass"></td></tr>
<tr><td>Pais: </td>
<td>
<select name="pais">
<option value="Perú">Perú</option>
<option value="Chile">Chile</option>
<option value="Argentina">Argentina</option>
<option value="Ecuador">Ecuador</option>
<option value="Italia">Italia</option>
<option value="Brasil">Brasil</option>
<option value="Grecia">Grecia</option>
<option value="Uruguay">Uruguay</option>
</select>
</td></tr>
<tr><td>Fecha de nacimiento: </td><td><input type="date" name="fecha"/></td></tr>
<tr><td colspan="2"><input type="checkbox" name="check1" >Recibir noticias </td></tr>
<tr><td colspan="2"><input type="checkbox" name="check2" >Recibir promociones </td></tr>
<tr><td colspan="2"><input type="checkbox" name="check3" >Aceptar las Condiciones y la política de cookies</td></tr>
<tr><td align="right"><input type="submit" value="Registrar" name="registrar"></td><td><input type="reset" name="cancelar" value="Cancelar"></td></tr>
</table>
</form>
</table>
</body>
</html>


Estilo

body{
	padding-top:20px;
	max-width: 100%;
	margin: auto;
	font: bold 16px Arial;

}
table{
	text-align:left;
	border: 2px solid black;
	margin: auto;
	
	background-color:#ECECEC;
}
td
{
font: bold 16px Arial;
padding: 5px;
}
input[type=text],input[type=date],input[type=password],
input[type=email],select
{
	width:100%;
	font: 16px Arial;
	height:30px;
}
input[type=checkbox]
{
			width:  15px; 
            height: 15px; 
}

input[type=submit],input[type=reset]
{
	font: 16px Arial;
	height:30px;
}


PHP

<?php
if(isset($_POST['registrar'])){
	
$nick = $_POST['nick'];
$correo = $_POST['correo'];
$pass = $_POST['pass'];
$pais = $_POST['pais'];
$fecha = $_POST['fecha'];

echo "
<br> El usuario es   : $nick
<br> El correo es     : $correo 
<br> La contraseña es : $pass 
<br> Pais seleccionado: $pais 
<br> Fecha ingresada  : $fecha <br>";

if (isset($_POST['check1'])){
echo "Sí - Recibir noticias <br>";
}else
{
echo "No - Recibir noticias <br>";
}
if (isset($_POST['check2'])){
echo "Sí - Recibir promociones <br>";
}else
{
echo "No - Recibir promociones <br>";
}
if (isset($_POST['check3'])){
echo "Sí - Aceptar las Condiciones y la política de cookies";
}else
{
echo "No - Aceptar las Condiciones y la política de cookies";
}
}

?>


Listo.

¿Fácil o difícil?


  • Notepad++

  • Nombre          : Ejercicio6.rar
  • Tamaño          : 1 KB




Fecha:
Etiquetas: , , , , ,