Ejercicios resueltos formularios en HTML5

Ejercicio 1. Input, text y textarea

input text textarea

<html>
<head>
<title> Ejercicio 1 </title>
</head>
<body>
<form action="ejercicio1.php" method="get">
Nombre:<input type="text" name="usuario" size="5" maxlength="30" required>
<p>
Contraseña:<input type="text" name="contraseña" size="15" maxlength="30">
<p>
Comentarios:
<br>
<textarea name="Comentarios" cols="30" rows="10"></textarea>
<p><input type="submit" value="Enviar">
<input type="reset" value="Borrar"><p>
</form>
</body>
</html>

Ejercicio 2. Input y checkbox.

<html>
<head>
<title> Ejercicio 2 </title>
</head>
<body>
<form action="ejercicio2.php" method="get">
Servicio Música:<input type="checkbox" name="musica" value="spotify" checked="checked">Spotify
<input type="checkbox" name="musica" value="last.fm">Last FM
<input type="checkbox" name="musica" value="itunes">Itunes

</form>
</body>
</html>

Ejercicio 3. Input y radio.

Input radio

<html>
<head>
<title> Ejercicio 3 </title>
</head>
<body>
<form action="ejercicio3.php" method="get">
Género:<p><input type="radio" name="genero" value="femenino" checked="checked">Femenino
<p><input type="radio" name="genero" value="masculino">Masculino

</form>
</body>
</html>

Ejercicio 4. Select y option.

Select option

<html>
<head>
<title> Ejercicio 4 </title>
</head>
<body>
<form action="ejercicio4.php" method="get">
Dispositivo para escuchar música:<p>
<select name="dispositivo">
<option value="ipod">Ipod</option>
<option value="radio">Radio</option>
<option value="ordenador">Ordenador</option>

</form>
</body>
</html>

Ejercicio 5. Submit y reset.

submit reset

html>
<head>
<title> Ejercicio 5 </title>
<meta charset="UTF-8">
</head>
<body>
<form action="ejercicio5.php" method="get">
Usuario:<input type="text" name="usuario" size="5" maxlength="30" required>
<p>
Contraseña:<input type="text" name="contraseña" size="15" maxlength="30">
<p>

<p><input type="submit" name="validar" value="Enviar">
<input type="reset" name="limpiar" value="Borrar"><p>
</form>
</body>
</html>

Ejercicio 6. File y enctype.

file

<html>
<head>
<title> Ejercicio 6 </title>
<meta charset="UTF-8">
</head>
<body>
<form action="ejercicio6.php" method="get" enctype="multipart/form-data">
<input type="file" name="adjunto">
<p><input type="submit" name="validar" value="Enviar">
<input type="reset" name="limpiar" value="Borrar"></p>
</form>
</body>
</html>

Ejercicio 7. Realiza un formulario que pida nombre, apellidos, correo-e y web. Obligatorio required.

Formularios HTML5

<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 8. Diferencias entre GET y POST. Método GET.

Método GET

<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.

Método_GET_url

Código PHP del archivo ver.php

<?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 9. Diferencias entre GET y POST. Método POST.

<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.

Método_POST

Código PHP método POST

<?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 10. Realiza en HTML5 una barra de rango.

<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 11. Crea un campo de tipo text que envíe una contraseña por post.

La contraseña debe contener al menos entre 6 y 12 caracteres o números, o bien debe ser alfanumérica.

Expresiones Regulares

<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 12. Datalist.

Realiza el siguiente datalist en HTML5

Datalist HTML5

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:

En Construcción