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

Este es el código de la solución :

<!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> <form action="#" method="get"> <label>Email: <input type="email" name="email" required autofocus size="30" /></label><br><br> <label>Contraseña: <input type="password" name="clave" size="14" required placeholder="8-14 caracteres" minlength="8" maxlength="14" inputmode="numeric" /></label> <br><br> <button><img src="graficos/boton_enviar.png" ></button> </form> </body> </html>

Esta es la página web que hemos creado:

formulario aulaclic

 

Observa que el campo Email es type=email, con size=30, required por ser obligatorio y autofocus para que el cursor se posicione en él de forma predeterminada.

El campo Contraseña es type=password y el tamaño del campo es 14, con minlength="8" y maxlength="14", inputmode="numeric", placeholder="8-14 caracteres".

La hoja de estilos aulaclic_formulario.css será similar a esta:

img { margin-top: -3px;
   margin-left: -2px }
label { color: darkred;
  font-weight: bold}
  input { position: absolute;
  left: 130px}
  button { cursor: pointer; width: 75px; height: 20px; padding:  0px; position: absolute;
  left: 130px }

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, y el tamaño del botón es de 75x20, más pequeño que la imagen que es de 80x25.

 

Puedes probar el código anterior seleccionándolo y pegándolo como se explica en esta página: Probar código desde el navegador.


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.