CSS desplegable formulario HTML JQuery login
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.
Información del Tutorial
- Dificultad: Baja
- Tiempo de Realizacíon: 30 min
¿Qué necesito?
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:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="stylesheet" href="estilos.css" type="text/css" media="screen" title="no title" charset="utf-8"> <title>Untitled Document</title> </head> <body> <table> <tr> <td><a href="#">Home</a></td> <td><a href="#">Galería</a></td> <td><a href="#">Contacto</a></td> <td><a href="#">Log-in</a></td> </tr> </table> </body> </html>
en CSS
table
{
background:green;
margin:auto;
font-family:verdana,helvetica;
font-size:14px;
}
a:link,a:active,a:visited
{
color:white;
text-decoration:none;
}
a:hover
{
text-decoration:underline;
}
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:
<div id="login-form"> <form action="ingreso.html" method="post"> <input type="text" name="usuario" value="Usuario" id="usuario"/> <input type="password" name="password" value="Password" id="password"/> <input type="submit" value="Ingresar" /> </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:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="stylesheet" href="estilos.css" type="text/css" media="screen" title="no title" charset="utf-8"> <title>Untitled Document</title> </head> <body> <table> <tr> <td><a href="#">Home</a></td> <td><a href="#">Galería</a></td> <td><a href="#">Contacto</a></td> <td><a href="#" id="login">Log-in</a></td> </tr> </table> <div id="login-form"> <form action="ingreso.html" method="post"> <input type="text" name="usuario" value="Usuario" /> <input type="password" name="password" value="Password" /> <input type="submit" value="Ingresar" /> </form> </div> </body> </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:
#login-form
{
width:120px;
background:gray;
text-align:center;
}
#login-form input[type=text],#login-form [type=password]
{
background:black;
color:white;
display:block;
margin-left:10px;
width:100px;
}
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:
display:none; margin:auto;
quedando nuestro CSS de la siguiente manera:
table
{
background:green;
margin:auto;
font-family:verdana,helvetica;
font-size:14px;
}
a:link,a:active,a:visited
{
color:white;
text-decoration:none;
}
a:hover
{
text-decoration:underline;
}
#login-form
{
width:120px;
background:gray;
text-align:center;
margin:auto;
display:none;
}
#login-form input[type=text],#login-form [type=password]
{
background:black;
color:white;
display:block;
margin-left:10px;
width:100px;
}
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.
<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)
$(function(){
/* Con esto se esta diciendo "una vez que se cargue el sitio",
cuando eso se cumpla se sigue con lo demas */
$('#login').toggle(function(){
/* Usamos la funcion toggle, que sirve para hacer cierta acción con el primer click
y otra con el segundo. Los clicks se deben hacer sobre #login que es el
identificador de "login" en nuestro menu */
$('#login-form').slideDown();
/* Con el primer click, hacemos que el formulario se despliegue hacia abajo */
},function(){
//y con el segundo click...
$('#login-form').slideUp();
// hacemos que el formuario se "guarde" hacia arriba
}); //cerramos la funcion que realiza toggle
}); //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)
<script src="jquery-1.4.2.min.js" type="text/javascript"></script> <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.
$('#usuario').focus(function(){
// Esto quiere decir, que cuando se selecciones el input con id "usuario"...
$(this).val('');
// el valor, idetificado como val, que es lo que esta dentro del campo sea igual a.. nada.
}); // Cerramos la funcion y abajo repetimos lo mismo con el input password
$('#password').focus(function(){
$(this).val('');
});
});
/* Cerramos las funciones, no lo hicimos 2 veces,
recuerden que esto va abajo de la funcion anterior y antes del cierre */
Para evitar confusiones mostraremos todo el archivo de funciones sin comentarios.
$(function(){
$('#login').toggle(function(){
$('#login-form').slideDown();
},function(){
$('#login-form').slideUp();
});
$('#usuario').focus(function(){
$(this).val('');
});
$('#password').focus(function(){
$(this).val('');
});
});
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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="stylesheet" href="estilos.css" type="text/css" media="screen" title="no title" charset="utf-8"> <script src="jquery-1.4.2.min.js" type="text/javascript" charset="utf-8"></script> <script src="funciones.js" type="text/javascript" charset="utf-8"></script> <title>Untitled Document</title> </head> <body> <div id="contenedor"> <table> <tr> <td><a href="#">Home</a></td> <td><a href="#">Galería</a></td> <td><a href="#">Contacto</a></td> <td><a href="#" id="login">Log-in</a></td> </tr> </table> <div id="login-form"> <form action="ingreso.html" method="post"> <input type="text" name="usuario" value="Usuario" id="usuario"/> <input type="password" name="password" value="Password" id="password"/> <input type="submit" value="Ingresar" /> </form> </div> </div> </body> </html> }); });
CSS
#contenedor
{
width:215px;
margin:auto;
}
table
{
background:green;
font-family:verdana,helvetica;
font-size:14px;
}
a:link,a:active,a:visited
{
color:white;
text-decoration:none;
}
a:hover
{
text-decoration:underline;
}
#login-form
{
width:120px;
background:gray;
text-align:center;
display:none;
float:right;
}
#login-form input[type=text],#login-form [type=password]
{
background:black;
color:white;
display:block;
margin-left:10px;
width:100px;
}
JQuery
$(function(){
$('#login').toggle(function(){
$('#login-form').slideDown();
},function(){
$('#login-form').slideUp();
});
$('#usuario').focus(function(){
$(this).val('');
});
$('#password').focus(function(){
$(this).val('');
});
});
El resultado final aquí
Con esto, tienen listo su formulario desplegable. Solo queda hacer un diseño bonito para acompañar.
Cualquier duda que puedan tener, los invitamos a dejarnos un comentario a continuación.
Por ahora,
Me despido
2:23:22 am
Buen aporte!!! (Y)
2:39:40 pm
http://www.wix.com/shaaf1/power-point
visiten esto…
1:42:18 pm
¿Puedo poner este tutorial en mi web, con los creditos solicitados?
12:35:41 pm
seguro q solo se tarda 30 min en hacer esto???
7:54:11 pm
como descargo el js?? donde lo guardo?? no me lo esta jalando?? oÓ
5:48:43 pm
mira y si quiero revisar si existen los usuarios en una base de datos de mysql? como puedo revisar esto????
6:45:49 pm
hola,
Reconozco que hasta hace poco no me motivaba demasiado
elsitio, pero con los ultimos posts estoy entrando mas veces y me ha empezado a gustar.
Sigue asi!
9:33:55 am
Buenas. He hecho lo del click y lo del desplegable, pero el problema es q directamente me sale el desplegable sin picar, tengo que picar para ocultarlo.
El problema es que me sale ya desplegado, sin picar. ¿Qué puedo hacer?
2:13:06 pm
Muchas gracias
me ha ayudado mucho
justo lo que necesitaba
good!