[Page de saut de connexion page HTML]
Avec le développement rapide d'Internet, de plus en plus de sites Web ou d'applications nécessitent des fonctions de connexion, ce qui améliore non seulement la sécurité du site Web, mais fournit également utilisateurs avec des services plus personnalisés et personnalisés. La page de saut de connexion est une méthode de connexion très courante. Elle peut automatiquement accéder à la page correspondante une fois que l'utilisateur a saisi le nom d'utilisateur et le mot de passe corrects.
Dans cet article, nous présenterons comment écrire une page HTML pour une simple page de saut de connexion.
Tout d'abord, nous devons créer un nouveau fichier HTML. Les fichiers HTML peuvent être créés à l'aide du Bloc-notes ou d'un autre éditeur de texte. Le nom du fichier peut être personnalisé. Par exemple, nous pouvons nommer le fichier « login.html ».
Ce qui suit est un exemple de code HTML de page de connexion simple :
<!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>
Dans le code ci-dessus, nous de nouvelles fonctionnalités de HTML5 sont utilisées, telles que la déclaration DOCTYPE, les balises méta, etc. Nous avons également introduit un bloc de code JavaScript dans l'en-tête. Ce bloc de code JavaScript est utilisé pour gérer la logique de connexion des utilisateurs.
Dans le code HTML, nous avons ajouté un formulaire de connexion où l'utilisateur doit saisir son nom d'utilisateur et son mot de passe pour se connecter. Lorsque l'utilisateur clique sur le bouton de connexion, le code JavaScript fera un jugement. Si le nom d'utilisateur et le mot de passe sont corrects, il passera automatiquement à la page "welcome.html". Si le nom d'utilisateur ou le mot de passe est erroné, une boîte de dialogue apparaîtra pour inviter l'utilisateur à le saisir à nouveau.
Si l'utilisateur se connecte avec succès, nous devons fournir une page d'accueil pour l'utilisateur, où les informations personnelles de l'utilisateur, le solde du compte, dernières nouvelles etc. Ce qui suit est un exemple de code HTML simple pour une page d'accueil :
<!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>
Dans cette page d'accueil, nous utilisons des balises HTML simples, telles que la balise de titre (h1), la balise de paragraphe (p), les balises de liste non ordonnées ( ul), lister les balises d'éléments (li), etc. En cours de développement, nous pouvons personnaliser cette page pour répondre aux besoins des différents utilisateurs.
La dernière étape, nous devons télécharger le fichier HTML sur le serveur afin que les utilisateurs puissent accéder à notre site Web via Internet. Cela nécessite un serveur fiable et un navigateur client.
Dans le développement réel, nous pouvons télécharger des fichiers HTML via des protocoles tels que FTP et SFTP, ou utiliser des outils de contrôle de version tels que Git pour la gestion et la publication.
Page de renvoi de connexion La page HTML est une méthode de connexion très courante, qui peut fournir aux utilisateurs des services plus sécurisés et personnalisés. Dans cet article, nous expliquons comment rédiger une simple page HTML de page de renvoi de connexion. Nous espérons qu'elle vous sera utile lors de la rédaction de pages similaires.
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!