Está en la página 1de 1

** como hacer un login **

HTML
<form>
<label for="username">Nombre de usuario:</label>
<input type="text" id="username" name="username"><br><br>
<label for="password">Contraseña:</label>
<input type="password" id="password" name="password"><br><br>
<input type="submit" value="Iniciar sesión">
</form>
--------------------------------------------------------------------
CSS
form {
border: 2px solid black;
padding: 20px;
width: 300px;
margin: 0 auto;
}

label {
display: block;
font-weight: bold;
margin-bottom: 5px;
}

input[type="text"],
input[type="password"] {
padding: 5px;
margin-bottom: 10px;
width: 100%;
}

input[type="submit"] {
background-color: #4CAF50;
border: none;
color: white;
padding: 10px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin-top: 10px;
cursor: pointer;
}
---------------------------------------------------------------
JS
const form = document.querySelector('form');
form.addEventListener('submit', function(e) {
e.preventDefault();
const username = document.querySelector('#username').value;
const password = document.querySelector('#password').value;
if (username === 'usuario' && password === 'contraseña') {
alert('Inicio de sesión exitoso!');
} else {
alert('Nombre de usuario o contraseña incorrectos');
}
});

También podría gustarte

  • Revisar
    Revisar
    Documento13 páginas
    Revisar
    ANTONIO JEAN PIERRE DIAZ GARRIDO
    Aún no hay calificaciones
  • 02 Estandares
    02 Estandares
    Documento1 página
    02 Estandares
    ANTONIO JEAN PIERRE DIAZ GARRIDO
    Aún no hay calificaciones
  • EvaluacionN3 PGY1121 08V
    EvaluacionN3 PGY1121 08V
    Documento6 páginas
    EvaluacionN3 PGY1121 08V
    ANTONIO JEAN PIERRE DIAZ GARRIDO
    Aún no hay calificaciones
  • 1 2 5 Pauta Revision Actividad 1 2
    1 2 5 Pauta Revision Actividad 1 2
    Documento2 páginas
    1 2 5 Pauta Revision Actividad 1 2
    ANTONIO JEAN PIERRE DIAZ GARRIDO
    Aún no hay calificaciones
  • 1 2 2 ACTIVIDAD Problema Contexto Objetivos
    1 2 2 ACTIVIDAD Problema Contexto Objetivos
    Documento1 página
    1 2 2 ACTIVIDAD Problema Contexto Objetivos
    ANTONIO JEAN PIERRE DIAZ GARRIDO
    Aún no hay calificaciones
  • Anexo A
    Anexo A
    Documento1 página
    Anexo A
    ANTONIO JEAN PIERRE DIAZ GARRIDO
    Aún no hay calificaciones
  • Pagina Servicios
    Pagina Servicios
    Documento4 páginas
    Pagina Servicios
    ANTONIO JEAN PIERRE DIAZ GARRIDO
    Aún no hay calificaciones
  • Sprint 1 - Plantilla Resumen Reunion Retrospectiva
    Sprint 1 - Plantilla Resumen Reunion Retrospectiva
    Documento5 páginas
    Sprint 1 - Plantilla Resumen Reunion Retrospectiva
    ANTONIO JEAN PIERRE DIAZ GARRIDO
    Aún no hay calificaciones
  • Untitled
    Untitled
    Documento2 páginas
    Untitled
    ANTONIO JEAN PIERRE DIAZ GARRIDO
    Aún no hay calificaciones
  • Untitled
    Untitled
    Documento4 páginas
    Untitled
    ANTONIO JEAN PIERRE DIAZ GARRIDO
    Aún no hay calificaciones