Ejercicios unidad 8: Formularios



Ejercicio 1: Practicar con Formularios

Vamos a crear una página nueva con un formulario para darse de alta como usuario registrado en aulaClic. Para ello crea un archivo llamado alta_usuario.html en la carpeta ejercicios/cursos-aulaclic, que creamos anteriormente.

También debes crear una hoja de estilo en la que incluir los estilos que necesitarás para realizar el ejecicio, llámala aulaclic_formulario.css y guardarla en la carpeta ejercicios/cursos-aulaclic/css, que creamos anteriormente.

Para empezar el ejercicio copia este código que incluye la cabecera con el logo de aulaClic :

<!doctype html>
  <html lang="es">
  <head>
  <meta charset="utf-8" />
  <title>aulaClic. Alta usuario registrad</title>
  <link rel="stylesheet" type="text/css" href="css/aulaclic_formulario.css" />
  </head>
  <body>
  <a href="http://www.aulaclic.es">
<picture> <source media="(orientation: portrait) and (max-width: 500px)" srcset="graficos/logo_aulaclic_pequeno.png" >
<img src="graficos/logo_aulaclic.png" alt="logo aulaClic"> </picture>
</a> <p>Alta usuario registrado de aulaClic.</p> </body> </html>

Este ejercicio consiste en crear el formulario que aparece en esta imagen:

formulario aulaclic

 

El campo Email debe ser de tipo email, de 30 caracteres, obligatorio y el cursor se debe posicionar en él de forma predeterminada.

El campo Contraseña debe ser de tipo password y que se introducen entre 8 y 14 caracteres, debe aparecer inicialmente el mensaje "8 -14 caracteres", obligatorio rellenarlo y el tipo de entrada debe ser numeric.

El botón ha de ser de tipo button y con la imagen boton_enviar.png que está en la carpeta de ejercicios/unidad-8/cursos-aulaclic/graficos. También está la imagen logo_aulaclic.png y logo_aulaclic_pequeno.png

El cursor debe cambiar de forma al ponerlo encima del botón:

Para conseguir que el botón y los campos estén alineados les hemos dado un estilo con position: absolute; left: 130px.

Para que la imagen quede encima del botón sin que se vean los bordes le hemos dado un estilo margin-top: -3px; margin-left: -2px, además hay que hacer un poco más pequeño el tamaño del botón que el tamaño de la imagen.

 

Puedes consultar aquí las soluciones propuestas, primero intenta resolverlo sin ayuda.


Enero-2019 (V 2.0)
Atrás Volver Adelante






Página inicial  Cursos Informática Gratuitos

Síguenos en:   Facebook       Sobre aulaClic            Política de Cookies


© aulaClic S.L. Todos los derechos reservados. Prohibida la reproducción por cualquier medio.