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

登入跳轉頁面html頁面

王林

發布： 2023-05-09 10:27:37

原創

3134 人瀏覽過

【登入跳頁HTML頁面】

隨著網路的快速發展，越來越多的網站或應用程式需要登入功能，這不僅可以提高網站的安全性，還可以為使用者提供更加個人化、客製化的服務。而登入跳轉頁面則是非常常見的登入方式，它可以在使用者輸入正確的使用者名稱和密碼後，自動跳到對應的頁面。

在本文中，我們將介紹如何寫一個簡單的登入跳轉頁面的HTML頁面。

步驟一：建立HTML檔案

首先，我們需要建立一個新的HTML檔案。可以使用記事本或其他的文字編輯器來建立HTML檔案。檔案名稱可以自訂，例如我們可以將檔案命名為"login.html"。

步驟二：寫HTML程式碼

下面是一個簡單的登入跳頁HTML程式碼範例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>登录跳转页面</title>
    <script>
        function login() {
            var username = document.getElementById("username").value;
            var password = document.getElementById("password").value;
            if(username == "admin" && password == "admin") {
                window.location.href = "welcome.html";
            }
            else {
                alert("用户名或密码错误！");
            }
        }
    </script>
</head>
<body>
    <h1>登录跳转页面</h1>
    <form>
        <label for="username">用户名：</label>
        <input type="text" id="username" name="username"><br>
        <label for="password">密码：</label>
        <input type="password" id="password" name="password"><br>
        <input type="button" value="登录" onclick="login()">
    </form>
</body>
</html>

登入後複製

在上述程式碼中，我們使用了HTML5的一些新特性，如DOCTYPE聲明、meta標籤等等。我們還在頭部引入了一個JavaScript的程式碼區塊。這個JavaScript程式碼區塊用來處理使用者登入的邏輯。

在HTML程式碼中，我們新增了一個登入表單，使用者需要輸入使用者名稱和密碼才能登入。當使用者點擊登入按鈕的時候，JavaScript程式碼會進行判斷，如果使用者名稱和密碼都正確，就會自動跳到"welcome.html"頁面。如果使用者名稱或密碼錯誤，就會跳出對話方塊提示使用者重新輸入。

步驟三：寫歡迎頁面

如果使用者登入成功，我們需要提供使用者一個歡迎頁面，可以在這個頁面展示使用者的個人資訊、帳戶餘額、最新的訊息等等。以下是一個簡單的歡迎頁面HTML程式碼範例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>欢迎页面</title>
</head>
<body>
    <h1>欢迎回来！</h1>
    <p>您的个人信息：</p>
    <ul>
        <li>姓名：张三</li>
        <li>性别：男</li>
        <li>年龄：30岁</li>
        <li>联系方式：13800138000</li>
    </ul>
    <p>账户余额：10000元</p>
    <p>最新消息：</p>
    <ul>
        <li>中国银行今天公布2021年公益观察数据，截至2021年12月底，该行共计向政府福利机构、教育、扶贫、环保等公益领域累计捐赠15.28亿元人民币。</li>
    </ul>
</body>
</html>

登入後複製

在這個歡迎頁面中，我們使用了一些簡單的HTML標籤，例如標題標籤（h1）、段落標籤（p）、無序列表標籤（ul）、列表項目標籤（li）等等。在實際開發中，我們可以將這個頁面進行個人化，以滿足不同使用者的需求。