HTML、CSS、および jQuery: 美しいログインフォームを構築する-jsチュートリアル-php.cn

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

WBOY

リリース： 2023-10-24 12:24:43

オリジナル

747 人が閲覧しました

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

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

現代の Web デザインでは、美しく使いやすいログインフォームが非常に重要です。 HTML、CSS、jQuery の 3 つのテクノロジーを組み合わせて使用すると、魅力的なログインフォームを簡単に構築できます。この記事では、これらのテクニックを使用して美しく機能的なログインフォームを作成する方法を説明し、具体的なコード例を示します。

HTML 構造

まず、HTML 構造を作成しましょう。ログインフォームは通常、いくつかの入力ボックスと 1 つの送信ボタンで構成されます。簡単な例を次に示します。

<!DOCTYPE html>
<html>
<head>
  <title>登录表单</title>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
  <div class="container">
    <h2>用户登录</h2>
    <form id="login-form">
      <div class="form-group">
        <label for="username">用户名</label>
        <input type="text" id="username" name="username" placeholder="请输入用户名">
      </div>
      <div class="form-group">
        <label for="password">密码</label>
        <input type="password" id="password" name="password" placeholder="请输入密码">
      </div>
      <button type="submit">登录</button>
    </form>
  </div>

  <script src="jquery.min.js"></script>
  <script src="script.js"></script>
</body>
</html>

ログイン後にコピー

上記のコードでは、<div> 要素を使用して、ログインフォームのすべてのコンテンツを含むコンテナを作成しました。 <h2> タグはフォームのタイトルを表示するために使用されます。 <form> タグは、フォームの各入力項目と送信ボタンをラップするために使用されます。 <div class="form-group"> 各入力項目のラベルと入力ボックスを整理するために使用されます。

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 は背景色などを設定します。

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 サイトの他の関連記事を参照してください。