Comment créer un formulaire avec une invite flottante en utilisant HTML, CSS et jQuery

Comment créer un formulaire avec des invites flottantes en utilisant HTML, CSS et jQuery

Dans la conception Web moderne, les formulaires sont l'un des composants indispensables. Afin d'améliorer l'expérience utilisateur, nous devons souvent ajouter des invites flottantes au formulaire pour guider les utilisateurs à remplir correctement le formulaire. Cet article explique comment utiliser HTML, CSS et jQuery pour créer un formulaire avec des invites flottantes et fournit des exemples de code spécifiques.

Tout d'abord, nous devons créer le formulaire HTML. Dans le formulaire, nous devons ajouter des champs de saisie, ainsi que les étiquettes correspondantes et les informations d'invite.

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

Ensuite, nous devons utiliser CSS pour définir le style et la mise en page du formulaire et ajouter des styles à l'invite flottante.

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

Dans le code ci-dessus, nous avons ajouté une classe "form-group" relativement positionnée à l'élément parent de chaque champ de saisie du formulaire. Nous définissons ensuite une classe "tooltip" absolument positionnée pour la pointe flottante. Utilisez "display: none;" pour rendre l'invite invisible initialement et ajouter quelques modifications au style de l'invite.

Enfin, nous devons utiliser jQuery pour implémenter la fonction d'affichage d'une astuce flottante lorsque l'utilisateur passe la souris sur le champ de saisie.

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

Dans le code ci-dessus, lorsque l'utilisateur passe la souris sur le champ de saisie, nous utilisons la méthode "fadeIn()" pour afficher l'invite flottante correspondante. Nous utilisons la méthode "fadeOut()" pour masquer la pointe flottante lorsque la souris sort du champ de saisie. De plus, lorsque le formulaire est soumis, nous pouvons ajouter une logique de validation du formulaire si nécessaire et afficher l'invite flottante correspondante en cas d'échec de la validation.

Avec le code HTML, CSS et jQuery ci-dessus, nous avons réussi à créer un formulaire avec une invite flottante. Lorsque les utilisateurs remplissent le formulaire, ils peuvent obtenir les informations d'invite correspondantes via des invites flottantes, ce qui améliore l'expérience utilisateur. J'espère que cet article vous aidera lors de la création de formulaires en utilisant HTML, CSS et jQuery !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!