Page de saut de connexion HTML
Dans le développement Web, la page de saut de connexion est une fonction courante. Une fois que l'utilisateur s'est connecté une fois, afin de faciliter la navigation de l'utilisateur sur le contenu du site Web et d'éviter à l'utilisateur d'avoir à saisir à nouveau les informations de connexion à chaque fois qu'il visite une nouvelle page, nous concevons généralement une page de renvoi pour enregistrer les informations de connexion de l'utilisateur. informations de connexion dans une session afin que l'utilisateur puisse continuer à parcourir le contenu du site Web.
Dans cet article, nous présenterons comment utiliser HTML et JavaScript pour implémenter une page de renvoi de connexion.
- Créer une page HTML
Tout d'abord, nous devons créer une page HTML. Vous pouvez créer un fichier HTML vierge directement dans l'éditeur de code, puis ajouter le code suivant :
<!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>
Dans cette page HTML, nous avons créé un titre et un message d'invite. Cette page ne contient aucun formulaire de connexion car nous ajouterons cette fonctionnalité dans une autre page.
- Créer une page de connexion
Ensuite, nous devons créer une page de connexion. Vous pouvez continuer à écrire le code dans le même fichier HTML ou créer un nouveau fichier HTML et y copier-coller le code. Voici un exemple simple de formulaire de connexion :
<!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> Dans cette page de connexion, nous avons créé un formulaire avec des zones de saisie du nom d'utilisateur et du mot de passe et un bouton d'envoi. Lorsque l'utilisateur clique sur le bouton « Connexion », nous enregistrons le nom d'utilisateur et le mot de passe qu'il a saisis dans le stockage de session, puis redirigeons l'utilisateur vers une page appelée « homepage.html » via la fonction window.location.replace() en JavaScript.
- Implémentation de la page de saut
Dans la première étape, nous avons créé une page HTML vierge nommée "login-redirect.html". Nous devons maintenant y ajouter un script JavaScript qui, lorsque la page se charge, vérifie si l'utilisateur est déjà connecté et le redirige vers la bonne page en fonction de l'état de connexion.
Voici un exemple JavaScript simple qui implémente cette fonctionnalité :
<!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>Dans ce script, nous déterminons d'abord si l'utilisateur est connecté en vérifiant si le nom d'utilisateur et le mot de passe existent dans le stockage de la session. Si l'utilisateur n'est pas connecté, redirigez-le vers une page de connexion appelée « login.html », sinon redirigez-le vers une page appelée « homepage.html ».
- Test de la page de raccourci de connexion
Maintenant, nous avons terminé l'écriture du code HTML et JavaScript pour la page de raccourci de connexion. Nous pouvons lancer ces pages sur un serveur local ou distant et les tester pour nous assurer qu'elles remplissent correctement la fonction de redirection de connexion.
Nous pouvons d'abord essayer d'accéder à notre page "homepage.html" sans saisir de nom d'utilisateur et de mot de passe et vérifier si elle redirige vers la page de connexion. Ensuite, nous pouvons saisir un nom d'utilisateur et un mot de passe arbitraires dans la page de connexion et vérifier s'ils sont correctement enregistrés dans le stockage de session et redirigés vers la page "homepage.html".
Résumé
Dans cet article, nous avons présenté comment utiliser HTML et JavaScript pour implémenter une page de renvoi de connexion. Nous avons d'abord créé une page de renvoi vierge et écrit du code JavaScript dessus pour vérifier si l'utilisateur est connecté lors du chargement de la page et le rediriger vers la bonne page. Après cela, nous avons créé une page HTML contenant le formulaire de connexion et y avons ajouté du code JavaScript pour enregistrer le nom d'utilisateur et le mot de passe saisis par l'utilisateur dans le stockage de session lorsqu'il clique sur le bouton "Connexion" et les rediriger vers la page de saut Tourner. Enfin, nous nous assurons qu'ils remplissent correctement la fonction de redirection de connexion en lançant ces pages sur un serveur local ou distant et en les testant.
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
Video Face Swap
Échangez les visages dans n'importe quelle vidéo sans effort grâce à notre outil d'échange de visage AI entièrement gratuit !
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Quelles sont les vulnérabilités de Debian OpenSSL
Apr 02, 2025 am 07:30 AM
OpenSSL, en tant que bibliothèque open source largement utilisée dans les communications sécurisées, fournit des algorithmes de chiffrement, des clés et des fonctions de gestion des certificats. Cependant, il existe des vulnérabilités de sécurité connues dans sa version historique, dont certaines sont extrêmement nocives. Cet article se concentrera sur les vulnérabilités et les mesures de réponse communes pour OpenSSL dans Debian Systems. DebianopenSSL CONNUTS Vulnérabilités: OpenSSL a connu plusieurs vulnérabilités graves, telles que: la vulnérabilité des saignements cardiaques (CVE-2014-0160): cette vulnérabilité affecte OpenSSL 1.0.1 à 1.0.1F et 1.0.2 à 1.0.2 Versions bêta. Un attaquant peut utiliser cette vulnérabilité à des informations sensibles en lecture non autorisées sur le serveur, y compris les clés de chiffrement, etc.
Quelles bibliothèques sont utilisées pour les opérations du numéro de point flottantes en Go?
Apr 02, 2025 pm 02:06 PM
La bibliothèque utilisée pour le fonctionnement du numéro de point flottante dans le langage go présente comment s'assurer que la précision est ...
Quel est le problème avec le fil de file d'attente dans GO's Crawler Colly?
Apr 02, 2025 pm 02:09 PM
Problème de threading de file d'attente dans Go Crawler Colly explore le problème de l'utilisation de la bibliothèque Crawler Crawler dans le langage Go, les développeurs rencontrent souvent des problèmes avec les threads et les files d'attente de demande. � ...
Méthode de surveillance postgresql sous Debian
Apr 02, 2025 am 07:27 AM
Cet article présente une variété de méthodes et d'outils pour surveiller les bases de données PostgreSQL sous le système Debian, vous aidant à saisir pleinement la surveillance des performances de la base de données. 1. Utilisez PostgreSQL pour reprendre la surveillance Afficher PostgreSQL lui-même offre plusieurs vues pour surveiller les activités de la base de données: PG_STAT_ACTIVITY: affiche les activités de la base de données en temps réel, y compris les connexions, les requêtes, les transactions et autres informations. PG_STAT_REPLIcation: surveille l'état de réplication, en particulier adapté aux grappes de réplication de flux. PG_STAT_DATABASE: Fournit des statistiques de base de données, telles que la taille de la base de données, les temps de validation / recul des transactions et d'autres indicateurs clés. 2. Utilisez l'outil d'analyse de journaux pgbadg
Transformant du développement frontal au développement back-end, est-il plus prometteur d'apprendre Java ou Golang?
Apr 02, 2025 am 09:12 AM
Chemin d'apprentissage du backend: le parcours d'exploration du front-end à l'arrière-end en tant que débutant back-end qui se transforme du développement frontal, vous avez déjà la base de Nodejs, ...
Dans Go, pourquoi les chaînes d'impression avec println et string () ont-elles des effets différents?
Apr 02, 2025 pm 02:03 PM
La différence entre l'impression de chaîne dans le langage go: la différence dans l'effet de l'utilisation de fonctions println et string () est en Go ...
Comment résoudre le problème de conversion de type user_id lors de l'utilisation du flux redis pour implémenter les files d'attente de messages dans le langage Go?
Apr 02, 2025 pm 04:54 PM
Le problème de l'utilisation de Redessstream pour implémenter les files d'attente de messages dans le langage GO consiste à utiliser le langage GO et redis ...
Comment spécifier la base de données associée au modèle de Beego ORM?
Apr 02, 2025 pm 03:54 PM
Dans le cadre du cadre de beegoorm, comment spécifier la base de données associée au modèle? De nombreux projets Beego nécessitent que plusieurs bases de données soient opérées simultanément. Lorsque vous utilisez Beego ...
