Maison > interface Web > tutoriel HTML > le corps du texte

Comment utiliser le type de saisie de recherche en HTML ?

WBOY
Libérer: 2023-09-06 11:45:04
avant
1338 Les gens l'ont consulté

Comment utiliser le type de saisie de recherche en HTML ?

Internet nous fournit de nombreux services auxquels nous pouvons accéder via les sites Web respectifs. Très souvent, nous devons rechercher des informations sur un sujet particulier. Pour effectuer une recherche sur Internet, nous pouvons utiliser des moteurs de recherche comme Google, Yahoo, Ask, Bing etc. Vous devez avoir observé la zone de texte disponible pour saisir les mots-clés de recherche. Nous tapons les mots-clés et cela nous amène à la page suivante où les résultats correspondants, récupérés sur le serveur, sont affichés. Lorsque nous concevons un formulaire en HTML pour capturer les données de l'utilisateur, nous utilisons plusieurs contrôles. Nous pouvons également créer une zone de texte dans un formulaire HTML qui peut se comporter comme un champ de recherche et effectuer une recherche Google.

Pour effectuer un tel contrôle, nous utilisons balise en HTML dans le formulaire. Cela ressemble à une zone de texte normale, mais elle est capable d'effectuer une recherche sur site.

让我们来看一个基本的SEARCH控件程序。

示例

<html>
<head><title></title>
   <script>
      function show(){
         s=searchForm.searchField.value;
         document.write("You have searched for "+s);
      }
   </script>
</head>
<body>
   <form id="searchForm">
         <label for="sea">Search for : <label>
         <input type="search" name="searchField">
         <br><br>
         <input type="submit" value="Search" onclick="show()">
   </form>   
</body>
</html>
Copier après la connexion

这个程序将使用JavaScript代码在下一页上显示搜索到的文本。

您可能在使用Google时注意到,如下所示:

示例

要做到这一点,我们可以在标签中使用PLACEHOLDER属性。让我们看一个例子。

<html>
<body>
   <form id="searchForm">
      <label for="sea">Search for : </label>
      <input type="search" name="searchField" placeholder="Type URL">
      <br><br>
      <input type="submit" value="Search" onclick="show()">
   </form>
</body>
</html>
Copier après la connexion

ATTRIBUT DE VALEUR

的中文翻译为:

VALUE属性

Pour définir la valeur par défaut dans la zone de recherche, vous pouvez utiliser l'attribut VALUE dans étiquette.

这是一个非常有趣的属性,可以在标签中使用,那就是SPELLCHECK属性。此属性可以打开或关闭拼写检查功能。如果它是ON,它将在拼写错误的单词La vérification orthographique est false. 。

Alors, voyons comment nous pouvons utiliser cet attribut.

Exemple

<html>
<body>
   <form id="searchForm">
      <label for="sea">Search for : </label>
      <input type="search" name="searchField"><br><br>
      <input type="submit" value="Search" onclick="show()">
   </form>
</body>
</html>
Copier après la connexion

OU

<html>
<body>
   <form id="searchForm">
      <label for="sea">Search for : </label>
      <input type="search" name="searchField" spellcheck=false><br><br>
      <input type="submit" value="Search">
   </form>
</body>
</html>
Copier après la connexion
Dans les deux cas, l'attribut de vérification orthographique est OFF, c'est-à-dire faux. Dans cette situation, il ignorera les erreurs.

Supposons que nous ayons saisi « Health » dans le champ de recherche alors que l'orthographe correcte est « Health ». Mais il ne montre aucune ligne ondulée sous le mot.

Maintenant, rendons cela vrai et voyons les résultats.

Exemple

<html>
<body>
   <form id="searchForm">
      <label for="sea">Search for : </label>
      <input type="search" name="searchField" spellcheck=true><br><br>
      <input type="submit" value="Search">
   </form>
</body>
</html>
Copier après la connexion

Nous pouvons également restreindre le nombre minimum et maximum de caractères dans un champ de recherche à l'aide des attributs

MINLENGTH

et MAXLENGTH. Supposons que, dans un exemple, où un utilisateur doit saisir/rechercher un numéro d'admission pour un établissement particulier, il peut accepter un minimum de 4 caractères et un maximum de 6 caractères. Mais si vous ne mettez pas de restriction, un utilisateur peut saisir des données de n'importe quelle longueur.Exemple

<html>
<body>
   <form id="searchForm">
      <label for="reg">Type Admission Number : </label>
      <input type="search" name="adm" minlength="4" maxlength="6"><br><br>
      <input type="submit" value="Search">
   </form>
</body>
</html>
Copier après la connexion

Une erreur s'affiche sur la page car l'utilisateur n'a pas saisi la longueur minimale de données. Et si vous essayez de dépasser sa limite maximale, cela ne permettra pas de taper.

Taille du produit.置为必填字段。

示例

<html>
<body>
   <form id="searchForm">
      <label for="reg">Type Admission Number : </label>
      <input type="search" name="adm" minlength="4"  
      maxlength="6" size="6" required><br><br>
      <input type="submit" value="Search">
   </form>
</body>
</html>
Copier après la connexion
观察到盒子的大小现在减小了,如果您将其留空,将显示错误。

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!

Étiquettes associées:
source:tutorialspoint.com
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal