Good morning,
I have an html, css, js form and I would like once the user name and password are entered to be redirected to an html page and if it is incorrect an error message will be generated. display in the same window.
Can you help me create this script?
or if you have an easier script to integrate into my website I am interested.
here is my source
html
<div id="popup2" class="popup-container">
<div class="popup-box">
<h1>SE CONNECTER</h1><br>
<form>
<label for="username">Nom d'utilisateur:</label>
<input type="text" name="username" placeholder="Entrer votre nom d'utilisateur">
<label for="password">Votre mot de Passe:</label>
<input type="text" name="password" placeholder="Entrer votre mot de passe ">
<div class="check">
<input type="checkbox" name="remember">
<label for="remember">Se souvenir</label>
</div>
</form>
<div class="button-wrap">
<form action="https://fr.w3docs.com/" method="get" target="_blank">
<button class="close-btn" type="submit">Se connecter</button>
</form>
<button class="close-btn">Fermer</button>
</div>
</div>
</div>
css
/* Form Login */
form {
display: flex;
flex-direction: column;
}
label {
font-size: 14px;
margin-bottom: 9px;
color: #000;
}
input[type="text"],
input[type="password"] {
padding: 10px;
margin-bottom: 20px;
border: none;
border-radius: 5px;
font-size: 16px;
box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.2);
}
.check {
margin-bottom: 10px;
}
.check label {
margin-top: 5px;
}
input[type="submit"] {
padding: 10px;
border: none;
border-radius: 5px;
color: #fff;
font-size: 18px;
background-color: #ef6e12;
cursor: pointer;
box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.2);
}
input[type="submit"]:hover {
background-color: #f07a26;
}
JS
const showPopup = document.querySelectorAll(".show-popup");
const closeBtn = document.querySelectorAll(".close-btn");
showPopup.forEach(function (popup) {
popup.addEventListener("click", function () {
var modalTarget = this.getAttribute("href");
document.querySelector(modalTarget).classList.add("active");
});
});
closeBtn.forEach(function (close) {
close.addEventListener("click", function () {
this.closest(".popup-container").classList.remove("active");
});
});