Maison >interface Web >tutoriel HTML >Comment utiliser le type de saisie de recherche en HTML ?
Comment utiliser le type de saisie de recherche en HTML ?
- WBOYavant
- 2023-09-06 11:45:041378parcourir
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>
这个程序将使用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>
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>
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>
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>
Nous pouvons également restreindre le nombre minimum et maximum de caractères dans un champ de recherche à l'aide des attributs
MINLENGTHet 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>
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>
观察到盒子的大小现在减小了，如果您将其留空，将显示错误。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!