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>
次のプレビューレンダリングを見てみましょう:
ページスタイルを処理する前にまずコードを見てみましょう
すべてのテキスト ボックスまたはテキスト フィールドの下に 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>
