你如何用 HTML 制作一個只有一個正確用戶名和一個密碼的登錄頁面屏幕？

Question

我知道您使用 php 使用用戶名和密碼進行登錄，但我仍在學習 HTML，有沒有辦法用一個正確的用戶名和一個正確的密碼制作一個表單，這些表單使用 HTML 或 JS 進行硬編碼？

例如，如果用戶輸入用戶名 abcd 和密碼 pass12345，則進入下一個屏幕，否則會顯示“對不起，密碼不正確”。

這僅用於學習目的，我知道它根本不安全，不應用於實際網站。 只是學習。 謝謝 ：）

現在登錄頁面...

  <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>

Answer 1

切勿在生產中使用 - 僅用於學習目的

由於這僅用於學習目的並且您知道它不安全，因此我繼續編寫了一個小片段，用於檢查硬編碼的用戶名和密碼。 如果輸入的用戶名或密碼不匹配，它將提醒用戶。

我在代碼中添加了注釋來解釋我做了什么以及發生了什么。

見下文

 <!-- 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>