ログインジャンプページ HTMLページ-Golang-php.cn

ログインジャンプページ HTMLページ

王林

リリース： 2023-05-09 10:27:37

オリジナル

3238 人が閲覧しました

[ログインジャンプページ HTMLページ]

インターネットの急速な発展に伴い、ログイン機能を必要とするWebサイトやアプリケーションが増えています。これにより、Webサイトのセキュリティが向上するだけでなく、ユーザーにログイン機能が提供されます。よりパーソナライズされたカスタマイズされたサービス。ログインジャンプページは非常に一般的なログイン方法で、ユーザーが正しいユーザー名とパスワードを入力すると、対応するページに自動的にジャンプします。

この記事では、簡単なログインジャンプページのHTMLページの書き方を紹介します。

ステップ 1: HTML ファイルの作成

まず、新しい HTML ファイルを作成する必要があります。 HTML ファイルは、メモ帳または別のテキストエディタを使用して作成できます。ファイル名はカスタマイズできます。たとえば、ファイルに「login.html」という名前を付けることができます。

ステップ 2: 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宣言、メタタグなど。また、head に JavaScript コードブロックを導入しました。この JavaScript コードブロックは、ユーザーログインのロジックを処理するために使用されます。

HTML コードにログインフォームを追加しました。ユーザーはログインするためにユーザー名とパスワードを入力する必要があります。ユーザーがログインボタンをクリックするとJavaScriptコードが判定し、ユーザー名とパスワードが正しければ自動的に「welcome.html」ページにジャンプします。ユーザー名またはパスワードが間違っている場合は、再入力を求めるダイアログボックスが表示されます。

ステップ 3: ウェルカムページを作成する

ユーザーがログインに成功したら、ユーザーの個人情報、アカウント残高、最新ニュースなどが表示されるウェルカムページをユーザーに提供する必要があります。が表示できます。以下は、簡単なウェルカムページの 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>

ログイン後にコピー

このウェルカムページでは、タイトルタグ (h1)、段落タグ (p)、順序なしリストタグ (ul) などのいくつかの単純な HTML タグを使用します。、リスト項目ラベル (li) など。実際の開発では、さまざまなユーザーのニーズに合わせてこのページをパーソナライズできます。