How to create a form with a floating prompt using HTML, CSS and jQuery

How to create a form with floating prompts using HTML, CSS and jQuery

In modern web design, forms are one of the indispensable components. In order to improve user experience, we often need to add some floating prompts to the form to guide users to fill in the form correctly. This article will introduce how to use HTML, CSS and jQuery to create a form with floating prompts, and provide specific code examples.

First, we need to create the HTML form. In the form, we need to add some input fields, as well as corresponding labels and prompt information.

<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>

Next, we need to use CSS to define the style and layout of the form and add styles to the floating prompt.

.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;
}

In the above code, we added a relatively positioned class "form-group" to the parent element of each input field in the form. Then, we define an absolutely positioned class "tooltip" for the floating tip. Use "display: none;" to make the prompt invisible initially and add some modifications to the prompt's style.

Finally, we need to use jQuery to implement the function of displaying a floating tip when the user hovers the mouse over the input field.

$(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;
  });
});

In the above code, when the user hovers the mouse over the input field, we use the "fadeIn()" method to display the corresponding floating prompt. We use the "fadeOut()" method to hide the floating tip when the mouse moves out of the input field. In addition, when the form is submitted, we can add form validation logic as needed and display the corresponding floating prompt when validation fails.

With the above HTML, CSS and jQuery code, we successfully created a form with a floating prompt. When users fill in the form, they can get corresponding prompt information through floating prompts, which improves the user experience. I hope this article helps you when creating forms using HTML, CSS and jQuery!

The above is the detailed content of How to create a form with a floating prompt using HTML, CSS and jQuery. For more information, please follow other related articles on the PHP Chinese website!