登入跳轉頁面html

WBOY原創: 2023-05-09 10:48:372356瀏覽

在網頁開發中，登入跳轉頁面是常見的功能。在使用者登入一次以後，為了方便使用者瀏覽網站內容，避免使用者在每次造訪新頁面時需要重新輸入登入訊息，我們通常會設計一個跳轉頁面，將使用者的登入資訊保存在一個會話中，以便用戶繼續在網站上瀏覽內容。

在本文中，我們將介紹如何使用HTML和JavaScript來實作一個登入跳轉頁面。

建立HTML頁面

首先，我們需要建立一個HTML頁面。可以直接在程式碼編輯器中建立一個空白的HTML文件，然後加入以下程式碼：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Login Redirect Page</title>
</head>
<body>
  <h1>Login Redirect Page</h1>
  <p>Please wait while you are being redirected...</p>
</body>
</html>

在這個HTML頁面中，我們建立了一個標題和一段提示訊息。這個頁面不包含任何的登入表單，因為我們將在另一個頁面中新增此功能。

建立登入頁面

接下來，我們需要建立一個登入頁面。可以在同一個HTML檔案中繼續編寫程式碼，或建立一個新的HTML檔案並將程式碼複製並貼上到其中。以下是一個簡單的登入表單範例：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Login Page</title>
</head>
<body>
  <h1>Login Page</h1>
  <form>
    <label for="username">Username:</label>
    <input type="text" id="username" name="username"><br><br>
    <label for="password">Password:</label>
    <input type="password" id="password" name="password"><br><br>
    <button type="submit" onclick="login()">Login</button>
  </form>
  
  <script>
    function login() {
      // Get the input fields
      var username = document.getElementById("username").value;
      var password = document.getElementById("password").value;
      
      // Set the session storage values
      sessionStorage.setItem("username", username);
      sessionStorage.setItem("password", password);
      
      // Redirect to the homepage
      window.location.replace("homepage.html");
    }
  </script>
</body>
</html>

在這個登入頁面中，我們建立了一個包含使用者名稱和密碼輸入框以及一個提交按鈕的表單。當使用者點擊「登入」按鈕時，我們將輸入的使用者名稱和密碼儲存在會話儲存中，然後透過JavaScript中的window.location.replace() 函數將使用者重定向到一個名為“homepage.html”的頁面。

實作跳轉頁面

在第一步中，我們建立了一個名為「login-redirect.html」的空白HTML頁面。現在，我們需要在其中新增一個JavaScript腳本，以便在頁面載入時檢查使用者是否已經登錄，並根據登入狀態將其重新導向到正確的頁面。

以下是實作這個功能的簡單JavaScript範例：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Login Redirect Page</title>
</head>
<body>
  <h1>Login Redirect Page</h1>
  <p>Please wait while you are being redirected...</p>
  
  <script>
    // Check if the user is logged in
    var username = sessionStorage.getItem("username");
    var password = sessionStorage.getItem("password");
    
    if (username == null || password == null) {
      // Redirect to the login page
      window.location.replace("login.html");
    } else {
      // Redirect to the homepage
      window.location.replace("homepage.html");
    }
  </script>
</body>
</html>

在這個腳本中，我們首先透過檢查會話儲存中是否存在使用者名稱和密碼來判斷使用者是否已經登入。如果使用者未登錄，則將其重新導向至名為「login.html」的登入頁面；否則，將其重新導向至名為「homepage.html」的頁面。

測試登入跳轉頁面

現在，我們已經完成了登入跳轉頁面的HTML和JavaScript程式碼編寫。我們可以在本機或遠端伺服器上啟動這些頁面並進行測試，以確保它們能夠正確地完成登入跳轉功能。

我們可以先嘗試在不輸入使用者名稱和密碼的情況下嘗試存取我們的「homepage.html」頁面，並檢查是否將其重定向到登入頁面。之後，我們可以在登入頁面中輸入任意的使用者名稱和密碼，並檢查是否能夠正確地將其保存在會話儲存中並重定向到「homepage.html」頁面。

總結

在本文中，我們介紹如何使用HTML和JavaScript來實作一個登入跳轉頁面。我們首先建立了一個空白的跳躍頁面，並在其上編寫了JavaScript程式碼，以便在頁面載入時檢查使用者是否已經登錄，並將其重定向到正確的頁面。之後，我們建立了一個包含登入表單的HTML頁面，並在其中新增了JavaScript程式碼，以便在使用者點擊「登入」按鈕時將其輸入的使用者名稱和密碼儲存在會話儲存中，並將其重定向到跳轉頁面。最後，我們透過在本機或遠端伺服器上啟動這些頁面並進行測試，確保它們能夠正確地完成登入跳轉功能。

以上是登入跳轉頁面html的詳細內容。更多資訊請關注PHP中文網其他相關文章！

JavaScript html location

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：html怎麼連結圖片下一篇：html怎麼連結圖片

看更多