Login jump page html
In web development, login jump page is a common function. After the user logs in once, in order to facilitate the user to browse the website content and avoid the need for the user to re-enter the login information every time he visits a new page, we usually design a jump page to save the user's login information in a session so that the user can Continue browsing content on the website.
In this article, we will introduce how to use HTML and JavaScript to implement a login jump page.
- Create HTML page
First, we need to create an HTML page. You can create a blank HTML file directly in the code editor, and then add the following code:
<!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>
In this HTML page, we created a title and a prompt message. This page does not contain any login form as we will add this functionality in another page.
- Create a login page
Next, we need to create a login page. You can continue writing code in the same HTML file, or create a new HTML file and copy-paste the code into it. Here is a simple login form example:
<!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> In this login page, we have created a form that contains username and password input boxes and a submit button. When the user clicks the "Login" button, we save the username and password they entered in session storage, and then redirect the user to a window called The page of "homepage.html".
- In the first step, we created a blank HTML page named "login-redirect.html". Now we need to add a JavaScript script in it that when the page loads checks if the user is already logged in and redirects them to the correct page based on the logged in status.
The following is a simple JavaScript example that implements this functionality:
<!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>In this script, we first determine whether the user is logged in by checking whether the username and password exist in the session storage. If the user is not logged in, redirect them to a login page called "login.html"; otherwise, redirect them to a page called "homepage.html".
Test the login jump page- Now, we have completed writing the HTML and JavaScript code for the login jump page. We can launch these pages on a local or remote server and test them to ensure they complete the login redirect function correctly.
We can first try to access our "homepage.html" page without entering the username and password and check if it redirects to the login page. Afterwards, we can enter an arbitrary username and password into the login page and check if it is correctly saved in the session storage and redirected to the "homepage.html" page.
Summary
In this article, we introduced how to use HTML and JavaScript to implement a login jump page. We first created a blank jump page and wrote JavaScript code on it to check if the user is logged in when the page loads and redirect them to the correct page. After that, we created an HTML page containing the login form and added JavaScript code in it to save the username and password entered by the user in the session storage when they click on the "Login" button and redirect them to the jump Turn page. Finally, we make sure they complete the login redirect function correctly by launching these pages on a local or remote server and testing them.
The above is the detailed content of Login jump page html. For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
1390
52
What are the vulnerabilities of Debian OpenSSL
Apr 02, 2025 am 07:30 AM
OpenSSL, as an open source library widely used in secure communications, provides encryption algorithms, keys and certificate management functions. However, there are some known security vulnerabilities in its historical version, some of which are extremely harmful. This article will focus on common vulnerabilities and response measures for OpenSSL in Debian systems. DebianOpenSSL known vulnerabilities: OpenSSL has experienced several serious vulnerabilities, such as: Heart Bleeding Vulnerability (CVE-2014-0160): This vulnerability affects OpenSSL 1.0.1 to 1.0.1f and 1.0.2 to 1.0.2 beta versions. An attacker can use this vulnerability to unauthorized read sensitive information on the server, including encryption keys, etc.
What libraries are used for floating point number operations in Go?
Apr 02, 2025 pm 02:06 PM
The library used for floating-point number operation in Go language introduces how to ensure the accuracy is...
What is the problem with Queue thread in Go's crawler Colly?
Apr 02, 2025 pm 02:09 PM
Queue threading problem in Go crawler Colly explores the problem of using the Colly crawler library in Go language, developers often encounter problems with threads and request queues. �...
PostgreSQL monitoring method under Debian
Apr 02, 2025 am 07:27 AM
This article introduces a variety of methods and tools to monitor PostgreSQL databases under the Debian system, helping you to fully grasp database performance monitoring. 1. Use PostgreSQL to build-in monitoring view PostgreSQL itself provides multiple views for monitoring database activities: pg_stat_activity: displays database activities in real time, including connections, queries, transactions and other information. pg_stat_replication: Monitors replication status, especially suitable for stream replication clusters. pg_stat_database: Provides database statistics, such as database size, transaction commit/rollback times and other key indicators. 2. Use log analysis tool pgBadg
Transforming from front-end to back-end development, is it more promising to learn Java or Golang?
Apr 02, 2025 am 09:12 AM
Backend learning path: The exploration journey from front-end to back-end As a back-end beginner who transforms from front-end development, you already have the foundation of nodejs,...
How to solve the user_id type conversion problem when using Redis Stream to implement message queues in Go language?
Apr 02, 2025 pm 04:54 PM
The problem of using RedisStream to implement message queues in Go language is using Go language and Redis...
In Go, why does printing strings with Println and string() functions have different effects?
Apr 02, 2025 pm 02:03 PM
The difference between string printing in Go language: The difference in the effect of using Println and string() functions is in Go...
How to specify the database associated with the model in Beego ORM?
Apr 02, 2025 pm 03:54 PM
Under the BeegoORM framework, how to specify the database associated with the model? Many Beego projects require multiple databases to be operated simultaneously. When using Beego...
