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.

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

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

Deja un comentario

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies ACEPTAR

Aviso de cookies