Login jump page html page-Golang-php.cn

王林

Release： 2023-05-09 10:27:37

Original

3175 people have browsed it

[Login jump page HTML page]

With the rapid development of the Internet, more and more websites or applications require login functions, which can not only improve the security of the website, but also provide users with More personalized and customized services. The login jump page is a very common login method. It can automatically jump to the corresponding page after the user enters the correct user name and password.

In this article, we will introduce how to write an HTML page for a simple login jump page.

Step 1: Create HTML file

First, we need to create a new HTML file. HTML files can be created using Notepad or another text editor. The file name can be customized. For example, we can name the file "login.html".

Step 2: Write HTML code

The following is a simple login jump page HTML code example:

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

Copy after login

In the above code, we use some new features of HTML5 Features, such as DOCTYPE declarations, meta tags, etc. We also introduced a JavaScript code block in the head. This JavaScript code block is used to handle the logic of user login.

In the HTML code, we added a login form, and users need to enter their username and password to log in. When the user clicks the login button, the JavaScript code will make a judgment. If the username and password are correct, it will automatically jump to the "welcome.html" page. If the username or password is wrong, a dialog box will pop up to prompt the user to re-enter it.

Step 3: Write the welcome page

If the user logs in successfully, we need to provide the user with a welcome page, where the user's personal information, account balance, latest news, etc. can be displayed. . The following is a simple welcome page HTML code example:

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

Copy after login

In this welcome page, we use some simple HTML tags, such as title tag (h1), paragraph tag (p), unordered list tag (ul), list item labels (li), etc. In actual development, we can personalize this page to meet the needs of different users.

Step 4: Publish the website on the server

The last step is to upload the HTML file to the server so that users can access our website through the Internet. This requires a reliable server and a client browser.

In actual development, we can upload HTML files through protocols such as FTP and SFTP, or use version control tools such as Git for management and release.

Conclusion

Login jump page HTML page is a very common login method, which can provide users with more secure and personalized services. In this article, we introduce how to write a simple login jump page HTML page. We hope it will be helpful to you when writing similar pages.

The above is the detailed content of Login jump page html page. For more information, please follow other related articles on the PHP Chinese website!