Cómo hacer un formulario de ingreso desplegable
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?
¿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:
<!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
Staff CLH
Tutoriales relacionados:
- Cómo crear un contador de caracteres para tus formularios
- Cómo estilizar los formularios de nuestros sitios Web
- Cómo hacer un gadget en Windows 7
- Cómo crear un formulario de contacto – Versión 2.0
- Cómo crear un menu desplegable para Web
(2 votos, promedio: 5.00 de 5)
Loading ...
Escrito por Jorge Nitales
Responsable de transformar miles de k310 en w200, y sobrevivir para contarlo, Jorge Nitales tuvo sus inicios en los barrios bajos de Papúa y Nueva Guinea, en una exitosa empresa productora de Paraguas de Bambú. Luego de alcanzar fama y fortuna, lo dejó todo para jubilar a la edad de 16 años y dedicarse a la cosecha de tomates hidropónicos en la zona de Pemuco. Es ahí donde fue reclutado para CLH por Dexter, un asiduo comprador de la hortaliza. A la fecha se le adjudica el haber enseñado a miles de personas en cientos de países como teletransportarse y hacer el famoso Kamehamehá, rumoreándose fuertemente una Genkidama en el futuro próximo. Las baterías vienen por separado.
4 Comentarios a “ Cómo hacer un formulario de ingreso desplegable ”
Comenta
Buen aporte!!! (Y)
http://www.wix.com/shaaf1/power-point
visiten esto…
¿Puedo poner este tutorial en mi web, con los creditos solicitados?
seguro q solo se tarda 30 min en hacer esto???