登入跳轉頁面html-Golang-PHP中文網

首頁

後端開發

Golang

登入跳轉頁面html

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 09, 2023 am 10:48 AM

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

在本文中，我們將介紹如何使用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中文網其他相關文章！

本網站聲明

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

熱AI工具

Undresser.AI Undress

人工智慧驅動的應用程序，用於創建逼真的裸體照片

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

免費脫衣圖片

Clothoff.io

AI脫衣器

Video Face Swap

使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！

熱工具

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

中文版，非常好用

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

熱門話題

gmail信箱登陸入口在哪裡

7773

Java教學

1644

CakePHP 教程

1399

Laravel 教程

1296

PHP教程

1234

Related knowledge

Debian OpenSSL有哪些漏洞 Apr 02, 2025 am 07:30 AM

OpenSSL，作為廣泛應用於安全通信的開源庫，提供了加密算法、密鑰和證書管理等功能。然而，其歷史版本中存在一些已知安全漏洞，其中一些危害極大。本文將重點介紹Debian系統中OpenSSL的常見漏洞及應對措施。 DebianOpenSSL已知漏洞：OpenSSL曾出現過多個嚴重漏洞，例如：心臟出血漏洞(CVE-2014-0160):該漏洞影響OpenSSL1.0.1至1.0.1f以及1.0.2至1.0.2beta版本。攻擊者可利用此漏洞未經授權讀取服務器上的敏感信息，包括加密密鑰等。