Tabla de Contenidos
Ejercicio 1.
Realiza un formulario que pida nombre, apellidos, correo-e y web. Obligatorio required.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<html> <head> <meta charset="UTF-8"> </head> <body> <form action="" method=""> <p>Escribe tu nombre: <input type="text" name="nombre" size="20" autofocus required/></p> <p>Escribe tus apellidos: <input type="text" name="apellidos" size="30" required/></p> <p>Escribe tu Email: <input type="email" name="email" placeholder="example@example.com" size="30" required></p> <p>Web Personal: <input type="url" name="url" placeholder="https://example.com" size="30" required></p> <input type="submit" name="enviar" value="Enviar" /> </form> </body> </html> |
Ejercicio 2.
Diferencias entre GET y POST. Método GET.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<html> <head> <meta charset="UTF-8"> </head> <body> <form action="ver.php" method="get"> <p>Escribe tu nombre: <input type="text" name="nombre" size="20" autofocus required/></p> <p>Escribe tus apellidos: <input type="text" name="apellidos" size="30" required/></p> <p>Escribe tu Email: <input type="email" name="email" placeholder="example@example.com" size="30" required></p> <p>Web Personal: <input type="url" name="url" placeholder="https://example.com" size="30" required></p> <input type="submit" name="enviar" value="Enviar" /> </form> </body> </html> |
Los parámetros se verán en la URL cuando tiquemos en el botón Enviar del formulario. Fallo de seguridad en la aplicación. Pero a veces en diferentes contextos es necesario el paso de parámetros por GET. Pero en aplicaciones de logueo de usuario y contraseña sería un fallo de seguridad.
Código PHP del archivo ver.php
|
1 2 3 4 5 6 7 8 9 10 |
<?php $nom=$_GET["nombre"]; $ape=$_GET["apellidos"]; $email=$_GET["email"]; $url=$_GET["url"]; echo "El nombre recibido es: $nom, "; echo "los apellidos son: $ape, "; echo "el email es: $email"; echo "y la web es: $url"; ?> |
Ejercicio 3.
Diferencias entre GET y POST. Método POST.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<html> <head> <meta charset="UTF-8"> </head> <body> <form action="ver.php" method="post"> <p>Escribe tu nombre: <input type="text" name="nombre" size="20" autofocus required/></p> <p>Escribe tus apellidos: <input type="text" name="apellidos" size="30" required/></p> <p>Escribe tu Email: <input type="email" name="email" placeholder="example@example.com" size="30" required></p> <p>Web Personal: <input type="url" name="url" placeholder="https://example.com" size="30" required></p> <input type="submit" name="enviar" value="Enviar" /> </form> </body> </html> |
Si empleamos en método POST los parámetros no se ven a través de la URL. Ahora la URL va limpia.
Código PHP método POST
|
1 2 3 4 5 6 7 8 9 10 |
<?php $nom=$_POST["nombre"]; $ape=$_POST["apellidos"]; $email=$_POST["email"]; $url=$_POST["url"]; echo "El nombre recibido es: $nom, "; echo "los apellidos son: $ape, "; echo "el email es: $email"; echo "y la web es: $url"; ?> |
Ejercicio 4.
Realiza en HTML5 una barra de rango.
|
1 2 3 4 |
<form oninput="valor.value=parseInt(range.value)"> <input type="range" name="range" min="0" max="10" value="0"></input> <output for="valor" name="valor">0</output> </form> |
Ejercicio 5.
Crea un campo de tipo text que envíe una contraseña por post.
La contaseña debe contener al menos entre 6 y 12 caracteres o números, o bien debe ser alfanumérica.
|
1 2 3 4 5 |
<form action="" method="post"> <input type="text" name="usuario" id="usuario" placeholder="Introduce entre 6 y 12 caracteres" pattern="[A-Za-z0-9]{6,12}" required></input> <input type="submit" value="Enviar"> </form> |
Como podéis comprobar aparece pattern, sería para realizar expresiones regulares.
- [A-Za-z0-9] –> aceptaría de la A a la Z, de la a a la z y del 0 al 9
- {6,12} –> solamente aceptaría entre 6 y 12 valores
Ejercicio 6.
Realiza el siguiente datalist en HTML5
|
1 2 3 4 5 6 7 8 |
Provincia: <input name="provincia" type="text" list="provincias"> <datalist id="provincias"> <option value="Albacete"> <option value="Ciudad Real"> <option value="Cuenca"> <option value="Guadalajara"> <option value="Toledo"> </datalist> |
En breve pondré más ejercicios resueltos:
