Question 267928 in Html Question posted in
Some basic documentation can be found here.

How can I password protect a page with HTML/JS/CSS?

I need to make a website for a school project, and it has a basic user system. I don’t want to use something like Apache because it doesn’t need to be secure. I just need a password login page that can have 1 username and password.

I tried a couple templates I found online and it didn’t work. I also tried out PageCrypt but that only has space for a password.

Tags:

2

Answers


  1. 0

    A simple solution would be to:

    • Create a page with a login form. Call it page1.html.
    • Create a second page – the page you want someone to see after they login. Call it page2.html.
    • One page 1, write some Javascript code attached to the login button. The code checks if the username and password are correct, and if so, it displays page 2.

    A slightly more complicated solution would be to have everything on one page, where the login form is displayed as a modal overlay when the page is first rendered, and then hidden once a user gets the username and password correct.

    Login or Signup to reply.
  2. 0

    Here is a super simple login for you to use as a starting point. I have alerts setup so you can see what happens when the user adds the correct and incorrect username and password (StackOverflow & Test123).

    You can replace the alerts to send the user to a different page or to do whatever you’d like.

            function checkLogin() {
            var username = document.getElementById('username').value;
            var password = document.getElementById('password').value;

            if (username === 'StackOverflow' && password === 'Test123') {
                alert('Login successful!');
            } else {
                alert('Incorrect username or password. Please try again.');
            }
        }
        <h1>Login Page</h1>
    <form>
        <label for="username">Username:</label>
        <input type="text" id="username" name="username" required><br><br>

        <label for="password">Password:</label>
        <input type="password" id="password" name="password" required><br><br>

        <input type="button" value="Login" onclick="checkLogin()">
    </form>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search