How do you make a login page screen with HTML which only has one correct username and one password?

Question

I know that you use php to make logins with usernames and passwords but I'm still learning HTML, is there a way to make a form with one correct username and one correct password which are hardcoded using HTML or JS?

So for example if the user enters username abcd and password pass12345, then it goes to the next screen, otherwise it says "Sorry, password is incorrect."

This is just for learning purposes, I know it's not secure at all and shouldn't be used for actual websites. Just learning. Thanks :)

The login page right now...

  <form action="loggedin.html">
      <label for="username">Username</label>
      <input
        type="text"
        placeholder="Enter Username"
        name="username"
        required
      />
      <label for="password">Password</label>
      <input
        type="password"
        placeholder="Enter Password"
        name="password"
        required
      />
      <button type="submit">Submit</button>
    </form>

You can, but in many cases you probably shouldn't as any user can get into their browser's dev tools and look at your checking code to find the right password if it's all done on the frontend. — A Haworth, Jul 19 '21 at 10:56
What you can do is [find the input value](https://stackoverflow.com/questions/11563638/how-do-i-get-the-value-of-text-input-field-using-javascript) in JS and check it against a hardcoded value. Do this for both fields, if all is correct submit the form. If not show an error or something. — Reyno, Jul 19 '21 at 10:58
Yeah fair enough, I guess there's no point trying to learn something I shouldn't use anyway. So what should I do? Is php the thing to learn for this kind of thing? — PotatoMC, Jul 19 '21 at 11:00

score 2 · Accepted Answer · edited Jul 19 '21 at 11:38

DON'T EVER USE IN PRODUCTION - LEARNING PURPOSES ONLY

As this is for learning purposes only and you understand it's not secure, I have gone ahead and written a small snippet that will check against a hard coded username and password. If entered username or password do not match it will alert the user.

I have added comments through out the code to explain what I did and what's going on.

See below

<!-- 
    Added onsubmit attribute to form so that it will trigger the JS function (authenticate). 
    if the function returns false it will prevent the form from submitting 
-->
<form action="loggedin.html" onsubmit="return authenticate()">
      <label for="username">Username</label>
      <!-- added IDs to the inputs -->
      <input
        id="username"
        type="text"
        placeholder="Enter Username"
        name="username"
        required
      />
      <label for="password">Password</label>
      <input
        id="password"
        type="password"
        placeholder="Enter Password"
        name="password"
        required
      />
      <button type="submit">Submit</button>
    </form>
    
    <script>
    
    //Following function gets values of the username and password fields and checks to see if they match a hard coded username and password 
      function authenticate(){
        var authorised;
        
        //get input values
        var username = document.getElementById("username").value;
        var password = document.getElementById("password").value;
        
        //check to see if the password and username match
        if(username == "abcd" && password == "pass12345"){
          authorised = true;
        }else{ // username or password do not match
          authorised = false;
          //alert user
          alert("Sorry, password is incorrect.");
        }
        //return result
        return authorised;
      }
    </script>

How do you make a login page screen with HTML which only has one correct username and one password?

1 Answers1