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>
这个程序将使用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>
Copier après la connexion
OU<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>
<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>
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!
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
Video Face Swap
Échangez les visages dans n'importe quelle vidéo sans effort grâce à notre outil d'échange de visage AI entièrement gratuit !
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Sujets chauds
1393
52
1205
24
HTML est-il facile à apprendre pour les débutants?
Apr 07, 2025 am 12:11 AM
HTML convient aux débutants car il est simple et facile à apprendre et peut rapidement voir les résultats. 1) La courbe d'apprentissage de HTML est fluide et facile à démarrer. 2) Il suffit de maîtriser les balises de base pour commencer à créer des pages Web. 3) Flexibilité élevée et peut être utilisée en combinaison avec CSS et JavaScript. 4) Les ressources d'apprentissage riches et les outils modernes soutiennent le processus d'apprentissage.
Les rôles de HTML, CSS et JavaScript: responsabilités de base
Apr 08, 2025 pm 07:05 PM
HTML définit la structure Web, CSS est responsable du style et de la mise en page, et JavaScript donne une interaction dynamique. Les trois exercent leurs fonctions dans le développement Web et construisent conjointement un site Web coloré.
Quel est un exemple d'une balise de départ dans HTML?
Apr 06, 2025 am 12:04 AM
Anexampleofastartingtaginhtmlis, qui abinginsaparagraph.startingtagsaressentialtinhtmlastheyinitiateelements, définit les éventualités, et la faculté de réduction des pages et de la construction de la création.
Comprendre HTML, CSS et JavaScript: un guide pour débutant
Apr 12, 2025 am 12:02 AM
WebDevelopmentReliesOnHTML, CSS, etjavascript: 1) HTMLSTRUCTURESCONTENT, 2) CSSSTYLESIT, et3) JavascriptAdddsInterActivity, Forming TheasisofmodernweBEBExperiences.
Comment implémenter la disposition adaptative de la position de l'axe y dans l'annotation Web?
Apr 04, 2025 pm 11:30 PM
L'algorithme adaptatif de la position de l'axe y pour la fonction d'annotation Web Cet article explorera comment implémenter des fonctions d'annotation similaires aux documents de mots, en particulier comment gérer l'intervalle entre les annotations ...
Gitee Pages STATIQUE Le déploiement du site Web a échoué: comment dépanner et résoudre les erreurs de fichier unique 404?
Apr 04, 2025 pm 11:54 PM
GiteEpages STATIQUE Le déploiement du site Web a échoué: 404 Dépannage des erreurs et résolution lors de l'utilisation de Gitee ...
Comment utiliser CSS3 et JavaScript pour réaliser l'effet de la diffusion et de l'agrandissement des images environnantes après avoir cliqué?
Apr 05, 2025 am 06:15 AM
Pour obtenir l'effet de la diffusion et de l'élargissement des images environnantes après avoir cliqué sur l'image, de nombreuses conceptions Web doivent obtenir un effet interactif: cliquez sur une certaine image pour faire les environs ...
HTML, CSS et JavaScript: outils essentiels pour les développeurs Web
Apr 09, 2025 am 12:12 AM
HTML, CSS et JavaScript sont les trois piliers du développement Web. 1. HTML définit la structure de la page Web et utilise des balises telles que, etc. 2. CSS contrôle le style de page Web, en utilisant des sélecteurs et des attributs tels que la couleur, la taille de la police, etc. 3. JavaScript réalise les effets dynamiques et l'interaction, par la surveillance des événements et les opérations DOM.
