Un formulario de login en HTM5, permite controlar el acceso a un sistema en aplicaciones como: de escritorio, web y demás, en este articulo se muestra un ejemplo de diseño y código en HTML5 y CSS3.
HTML5 y CSS3 nos permite realizar un buen diseño de la interfaz gráfica, es decir con estas tecnologías se puede aplicar un aspecto avanzado en los elementos de un pagina web.
Para que tenga un aspecto mucho mas bonito, en el diseño del formulario se usan frameworks como Bootstrap y Jquery.
En el siguiente ejemplo que se muestra a continuación se usan las etiquetas div o también contenedor caja, estas etiquetas permiten agrupar otras etiquetas, cuyas etiquetas tienen atributos o selectores id, class o identificadores para usar un estilo único en la regla CSS3.
He aquí el ejemplo de código HTML5 del formulario de login.
Archivo index.html
<!DOCTYPE html>
<html>
<head>
<title>sistema de login</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<!-- vinculo a bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Temas-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- se vincula al hoja de estilo para definir el aspecto del formulario de login-->
<link rel="stylesheet" type="text/css" href="estilo.css">
</head>
<body>
<div id="Contenedor">
<div class="Icon">
<!--Icono de usuario-->
<span class="glyphicon glyphicon-user"></span>
</div>
<div class="ContentForm">
<form action="" method="post" name="FormEntrar">
<div class="input-group input-group-lg">
<span class="input-group-addon" id="sizing-addon1"><i class="glyphicon glyphicon-envelope"></i></span>
<input type="email" class="form-control" name="correo" placeholder="Correo" id="Correo" aria-describedby="sizing-addon1" required>
</div>
<br>
<div class="input-group input-group-lg">
<span class="input-group-addon" id="sizing-addon1"><i class="glyphicon glyphicon-lock"></i></span>
<input type="password" name="contra" class="form-control" placeholder="******" aria-describedby="sizing-addon1" required>
</div>
<br>
<button class="btn btn-lg btn-primary btn-block btn-signin" id="IngresoLog" type="submit">Entrar</button>
<div class="opcioncontra"><a href="">Olvidaste tu contraseña?</a></div>
</form>
</div>
</div>
</body>
<!-- vinculando a libreria Jquery-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Libreria java scritp de bootstrap -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</html>
Para dar el aspecto bonito del diseño del formulario de login, se usa CSS o Hojas de Estilo en Cascada, que continuación se muestra las definiciones a las etiquetas HTML5 identificados.
Archivo estilo.css
/*
Al cuerpo de la
pagina se aplica el tamaño de fuente
*/
body{
font-size: 12px;
}
/**
* se aplica el ancho, margen centrado
* borde de un pixel con redondeado, y rellenado
* a la izquierda y derecha
*/
#Contenedor{
width: 400px;
margin: 50px auto;
background-color: #F3EDED;
border: 1px solid #ECE8E8;
height: 400px;
border-radius:8px;
padding: 0px 9px 0px 9px;
}
/**
* Aplicando al icono de usuario el color de fondo,
* rellenado de 20px y un redondeado de 120px en forma
* de un circulo
*/
.Icon span{
background: #A8A6A6;
padding: 20px;
border-radius: 120px;
}
/**
* Se aplica al contenedor madre un margen de tamaño 10px hacia la cabecera y pie,
* color de fuente blanco,un tamaño de fuente 50px y texto centrado.
*/
.Icon{
margin-top: 10px;
margin-bottom:10px;
color: #FFF;
font-size: 50px;
text-align: center;
}
/**
* Se aplica al contenedor donde muestra en el pie
* la opción de olvidaste tu contraseña?
*/
.opcioncontra{
text-align: center;
margin-top: 20px;
font-size: 14px;
}
/**
* En las siguientes lineas
* se define el diseño adaptable, para que
* se muestre en los dispositivos móviles
*/
/******************************************/
/*** DISEÑO PARA MOVILES 320 ****/
/******************************************/
@media only screen and (max-width:320px){
#Contenedor{
width: 100%;
height: auto;
margin: 0px;
}
/******************************************/
/*** DISEÑO PARA MOVILES 240 ****/
/******************************************/
@media only screen and (max-width:240px){
}
Aquí terminamos con el diseño de Formulario de login. En el siguiente articulo se realiza el validado del formulario con JavaScrip, PHP y MySQL.
Descargar los archivos de ejemplo: Ejemplo de Formulario de login en HTML5
Desarrollador de aplicaciones web y de escritorio, amante de la tecnología y autodidacta, me gusta conocer otras tecnologías, escribir artículos para compartir en la web y para estar al tanto en los nuevos paradigmas, respeto las políticas de software privativo y libre, ya que estas políticas son las normas que permite el desarrollo tecnológico social de la humanidad. filvovmax@gmail.com -- info@gitmedio.com
Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.
Exelente…!!! me ahorraste un un buen rato de diseño
Влагомеры для нефти
More info…
Hola
Hola Rodrigo,
Tú formulario me fue de mucha ayuda,pero hay algo que no consigo.
Me gustaría poner la imagen de mi logo a la izquierda del primer recuadro
(donde pone el icono de correo). No sustituirlo sino que aparezca a la izquierda.
Intente flotarlo y también use position….. pero nada.
Y otra cosa me gustaría también cambiar el color de los botones pero no lo logro
tampoco.
Si hay alguna manera de hacerlo, por favor te agradecería que me lo explicases en un
correo privado.
y sobre todo darte las gracias porque me fue muy útil.
Un Saludo Cordial Noemi
Hola Rodrigo queria saber si tu me podrias ayudar con alguno ejercisios de css por que tengo una expo en mi clase , soy estudiante de 2 ° bachillerato
!!!Gracias…..!!!
hola amigo soy un aficionado que no sabe de programación y he encontrado muy inetresante e instructivo este ejemplo
solo me queda una duda que es al poner seguridad a un sitio, osea que al ingresar por el login no salte a otras paginas si es que el usuario sea validado primero.
no se si me entienden ¿?
Saludos, lo
Se me ocurre hacer una variable de sesión, y comprobar si la variable de sesión es diferente de cero, esto en todas las pag atrás del login, para que al poner por ejemplo http://www.algo.com/subirarchivos.php compruebe la variable y al ser cero, regrese a la pantalla de login.
Tarde mi comentario pero es mejor a nada 🙂
Hola Rodrigo, cómo estás, muy buena tu página.
No soy programador, soy project leader y quería saber si trabajas en proyectos privados de desarrollo de aplicaciones web. Te dejo mi email de contacto.
Saludos,
Sergio
Excelente
Buensisimo, estaba buscando una para un pequeño trabajito que salio y no quería hacer una y esta queda de maravilla, gracias.
Hola Hemerson solo tienes cambiar en la base de datos insertando usuarios en campo donde dice Correo. y Determ.php quitar la expresión regular en los métodos ValidarUser() y Pasword_usr() donde se valida el correo electrónico.
Recuerda que los nombres de usuarios deben ser ùnicos o diferentes.
Saludos, me alegra que te haya ayudado el ejemplo.
Me ayudo mucho para mi proyecto gracias, pero necesito es el inicio de sesión con un usuario y no con un correo. Como se cambiaría el código¿? Es que en Determ.php hay demasiada complejidad.
Soy nuevo en esto. Gracias.