Cómo crear una página básica de inicio de sesión y registro en HTML

Hola..,

A continuación le proporciono el código de la página de registro:

Código para la página de inicio de sesión:

Obtendrá el siguiente resultado:

y la página de inicio de sesión es:

Este es el código para iniciar sesión y registrar páginas, asegúrese de crear un archivo CSS y conectar la página de inicio de sesión a la página de perfil …

Espero que te ayude …

/ * Establecer un estilo para todos los botones * /
botón {
color de fondo: # 4CAF50;
color blanco;
acolchado: 14px 20px;
margen: 8px 0;
borde: ninguno;
cursor: puntero;
ancho: 100%;
}

botón: desplazar {
opacidad: 0.8;
}

/ * Estilos adicionales para el botón cancelar * /
.cancelbtn {
ancho: auto;
acolchado: 10px 18px;
color de fondo: # f44336;
}

/ * Centra la imagen y coloca el botón de cierre * /
.imgcontainer {
alinear texto: centro;
margen: 24px 0 12px 0;
posición: relativa;
}

img.avatar {
ancho: 40%;
radio de borde: 50%;
}

.envase {
acolchado: 16px;
}

span.psw {
flotar derecho;
relleno superior: 16px;
}

/ * El modal (fondo) * /
.modal {
pantalla: ninguno; / * Oculto por defecto * /
posición: fija; / * Permanecer en el lugar * /
índice z: 1; / * Siéntate arriba * /
izquierda: 0;
arriba: 0;
ancho: 100%; / * Ancho completo * /
altura: 100%; /* Altura completa */
desbordamiento: auto; / * Habilitar desplazamiento si es necesario * /
color de fondo: rgb (0,0,0); / * Color de reserva * /
color de fondo: rgba (0,0,0,0.4); / * Negro con opacidad * /
relleno superior: 60px;
}

/ * Contenido modal / Cuadro * /
.modal-content {
color de fondo: #fefefe;
margen: 5% automático 15% automático; / * 5% desde arriba, 15% desde abajo y centrado * /
borde: 1px sólido # 888;
ancho: 80%; / * Podría ser más o menos, dependiendo del tamaño de la pantalla * /
}

/ * El botón Cerrar (x) * /
.cerca {
posición: absoluta;
derecha: 25px;
arriba: 0;
color: # 000;
tamaño de fuente: 35px;
peso de fuente: negrita;
}

.close: flotar,
.close: foco {
color rojo;
cursor: puntero;
}

/ * Agregar animación de zoom * /
.animate {
-webkit-animation: animatezoom 0.6s;
animación: animatezoom 0.6s
}

@ -webkit-keyframes animatezoom {
de {-webkit-transform: scale (0)}
a {-webkit-transform: scale (1)}
}

@keyframes animatezoom {
de {transform: scale (0)}
a {transformar: escala (1)}
}

/ * Cambiar estilos para el botón span y cancelar en pantallas extra pequeñas * /
@media screen y (max-width: 300px) {
span.psw {
bloqueo de pantalla;
flotador: ninguno;
}
.cancelbtn {
ancho: 100%;
}
}

Formulario de inicio de sesión modal

Iniciar sesión

& times;

Password

Iniciar sesión
Recordarme

// Cuando el usuario hace clic en cualquier lugar fuera del modal, ciérrelo
window.onclick = function (evento) {
if (event.target == modal) {
modal.style.display = "none";
}
}

Si necesita guardar datos en bases de datos, debe ir con Php. Pero si solo está haciendo un diseño front-end, puede ir con Java Script. por ejemplo, página de inicio de sesión

1) use getbyname y asigne a var a

2) coincidencia de cadenas usando la instrucción if (a == ””), redirigir a la página siguiente y la instrucción else, enviar mensajes de alerta Esta es una página de inicio de sesión simple.

Etiquetas:

Consulte los Tutoriales web en línea de W3Schools para obtener más información.