Comment créer un champ de recherche HTML

Comment créer un champ de recherche HTML ? Vous apprendre à mettre en œuvre rapidement

Les sites internet modernes sont indissociables de la fonction de recherche, devenue l'un des éléments de base du site internet. Lorsque les utilisateurs ont besoin de trouver des informations spécifiques, en particulier lorsque le contenu du site Web est volumineux, la fonction de recherche est particulièrement importante. En HTML, l'implémentation d'un champ de recherche ne nécessite pas trop de code et de compétences. Il suffit de suivre certaines spécifications et peut être facilement implémenté.

Cet article présentera en détail comment implémenter le champ de recherche HTML, ainsi que quelques conseils pratiques, afin que vous puissiez ajouter rapidement des fonctions de recherche à votre site Web.

1. Créer la structure de base d'un champ de recherche HTML

Pour créer un champ de recherche, nous devons d'abord utiliser HTML pour définir la structure de base du champ de recherche. Dans le champ de recherche, nous utilisons généralement l'élément , qui comporte de nombreux types. Nous utilisons ici le type type="text" pour définir une zone de saisie de texte, comme indiqué ci-dessous :

<form>
  <input type="text" placeholder="请在这里输入">
</form>

Dans cet extrait de code HTML, nous avons créé un élément

l'attribut placeholder est utilisé pour fournir des informations d'invite pour la zone de saisie. Remarque : L'attribut placeholder est un nouvel attribut en HTML5. Cet attribut peut être utilisé pour saisir des informations d'invite dans la zone de texte. Il disparaîtra une fois que l'utilisateur aura saisi du contenu dans la zone de texte.

2. Ajouter un bouton de soumission

Lors de la création de la fonction de recherche, nous avons également besoin d'un bouton de soumission. Une fois que l'utilisateur a saisi du texte, il doit utiliser la souris ou le clavier pour saisir et soumettre la demande de recherche. Pour le bouton de soumission, nous utilisons également l'élément de type "submit" comme indiqué ci-dessous :

<form>
  <input type="text" placeholder="请在这里输入">
  <input type="submit" value="搜索">
</form>

Dans ce code HTML, nous ajoutons un élément bouton d'envoi du formulaire, l'attribut value spécifie le texte que le bouton affiche sur la page.

3. Implémentation de la fonction de recherche

Nous avons défini la structure et le style de base du champ de recherche ci-dessus, puis nous devons implémenter la fonction de recherche. La méthode la plus simple consiste à utiliser l'attribut action du HTML pour transmettre la demande du formulaire de recherche au serveur pour traitement. Par exemple, le code suivant soumettra la demande de formulaire de recherche à la page « search.php » pour traitement.

<form action="search.php">
  <input type="text" placeholder="请在这里输入">
  <input type="submit" value="搜索">
</form>

Cependant, si vous n'avez pas encore de serveur ou si vous n'avez pas encore écrit de code côté serveur, vous pouvez utiliser JavaScript en HTML pour implémenter la fonction de recherche. Nous utilisons JavaScript pour écouter l'événement de clic du bouton de soumission et obtenir les informations textuelles dans la zone de saisie. L'opération spécifique est la suivante :

<form>
  <input id="searchBox" type="text" placeholder="请在这里输入">
  <input type="submit" value="搜索" onclick="search()">
</form>

<script>
function search() {
  var keyword = document.getElementById("searchBox").value;
  alert("正在搜索：" + keyword);
  // 实现搜索功能
}
</script>

Dans cet exemple, nous ajoutons d'abord un attribut id à l'élément afin que la référence à l'élément puisse être facilement obtenue dans le code JavaScript. Nous définissons ensuite une fonction JavaScript appelée « recherche » qui est appelée par l'événement onclick du bouton de soumission. Dans la fonction « recherche », nous obtenons la référence à la zone de saisie via document.getElementById, obtenons le mot-clé de recherche saisi dans la zone de saisie, et enfin utilisons la fonction d'alerte pour afficher le mot-clé recherché. Derrière la fonction d'alerte, nous pouvons écrire notre propre code de recherche.

