Documentos de Académico
Documentos de Profesional
Documentos de Cultura
Untitled
Untitled
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');
}
});