登録ページを実装するためのJS、CSS、HTML

HTML と CSS で実装された登録ページテンプレート。早速、コードを見てみましょう。

更新: JavaScript を使用して、ユーザー名とパスワードのフォーム検証を実装します。

コードは次のとおりです。

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
    <メタ文字セット="UTF-8">
    <title>登録ページ</title>
    <スタイル>
        *{
            マージン: 0px;
            パディング: 0px;
            ボックスのサイズ: 境界線ボックス;
        }
        体{
            背景: url("img/register_bg.png") 繰り返しなし 中央;
            パディング上部: 25px;
        }

        .rg_layout{
            幅: 900ピクセル;
            高さ: 500px;
            境界線: 8px 実線 #EEEEEE;
            背景色: 白;
            /* div を水平方向に中央揃えする */
            マージン: 自動;
        }

        .rg_left{
            /*境界線: 1px 実線赤;*/
            フロート: 左;
            マージン: 15px;
        }
        .rg_left > p:最初の子{
            カラー:#FFD026;
            フォントサイズ: 20px;
        }

        .rg_left > p:最後の子{
            色:#A6A6A6;
            フォントサイズ: 20px;

        }
        .rg_center{
            フロート: 左;
            /* 境界線: 1px 実線赤;*/

        }

        .rg_right{
            /*境界線: 1px 実線赤;*/
            フロート: 右;
            マージン: 15px;
        }

        .rg_right > p:最初の子{
            フォントサイズ: 15px;

        }
        .rg_right pa {
            色:ピンク;
        }

        .td_left{
            幅: 100ピクセル;
            テキスト配置: 右;
            高さ: 45px;
        }
        .td_right{
            左パディング: 50px;
        }

        #ユーザー名、#パスワード、#メールアドレス、#名前、#電話番号、#誕生日、#チェックコード{
            幅: 251ピクセル;
            高さ: 32px;
            境界線: 1px 実線 #A6A6A6 ;
            /*境界線の半径を設定する*/
            境界線の半径: 5px;
            左パディング: 10px;
        }
        #チェックコード{
            幅: 110ピクセル;
        }

        #img_check{
            高さ: 32px;
            垂直位置合わせ: 中央;
        }

        #btn_sub{
            幅: 150ピクセル;
            高さ: 40px;
            背景色: #FFD026;
            境界線: 1px実線 #FFD026 ;
        }
        。エラー {
            色: 赤;
        }
        #td_sub {
            左パディング: 150px;
        }

    </スタイル>

    <スクリプト>
        //アカウントパスワードフォーム検証を実装する window.onload = function () {
            //onsubmit イベントをフォームにバインドします //つまり、登録ボタンをクリックすると、ユーザー名とパスワードが正しいかどうかが確認されます document.getElementById("form").onsubmit = function () {
                //ユーザー検証メソッド checkUsername() を呼び出します。
                //パスワード検証メソッド checkPassword() を呼び出します。
                checkUsername() と checkPassword() を返します。
            }

            // フォーカス解除イベントをユーザー名とパスワードにそれぞれバインドします // フォーカスがオフになると、ユーザー名とパスワードが正しいかどうかが確認されます // ここではメソッドに括弧がないことに注意してください document.getElementById("username").onblur = checkUsername;
            document.getElementById("password").onblur = checkPassword;
        }

        //ユーザー名を確認する function checkUsername() {
            //1. ユーザー名の値を取得します。 var username = document.getElementById("username").value;
            //2. 正規表現を定義する var reg_username = /^\w{6,12}$/;
            //3. 値が通常のルールに準拠しているかどうかを判断します。var flag = reg_username.test(username);
            //4. プロンプト情報 var s_username = document.getElementById("s_username");

            if (フラグ) {
                //プロンプトの緑のチェックマーク s_username.innerHTML = "<img width='35' height='25' src='img/gou.png' />";
            } それ以外 {
                //赤いユーザー名が間違っていることを通知する s_username.innerHTML = "ユーザー名の形式が正しくありません";
            }
            フラグを返します。
        }

        //パスワードチェック関数 checkPassword() {
            //1. ユーザー名の値を取得します。 var password = document.getElementById("password").value;
            //2. 正規表現を定義する var reg_password = /^\w{6,12}$/;
            //3. 値が通常のルールに準拠しているかどうかを判断します。var flag = reg_password.test(password);
            //4. プロンプト情報 var s_password = document.getElementById("s_password");

            if (フラグ) {
                //緑のチェックマークを表示 s_password.innerHTML = "<img width='35' height='25' src='img/gou.png' />";
            } それ以外 {
                //赤いユーザー名が間違っていることを通知する s_password.innerHTML = "パスワードの形式が正しくありません";
            }
            フラグを返します。
        }


    </スクリプト>
</head>
<本文>

<div class="rg_layout">
    <div class="rg_left">
        <p>新規ユーザー登録</p>
        <p>ユーザー登録</p>

    </div>

    <div class="rg_center">
        <div class="rg_form">
            <!--フォームを定義する-->
            <フォームアクション="#" id="フォーム" メソッド="get">
                <テーブル>
                    <tr>
                        <td class="td_left"><label for="username">ユーザー名</label></td>
                        <td class="td_right">
                            <input type="text" name="username" id="username" placeholder="ユーザー名を入力してください">
                            <span id="s_username" class="error"></span>
                        </td>
                    </tr>

                    <tr>
                        <td class="td_left"><label for="password">パスワード</label></td>
                        <td class="td_right">
                            <input type="password" name="password" id="password" placeholder="パスワードを入力してください">
                            <span id="s_password" class="error"></span>
                        </td>
                    </tr>

                    <tr>
                        <td class="td_left"><label for="email">メール</label></td>
                        <td class="td_right"><input type="email" name="email" id="email" placeholder="メールアドレスを入力してください"></td>
                    </tr>

                    <tr>
                        <td class="td_left"><label for="name">名前</label></td>
                        <td class="td_right"><input type="text" name="name" id="name" placeholder="お名前を入力してください"></td>
                    </tr>

                    <tr>
                        <td class="td_left"><label for="tel">携帯電話番号</label></td>
                        <td class="td_right"><input type="text" name="tel" id="tel" placeholder="電話番号を入力してください"></td>
                    </tr>

                    <tr>
                        <td class="td_left"><label>性別</label></td>
                        <td class="td_right">
                            <input type="radio" name="gender" value="male"> 男性<input type="radio" name="gender" value="female"> 女性</td>
                    </tr>

                    <tr>
                        <td class="td_left"><label for="birthday">生年月日</label></td>
                        <td class="td_right"><input type="date" name="birthday" id="birthday" placeholder="生年月日を入力してください"></td>
                    </tr>

                    <tr>
                        <td class="td_left"><label for="checkcode" >確認コード</label></td>
                        <td class="td_right"><input type="text" name="checkcode" id="checkcode" placeholder="確認コードを入力してください">
                            <img id="img_check" src="img/verify_code.jpg">
                        </td>
                    </tr>

                    <tr>
                        <td colspan="2" id="td_sub"><input type="submit" id="btn_sub" value="登録"></td>
                    </tr>
                </テーブル>

            </フォーム>

        </div>

    </div>

    <div class="rg_right">
        <p>すでにアカウントをお持ちですか?<a href="#" >今すぐログイン</a></p>
    </div>

</div>
</本文>
</html>

操作効果: