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 ejercicio, 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="https://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:
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.
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.