Saltar al contenido principal

HTML & CSS:
Curso práctico avanzado

Ejercicios - Formularios 1

Enunciado

Crea una página web que contenga un formulario con los siguientes campos de información:

  • El nombre, con un control de tipo texto.
  • Los apellidos, con un control de tipo texto.
  • El sexo, con dos opciones excluyentes hombre o mujer.
  • El correo electrónico, con un control de tipo texto.
  • Una casilla de verificación con el texto "Deseo recibir información sobre novedades y ofertas".
  • Una casilla de verificación con el texto "Declaro haber leido y aceptar las condiciones generales del programa y la normativa sobre protección de datos".
  • Un botón de envío.

Además, tienes que tener en cuenta los siguientes requisitos:

  • El título de la página debe ser Formulario de registro - Mi web.
  • El método de envío del formulario debe ser GET.
  • El destino del envío del formulario debe ser "".
  • La longitud máxima de entrada de datos de los controles para el nombre y los apellidos debe ser 50 caracteres.
  • La casilla de verificación con el texto "Deseo recibir información sobre novedades y ofertas" debe estar activada por defecto.

Debes crear una página web que tenga el mismo aspecto que la siguiente imagen:

Captura de pantalla del ejercicio

Solución

<!DOCTYPE html>
<html>
<head>
<title>Formulario de registro - Mi web</title>
</head>
<body>

<h1>Formulario de registro</h1>

<form action="" method="get">
<p>
Nombre: <input type="text" name="nombre" maxlength="50" />
</p>

<p>
Apellidos: <input type="text" name="apellidos" maxlength="50" />
</p>

<p>
Sexo: <input type="radio" name="sexo" value="h" /> hombre <input type="radio" name="sexo" value="m" /> mujer
</p>

<p>
Correo: <input type="text" name="correo" maxlength="100" />
</p>

<p>
<input type="checkbox" name="info" checked="checked" /> Deseo recibir información sobre novedades y ofertas
</p>

<p>
<input type="checkbox" name="condiciones" /> Declaro haber leido y aceptar las condiciones generales del programa y la normativa sobre protección de datos
</p>

<p>
<input type="submit" value="Enviar" />
</p>
</form>

</body>
</html>