HTML、CSS、および jQuery: 美しいログイン フォームを構築する

タグはフォームのタイトルを表示するために使用されます。

タグは、フォームの各入力項目と送信ボタンをラップするために使用されます。

各入力項目のラベルと入力ボックスを整理するために使用されます。

2. CSS スタイル

次に、ログイン フォームをより美しく、使いやすいものにするために、いくつかの CSS スタイルをログイン フォームに追加する必要があります。簡単なスタイルの例を次に示します。

.container { max-width: 400px; margin: 0 auto; padding: 20px; background-color: #f2f2f2; border-radius: 5px; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); } h2 { text-align: center; } .form-group { margin-bottom: 20px; } label { display: block; margin-bottom: 10px; font-weight: bold; } input[type="text"], input[type="password"] { width: 100%; padding: 10px; border: 1px solid #ccc; border-radius: 5px; } button[type="submit"] { display: block; width: 100%; padding: 10px; border: none; border-radius: 5px; background-color: #428bca; color: #fff; font-size: 16px; cursor: pointer; } button[type="submit"]:hover { background-color: #357ebd; }

ログイン後にコピー

上記のコードでは、いくつかの一般的な CSS プロパティを使用してログイン フォームの外観を設定しました。たとえば、max-width属性はコンテナの最大幅を 400 ピクセルにし、margin属性はコンテナを中央に配置し、padding属性はパディングを追加します。コンテナ、background-colorAttributes は背景色などを設定します。

3. jQuery インタラクション

最後に、jQuery を使用して、いくつかのインタラクティブな効果と検証関数を追加できます。たとえば、ユーザーがフォームを送信するときに、ユーザー名とパスワードが空であることを確認できます。以下は簡単な対話の例です。

$(document).ready(function() { $('#login-form').submit(function(e) { e.preventDefault(); // 阻止默认的表单提交行为 var username = $('#username').val(); var password = $('#password').val(); if (username === '' || password === '') { alert('用户名和密码不能为空'); } else { alert('登录成功'); // 这里可以添加具体的登录逻辑 } }); });

ログイン後にコピー

上記のコードでは、.submit()メソッドを使用してフォームの送信イベントをキャプチャします。e.preventDefault()メソッドを使用すると、デフォルトのフォーム送信動作を防ぐことができます。次に、ユーザー名とパスワードの値を取得し、簡単な検証を行います。ユーザー名またはパスワードが空の場合、警告ウィンドウがポップアップ表示されます。検証が成功した場合は、elseステートメントに特定のログイン ロジックを追加できます。

概要:

この記事では、HTML、CSS、jQuery を使用して美しいログイン フォームを構築する方法を学びました。 HTML を通じてフォームの構造を作成し、CSS スタイルを使用してフォームをより美しくし、jQuery を使用してインタラクティブな効果や検証機能を追加します。もちろん、上記は単なる例であり、ニーズや創造性に応じてさらにカスタマイズしたり拡張したりできます。この記事が、便利で魅力的なログイン フォームの作成に役立つことを願っています。

以上がHTML、CSS、および jQuery: 美しいログイン フォームを構築するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。