4. Implémenter la fonction d'invite automatique

La fonction d'invite automatique dans la zone de recherche permet aux utilisateurs d'afficher automatiquement des suggestions de recherche pertinentes lors de la saisie de mots-clés. Cette fonctionnalité est très utile car elle aide les utilisateurs à trouver plus rapidement les informations qu’ils souhaitent. Pour implémenter la fonction d'invite automatique du champ de recherche en HTML, vous pouvez utiliser JavaScript pour l'implémenter. Par exemple, nous pouvons lier l'événement onkeyup de la zone de saisie et des suggestions de recherche pertinentes apparaîtront automatiquement pour l'utilisateur chaque fois que des caractères sont saisis dans la zone de saisie.

<form>
  <input id="searchBox" type="text" placeholder="请在这里输入" onkeyup="showHint()">
  <input type="submit" value="搜索">
</form>

<script>
function showHint() {
  var keyword = document.getElementById("searchBox").value;
  var xmlhttp;
  if (keyword.length==0) { 
    document.getElementById("hintBox").innerHTML="";
    return;
  }
  if (window.XMLHttpRequest) {
    xmlhttp=new XMLHttpRequest();
  } else { 
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
  xmlhttp.onreadystatechange=function() {
    if (this.readyState==4 && this.status==200) {
      document.getElementById("hintBox").innerHTML=this.responseText;
    }
  }
  xmlhttp.open("GET","gethint.php?q="+keyword,true);
  xmlhttp.send();
}
</script>

Dans le code ci-dessus, nous définissons une fonction nommée "showHint", qui utilise l'objet XMLHttpRequest pour envoyer une requête get en arrière-plan afin d'obtenir des suggestions de recherche liées aux mots clés. Lorsque les suggestions de recherche sont obtenues, nous les affichons dans l'élément HTML défini avec l'identifiant "hintBox".

5. Ajouter des styles

Enfin, nous pouvons embellir l'apparence du champ de recherche grâce aux styles CSS. Par exemple, le style du champ de recherche peut être unifié en définissant la couleur d'arrière-plan, la bordure extérieure, la marge intérieure, etc. Le code est le suivant :

input[type="text"] {
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 10px;
  outline: none;
}
input[type="text"]:focus {
  border-color: #369;
  box-shadow: 0 0 5px #369;
}
input[type="submit"] {
  background-color: #369;
  color: #fff;
  border: none;
  padding: 10px 20px;
  margin-left: -5px;
  border-radius: 0 10px 10px 0;
  cursor: pointer;
}
input[type="submit"]:hover {
  background-color: #258;
}

Dans le code ci-dessus, nous définissons la marge intérieure, la bordure extérieure et cercle de la zone de saisie et d'autres styles pour la rendre plus belle. En même temps, nous avons également défini une pseudo-classe :focus Lorsque la zone de saisie obtient le focus, le style de bordure sera modifié pour établir une relation avec le rendu de la boîte. Dans le style du bouton de soumission, nous définissons le changement de style lorsque la souris est survolée.

Résumé

Grâce à l'introduction de cet article, nous avons appris à utiliser HTML et JavaScript pour créer un champ de recherche et maîtrisé certaines techniques courantes, telles que les fonctions d'invite automatique et les styles d'embellissement. Le principe de mise en œuvre du champ de recherche est également le principe de mise en œuvre des hyperliens. La méthode de mise en œuvre la plus simple consiste à utiliser la fonction de soumission des éléments du formulaire HTML pour envoyer les données du formulaire au serveur pour traitement. Bien sûr, nous pouvons également utiliser des hooks JavaScript pour intercepter les données en vue d'un traitement partiel au niveau du front-end, ce qui sera souvent plus rapide, plus sûr et répondra mieux aux besoins de l'entreprise. Après avoir maîtrisé ces compétences, je pense que vos pages Web seront plus colorées.

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!