Comment créer un champ de saisie de recherche dans un formulaire HTML

Pour créer un champ de saisie de recherche dans un formulaire HTML, vous avez juste besoin de quelques éléments simples: une balise <form></form> et un élément <input> avec le type correct. Voici comment le faire correctement et efficacement.

Utilisez le type d'entrée search

HTML5 a introduit l'attribut type="search" , qui identifie sémantiquement l'entrée en tant que champ de recherche. Il se comporte de manière similaire à type="text" , mais il donne aux navigateurs et aux technologies d'assistance un indice que ce champ est pour les requêtes de recherche.

 <form action = "/ search" méthode = "get">
  <étiquette pour = "Search-Input"> Recherche: </bablowe>
  <input type = "search" id = "search-input" name = "q" placeholder = "entrez votre terme de recherche">
  <Button Type = "Soumider"> Recherche </fontificat>
</ form>

Composants clés expliqués

• <form> : enveloppe le bouton d'entrée et de soumission. L'attribut action spécifie où les données de formulaire seront envoyées (par exemple, un point de terminaison de recherche). La method="get" est généralement utilisée pour la recherche afin que la requête apparaisse dans l'URL, ce qui le rend partageable.
• <label> : Améliore l'accessibilité en associant du texte au champ de saisie.
• type="search" : indique qu'il s'agit d'un champ de recherche. Sur certains appareils (comme le mobile), cela peut modifier la disposition du clavier (par exemple, afficher un bouton de recherche).
• name="q" : Ceci est le nom de paramètre envoyé avec la requête (par exemple , ?q=apple ). Vous pouvez utiliser d'autres noms comme search , query , etc.
• placeholder : donne aux utilisateurs un indice sur ce qu'il faut entrer.
• <button type="submit"> : déclenche la soumission du formulaire.

Améliorations facultatives

Vous pouvez améliorer la convivialité et l'apparence avec quelques extras:

• Autofocus : ajoutez autofocus pour concentrer l'entrée lorsque la page se charge:

   <input type = "search" name = "q" placeholder = "search ..." autofocus>

• Association automatique : Contrôlez si le navigateur suggère des entrées précédentes:

  

   <input type = "search" name = "q" automatique AutoCletel = "ON">

• Longueur minimale et maximale :

   <input type = "search" name = "q" minLength = "2" maxLength = "50" requis>

• Style avec CSS : vous pouvez styliser l'entrée de recherche comme toute autre entrée ou utiliser des propriétés d'apparence pour éliminer les coins arrondis sur certains navigateurs:

   entrée [type = "search"] {
    rembourrage: 8px;
    taille de police: 16px;
    Border: 1px solide #ccc;
    Border-Radius: 4px;
    Aperçu: aucun;
  }

  Fondamentalement, c'est tout ce dont vous avez besoin. L'utilisation type="search" est un petit détail mais aide à la sémantique, à l'accessibilité et à l'expérience utilisateur, en particulier sur les appareils mobiles.

  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!