In this post you can learn How to make a password box in html for password with eye icon you can show or hide the password this is the complete coding you can put your link when the user click the button with correct password then link will be open in new windows if the user will put the wrong password then the outline of text box will be in red color it is very easy for your task just copy the code below and change the links or color..
VIDEO
<![CDATA[
<style>
.serv-price .price-button {
cursor: pointer;
width: 80%;
padding: 0px 0px;
border: 0;
text-align: center;
color: #fff;
font-weight: 700;
background: #8EE000;
margin: 0px 0 0px;
border-radius: 4px;
transition: .3s;
border-bottom: solid 3px #7AC70C;
}
.serv-price .price-button.active {
background: #000000;
border-bottom: solid 3px #060081;
}
.serv-price .price-button.active:hover {
border-bottom: solid 3px #14D4F4;
}
</style>
<script>
function validate() {
var password = document.getElementById("password").value;
console.log(password);
if (password == "0321"
) {
document.getElementById("password")
.style.borderColor = "green"
window.open("https://inpagefree.blogspot.com/");
document.getElementById('password').value = "";
}else {
document.getElementById("password")
.style.borderColor = "red"
}
}
function validate1() {
var password1 = document.getElementById("password1").value;
console.log(password1);
if (password1 == "0321"
) {
document.getElementById("password1")
.style.borderColor = "green"
window.open("https://inpagefree.blogspot.com/");
document.getElementById('password1').value = "";
}else {
document.getElementById("password1")
.style.borderColor = "red"
}
}
function validate2() {
var password2 = document.getElementById("password2").value;
console.log(password2);
if (password2 == "0321"
) {
document.getElementById("password2")
.style.borderColor = "green"
window.open("https://inpagefree.blogspot.com/");
document.getElementById('password2').value = "";
}else {
document.getElementById("password2")
.style.borderColor = "red"
}
}
</script>
<form id="form_id" method="post" name="myform">
<input type="password" name="password" id="password"placeholder="Key"style="height: 40px; width: 252px;font-size: 35px;"/>
<input type="password" name="password1" id="password1"placeholder="Key"style="height: 40px; width: 252px;font-size: 35px;"/>
<input type="password" name="password2" id="password2"placeholder="Key"style="height: 40px; width: 252px;font-size: 35px;"/>
<div class="serv-price">
<input class="price-button lgb active "type="button" style="height: 40px; width: 256px;"value="Check Here" id="submit" onclick="validate()"/>
<input class="price-button lgb active "type="button" style="height: 40px; width: 256px;"value="Check Here" id="submit" onclick="validate1()"/>
<input class="price-button lgb active "type="button" style="height: 40px; width: 256px;"value="Check Here" id="submit" onclick="validate2()"/>
<br><br>
</div>
]]>
Copy All Code
