HTML、CSS、jQuery を使用してフローティング プロンプトを持つフォームを作成する方法

HTML、CSS、jQuery を使用してフローティング プロンプトを持つフォームを作成する方法

現代の Web デザインでは、フォームは不可欠なコンポーネントの 1 つです。ユーザー エクスペリエンスを向上させるために、多くの場合、ユーザーがフォームに正しく入力できるように、フローティング プロンプトをフォームに追加する必要があります。この記事では、HTML、CSS、jQuery を使用してフローティング プロンプトを持つフォームを作成する方法を紹介し、具体的なコード例を示します。

まず、HTML フォームを作成する必要があります。フォームには、いくつかの入力フィールドと、対応するラベルおよびプロンプト情報を追加する必要があります。

<form id="myForm">
  <div class="form-group">
    <label for="name">姓名：</label>
    <input type="text" id="name" name="name">
    <span class="tooltip">请输入您的姓名</span>
  </div>
  
  <div class="form-group">
    <label for="email">邮箱：</label>
    <input type="email" id="email" name="email">
    <span class="tooltip">请输入有效的邮箱地址</span>
  </div>
  
  <div class="form-group">
    <label for="password">密码：</label>
    <input type="password" id="password" name="password">
    <span class="tooltip">密码长度应为6-12位</span>
  </div>
  
  <button type="submit">提交</button>
</form>

次に、CSS を使用してフォームのスタイルとレイアウトを定義し、フローティング プロンプトにスタイルを追加する必要があります。

.form-group {
  position: relative;
  margin-bottom: 20px;
}

.tooltip {
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #eee;
  padding: 5px;
  display: none;
}

.tooltip::before {
  content: "";
  position: absolute;
  top: -5px;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent #eee transparent;
}

.tooltip::after {
  content: "";
  position: absolute;
  top: -5px;
  left: 50%;
  margin-left: -3px;
  border-width: 3px;
  border-style: solid;
  border-color: transparent transparent #fff transparent;
}

上記のコードでは、フォーム内の各入力フィールドの親要素に、相対的に配置されたクラス「form-group」を追加しました。次に、フローティング チップの絶対配置クラス「tooltip」を定義します。 「display: none;」を使用して、最初はプロンプトを非表示にし、プロンプトのスタイルにいくつかの変更を加えます。

最後に、jQuery を使用して、ユーザーが入力フィールド上にマウスを置いたときにフローティング チップを表示する機能を実装する必要があります。

$(document).ready(function() {
  $('input').on('mouseover', function() {
    $(this).next('.tooltip').fadeIn();
  });
  
  $('input').on('mouseout', function() {
    $(this).next('.tooltip').fadeOut();
  });
  
  $('#myForm').on('submit', function() {
    // 表单验证逻辑
    if ($('input#name').val() === '') {
      $('input#name').next('.tooltip').fadeIn();
      return false;
    }
    
    if ($('input#email').val() === '') {
      $('input#email').next('.tooltip').fadeIn();
      return false;
    }
    
    // 其他表单验证逻辑
    
    return true;
  });
});

上記のコードでは、ユーザーが入力フィールド上にマウスを置くと、「fadeIn()」メソッドを使用して、対応するフローティング プロンプトを表示します。 「fadeOut()」メソッドを使用して、マウスが入力フィールドの外に出たときにフローティングチップを非表示にします。さらに、フォームが送信されるときに、必要に応じてフォーム検証ロジックを追加し、検証が失敗した場合に対応するフローティング プロンプトを表示できます。

上記の HTML、CSS、および jQuery コードを使用して、フローティング プロンプトを持つフォームを正常に作成できました。ユーザーがフォームに入力すると、フローティング プロンプトを通じて対応するプロンプト情報を取得できるため、ユーザー エクスペリエンスが向上します。この記事が、HTML、CSS、jQuery を使用してフォームを作成する際の参考になれば幸いです。

以上がHTML、CSS、jQuery を使用してフローティング プロンプトを持つフォームを作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。