Embed Size (px)
Citation preview
Cómo hacer un formulario de ingreso desplegablePublicado por Jorge Nitales en CSS, Destacado, Diseño Web, HTML, JQuery el 05 Agosto 2010 | 4 Comentarios
Hoy vamos a ver un pequeño truquillo para mejorar tu sitio web, veremos como crear un formuario de ingreso desplegable al
momento de hacer click en algún lugar y que además se esconda si volvemos a hacer click. Con esto evitaremos la carga de
una página para que los usuarios puedan acceder al sitio.
Para ver Cómo lo hago y que necesito, vamos después del salto.
Cómo hacer un formulario de ingreso desplegable
Información del Tutorial Dificultad: Baja
Tiempo de Realizacíon: 30 min
¿Qué necesito? Un editor web
Conocimiento básico en HTML. Recomendamos esta saga
Conocimiento básico en CSS. Recomendamos esta saga
¿Cómo Lo Hago?
1.- Necesitamos crear una página HTML básica donde usemos hojas de estilo, que contenga nuestro menú donde una de las
opciones sea “Login”, “Ingresar” o lo que ustedes prefieran.
En este caso haremos lo siguiente:
En HTML:
texto plano copiar codigo imprimir ? 1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/
xhtml1/DTD/xhtml1-transitional.dtd"> 2. <html xmlns="http://www.w3.org/1999/xhtml">
3. 4. <head>
5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 6. <link rel="stylesheet" href="estilos.css" type="text/css" media="screen" title="no titl
e" charset="utf-8">
7. <title>Untitled Document</title> 8. </head>
9.
10. <body>
11. <table> 12. <tr>
13. <td><a href="#">Home</a></td> 14. <td><a href="#">Galería</a></td>
15. <td><a href="#">Contacto</a></td> 16. <td><a href="#">Log-in</a></td>
17. </tr> 18. </table>
19. </body> 20.
21. </html>
en CSS
texto plano copiar codigo imprimir ? 1. table 2. {
3. background:green; 4. margin:auto;
5. font-family:verdana,helvetica; 6. font-size:14px;
7. } 8.
9. a:link,a:active,a:visited 10. {
11. color:white; 12. text-decoration:none;
13. } 14.
15. a:hover 16. {
17. text-decoration:underline; 18. }
No ganará ningun concurso de diseño, pero para la explicación sirve.
Con lo anterior tendremos algo así .
2.- Ahora necesitamos crear nuestro formulario de ingreso, para esto usaremos un “<div>”, ya que este estará siempre en la
página, pero se vera cuando nosotros los indiquemos.
Para esto, creamos un div como el siguiente:
texto plano copiar codigo imprimir ? 1. <div id="login-form"> 2. <form action="ingreso.html" method="post">
3. <input type="text" name="usuario" value="Usuario" id="usuario"/> 4. <input type="password" name="password" value="Password" id="password"/>
5. <input type="submit" value="Ingresar" /> 6. </form>
Como ven, este div tiene un “id” que es un identificador, adicionalmente a esto, agregamos una etiqueta “id” al link del menu
que corresponde a “login”, quedando el HTML de la siguiente forma:
texto plano copiar codigo imprimir ? 1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/
xhtml1/DTD/xhtml1-transitional.dtd"> 2. <html xmlns="http://www.w3.org/1999/xhtml">
3. 4. <head>
5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 6. <link rel="stylesheet" href="estilos.css" type="text/css" media="screen" title="no titl
e" charset="utf-8">
7. <title>Untitled Document</title> 8. </head>
9. 10. <body>
11. <table> 12. <tr>
13. <td><a href="#">Home</a></td> 14. <td><a href="#">Galería</a></td>
15. <td><a href="#">Contacto</a></td> 16. <td><a href="#" id="login">Log-in</a></td>
17. </tr> 18. </table>
19. <div id="login-form"> 20. <form action="ingreso.html" method="post">
21. <input type="text" name="usuario" value="Usuario" /> 22. <input type="password" name="password" value="Password" />
23. <input type="submit" value="Ingresar" /> 24. </form>
25. </div> 26. </body>
27. 28. </html>
También debemos agregar un nuevo código a la hoja de estilos para darle forma a nuestro formulario, por lo que agregaremos
a nuestro CSS lo siguiente:
texto plano copiar codigo imprimir ? 1. #login-form 2. {
3. width:120px; 4. background:gray;
5. text-align:center; 6. }
7. #login-form input[type=text],#login-form [type=password] 8. {
9. background:black; 10. color:white;
11. display:block; 12. margin-left:10px;
13. width:100px;
14. }
Quedando nuestro sitio así.
Sigue sin ganar ningun premio, pero nuevamente es funcional para el ejemplo.
En la hoja de estilos, al id del formulario, agregamos lo siguiente:
texto plano copiar codigo imprimir ? 1. display:none; 2.
3. margin:auto;
quedando nuestro CSS de la siguiente manera:
texto plano copiar codigo imprimir ? 1. table 2. {
3. background:green; 4. margin:auto;
5. font-family:verdana,helvetica; 6. font-size:14px;
7. } 8.
9. a:link,a:active,a:visited 10. {
11. color:white; 12. text-decoration:none;
13. } 14.
15. a:hover 16. {
17. text-decoration:underline; 18. }
19. 20. #login-form
21. { 22. width:120px;
23. background:gray; 24. text-align:center;
25. margin:auto; 26. display:none;
27. } 28.
29. #login-form input[type=text],#login-form [type=password] 30. {
31. background:black; 32. color:white;
33. display:block; 34. margin-left:10px;
35. width:100px; 36. }
Como verán, si es que estan haciendo esto a la vez que leen, nuestro formulario desapareció y jamas volvera, así que fin del
tutorial. Lo que pasa que está inicialmente escondido, como necesitamos que este, además lo centramos, pero como no
pueden ver, aun no lo sabe.
De aquí en adelante empieza la magia.
Primero que todo, como empezaremos a usar JQuery, necesitan bajar la librería y agregarla en el encabezado de su sitio.
Para descargarla lo pueden hacer aquí
y para agregarlo, ponen la siguiente linea en el encabezado de su sitio.
texto plano copiar codigo imprimir ? 1. <script src="jquery-1.4.2.min.js" type="text/javascript" ></script>
Y ahora, necesitamos crear un nuevo archivo, que para efectos de ejemplo, llamaremos “funciones.js”
en el cual pondremos el siguiente código (se comentará el código para explicar su funcionamiento)
texto plano copiar codigo imprimir ? 1. $(function(){ 2. /* Con esto se esta diciendo "una vez que se cargue el sitio",
3. cuando eso se cumpla se sigue con lo demas */ 4.
5. $('#login').toggle(function(){ 6. /* Usamos la funcion toggle, que sirve para hacer cierta acción con el primer click
7. y otra con el segundo. Los clicks se deben hacer sobre #login que es el 8. identificador de "login" en nuestro menu */
9. 10. $('#login-form').slideDown();
11. /* Con el primer click, hacemos que el formulario se despliegue hacia abajo */ 12.
13. },function(){ 14.
15. //y con el segundo click... 16.
17. $('#login-form').slideUp(); 18. // hacemos que el formuario se "guarde" hacia arriba
19. 20. }); //cerramos la funcion que realiza toggle
21. 22. }); //cerramos las funciones
Es importante decir que la función Toggle tiene al menos 12 mil usos más. En verdad 12 mil fue un número al azar y quizás
exagerado, pero si tiene muchas más.
Ahora si vuelven a su sitio y hacen click en login.. ¡¡¡no pasará nada!!!
Y esto es porque tenemos que agregar este archivo de funciones a la cabecera de nuestro sitio, de la siguiente manera (a esta
altura creo que debí hacer esto en video)
texto plano copiar codigo imprimir ? 1. <script src="jquery-1.4.2.min.js" type="text/javascript"></script> 2. <script src="funciones.js" type="text/javascript"></script>
Como ven se agregó abajo de la librería de jquery, si lo agregar sobre esta, no funcionará nada. ¡Avisados!
Ahora ya esta funcionando, pero antes de mostrar como quedó, agregaremos unas funciones más. ¿Para qué?
Para que cuando alguien haga click en el input de usuario o contraseña, se borre el texto que por defecto esta y lo deje en
blanco, lo hacemos agregando lo siguiente, debemos agregarlo despues del cierre de la funcion de toggle pero antes del cierre
de todas las funciones.
texto plano copiar codigo imprimir ? 1. $('#usuario').focus(function(){ 2. // Esto quiere decir, que cuando se selecciones el input con id "usuario"...
3. $(this).val(''); 4. // el valor, idetificado como val, que es lo que esta dentro del campo sea igual a.. na
da.
5. 6. }); // Cerramos la funcion y abajo repetimos lo mismo con el input password
7. 8. $('#password').focus(function(){
9. $(this).val(''); 10.
11. }); 12. });
13. /* Cerramos las funciones, no lo hicimos 2 veces, 14. recuerden que esto va abajo de la funcion anterior y antes del cierre */
Para evitar confusiones mostraremos todo el archivo de funciones sin comentarios.
texto plano copiar codigo imprimir ? 1. $(function(){ 2.
3. $('#login').toggle(function(){ 4.
5. $('#login-form').slideDown(); 6.
7. },function(){ 8.
9. $('#login-form').slideUp(); 10.
11. }); 12.
13. $('#usuario').focus(function(){ 14. $(this).val('');
15. 16. });
17. 18. $('#password').focus(function(){
19. $(this).val(''); 20.
21. }); 22. });
Y como podemos ver, funciona si problemas, aquí
Para terminar, agregaremos un “<div>” que contenga todo lo anterior, para poder centrarlo y que nuestro formulario quede a la
derecha con CSS. Ahora mostraremos los códigos de todo, para que vean el resultado final.
HTML
texto plano copiar codigo imprimir ? 1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/
xhtml1/DTD/xhtml1-transitional.dtd"> 2. <html xmlns="http://www.w3.org/1999/xhtml">
3. 4. <head>
5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 6. <link rel="stylesheet" href="estilos.css" type="text/css" media="screen" title="no titl
e" charset="utf-8">
7. <script src="jquery-1.4.2.min.js" type="text/javascript" charset="utf-8"></script> 8. <script src="funciones.js" type="text/javascript" charset="utf-8"></script>
9. <title>Untitled Document</title> 10. </head>
11. 12. <body>
13. <div id="contenedor"> 14. <table>
15. <tr> 16. <td><a href="#">Home</a></td>
17. <td><a href="#">Galería</a></td> 18. <td><a href="#">Contacto</a></td>
19. <td><a href="#" id="login">Log-in</a></td> 20. </tr>
21. </table> 22. <div id="login-form">
23. <form action="ingreso.html" method="post"> 24. <input type="text" name="usuario" value="Usuario" id="usuario"/>
25. <input type="password" name="password" value="Password" id="password"/> 26. <input type="submit" value="Ingresar" />
27. </form> 28. </div>
29. </div> 30. </body>
31. 32. </html>
33. 34. });
35. });
CSS
texto plano copiar codigo imprimir ? 1. #contenedor 2. {
3. width:215px; 4. margin:auto;
5. }
6.
7. table 8. {
9. background:green; 10. font-family:verdana,helvetica;
11. font-size:14px; 12. }
13. 14. a:link,a:active,a:visited
15. { 16. color:white;
17. text-decoration:none; 18. }
19. 20. a:hover
21. { 22. text-decoration:underline;
23. } 24.
25. #login-form 26. {
27. width:120px; 28. background:gray;
29. text-align:center; 30. display:none;
31. float:rightright; 32. }
33. 34. #login-form input[type=text],#login-form [type=password]
35. { 36. background:black;
37. color:white; 38. display:block;
39. margin-left:10px; 40. width:100px;
41. }
JQuery
texto plano copiar codigo imprimir ? 1. $(function(){ 2.
3. $('#login').toggle(function(){ 4.
5. $('#login-form').slideDown(); 6.
7. },function(){ 8.
9. $('#login-form').slideUp(); 10.
11. }); 12.
13. $('#usuario').focus(function(){ 14. $(this).val('');
15. 16. });
17. 18. $('#password').focus(function(){
19. $(this).val(''); 20. });
21. });
