Need help with basic HTML login form

Psychzor · Nov 18, 2022

Hi there!

So i had this figured out some years back, but i cant seem to find the tutorial again or any backup.
Basically it was a simple login form that sends the user to a specified URL if the text is correct.

Something like if input type text is "custom text" and input type password is "custom text" then input type submit button go to ahref "custom url"

Code:

<div>
    <label for="username">Username:</label>
    <input type="text" id="username" name="username">
</div>
<p></p>
<div>
    <label for="pass">Password:</label>
    <input type="password" id="pass" name="password" minlength="8" required="">
</div>

<input type="submit" value="Sign in">

Funny because it was so basic and had no fancy CSS or javascript if I remember correctly. Again, I used it years go, can't really remember it properly.
So it doesn't use any database or any other advanced stuff (for me), It used to work with more names and passwords, not just one, like demo name and demo pass.

Think of it as a simple webpage locked with a password, if you want to access it, enter password, a custom word, if the word is correct, the button sends you to a custom url.

I'm just gonna leave this here and hopefully you can help.

Thanks!

Psychzor · Nov 18, 2022

My apoligies! It does involves some javascript.

Haven't stopped looking and i solved it, i guess, maybe it helps anyone who comes across same trouble as me so i'm just gonna post it.

Its rough around the edges, so no CSS but worth it.

Code:

<html>
<head>

<title>Javascript Login Form Validation</title>
<!-- Include CSS File Here -->
<link rel="stylesheet" href="css/style.css"/>
<!-- Include JS File Here -->
<script src="js/login.js"></script>
</head>
<body>
<div class="container">
<div class="main">
<form id="form_id" method="post" name="myform">
<label>USER:</label>
<input type="text" name="username" id="username"/>
<label>PASS:</label>
<input type="password" name="password" id="password"/>
<input type="button" value="LOGIN" id="submit" onclick="validate()"/>
</form>

<br>
<br>
username is <b>asd</b> and password is <b>123</b>

</div>
</div>
</body>
</html>
 
  !?####HE JS (JAVASCRIPT) BELOW
 
 
<head>
<script>
    
    var attempt = 4; // Variable to count number of attempts.
// Below function Executes on click of login button.
function validate(){
var username = document.getElementById("username").value;
var password = document.getElementById("password").value;
if ( username == "asd" && password == "123"){
alert ("Login successfully");
window.location = "success.html"; // Redirecting to other page.
return false;
}
else{
attempt --;// Decrementing by one.
alert("You have left "+attempt+" attempt;");
// Disabling fields after 3 attempts.
if( attempt == 0){
document.getElementById("username").disabled = true;
document.getElementById("password").disabled = true;
document.getElementById("submit").disabled = true;
return false;
}
}
}
    
    </script>
    </head>

Search

Search

Need help with basic HTML login form

Psychzor

New member

Psychzor

New member

Similar threads