JS 開発検証フォームのチュートリアルフロントエンドレイアウト

検証フォーム

jsを使用してフォームを検証する方法を学びましょう

htmlコードは次のとおりです:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <div id="div">
        <form>
            <label>用户名:</label>
            <input type="text" class="name" id="name">
            <div id="sp" class="div"></div>                
            <label>密 码:</label>
            <input type="password" class="pwd" id="pwd">
            <div id="sp1" class="div"></div>
            <label>邮 箱:</label>
            <input type="text" class="email" id="email">
            <div id="sp2" class="div"></div>
            <label>爱 好:</label>
            <textarea rows="5" cols="30" class="txt" id="txt"></textarea>
            <div id="sp3" class="div"></div>
            <input type="button" class="sub" value="注册" id="sub">
        </form>
    </div>
</body>
</html>

次のプレビューレンダリングを見てみましょう:

布局_1.png

ページスタイルを処理する前にまずコードを見てみましょう

すべてのテキストボックスまたはテキストフィールドの下に div タグがあります。これは何に使用されますか? JavaScript を使用してフォームを検証するとき、入力内容がない場合はプロンプトメッセージが表示されます。、プロンプト情報の内容を div タグに入れます

上記のコードでは、id 属性と class 属性を確認しました。これらを使用してスタイルを作成できます

これはスタイルの処理に CSS を使用していないため、表示されるのは見苦しいので、次はCSSを使ってスタイルを変更しましょう

学び続ける

新しいファイル

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <div id="div"> <form> <label>用户名:</label> <input type="text" class="name" id="name"> <div id="sp" class="div"></div> <label>密码:</label> <input type="password" class="pwd" id="pwd"> <div id="sp1" class="div"></div> <label>邮箱:</label> <input type="text" class="email" id="email"> <div id="sp2" class="div"></div> <label>爱好:</label> <textarea rows="5" cols="30" class="txt" id="txt"></textarea> <div id="sp3" class="div"></div> <input type="button" class="sub" value="注册" id="sub"> </form> </div> </body> </html>

リセットコード

自動運転

提出する

プレビュー Clear