Les éléments <input> dont l'attribut type vaut "search" permettent à un utilisateur de saisir des termes de recherche.

Valeur

La valeur de l'attribut value contient une chaîne de caractères (DOMString) qui représente la valeur du champ de recherche. En JavaScript, on peut récupérer cette information grâce à la propriété HTMLInputElement.value.

maRecherche.value;

Si aucune contrainte de validation n'est imposée (cf. Validation pour plus de détails), la valeur peut être un texte ou une chaîne de caractères vide.

Attributs supplémentaires

En complément des attributs communs à l'ensemble des éléments <input>, les champs de recherche prennent en charge les attributs suivants :

Attribut Description
maxlength Le nombre de caractères maximal qui peut être écrit dans ce champ.
minlength Le nombre de caractères minimal qui peut être écrit dans ce champ pour qu'il soit considéré comme valide.
pattern Une expression rationnelle à laquelle doit correspondre le texte saisi pour être valide.
placeholder Une valeur d'exemple qui sera affichée lorsqu'aucune valeur n'est saisie.
readonly Un attribut booléen qui indique si le contenu du champ est en lecture seule.
size Un nombre qui indique le nombre de caractères affichés par le champ.
spellcheck Cet attribut contrôle l'activation de la vérification orthographique sur le champ ou si la vérification orthographique par défaut doit être appliquée.

maxlength

Le nombre maximum de caractères (exprimé en nombre de points de code UTF-16) que l'utilisateur peut saisir dans le champ. Cette valeur doit êtrer un entier positif ou nul. Si aucune valeur n'est fournie pour maxlength ou qu'une valeur invalide est fournie, il n'y a pas de contrainte de taille maximale. La valeur indiquée par cet attribut doit être supérieure à minlength.

Le champ ne sera pas valide si la longueur du texte dépasse maxlength en nombre de points de code UTF-16. Les contraintes de validation sont uniquement appliquées lorsque la valeur est modifiée par l'utilisateur.

minlength

Le nombre minimal de caractères (exprimé en nombre de points de code UTF-16) que l'utilisateur peut saisir dans le champ. Cette valeur doit êtrer un entier positif ou nul. Si aucune valeur n'est fournie pour minlength ou qu'une valeur invalide est fournie, il n'y a pas de contrainte de taille minimale. La valeur indiquée par cet attribut doit être inférieur à maxlength.

Le champ ne sera pas valide si la longueur du texte est inférieure à minlength en nombre de points de code UTF-16. Les contraintes de validation sont uniquement appliquées lorsque la valeur est modifiée par l'utilisateur.

pattern

L'attribut pattern est une expression rationnelle que doit respecter la valeur (value) du champ afin d'être valide. Cette expression rationnelle doit être une expression rationnelle valide pour JavaScript (telle qu'utilisée par RegExp et telle que documentée dans ce guide). Le marqueur 'u' est fourni par le navigateur lors de la compilation de l'expression rationnelle afin que le motif soit traité comme une séquence de points de code Unicode plutôt que comme des caractères ASCII. Aucune barre oblique (/) ne devrait être utilisée autour du motif.

Si l'expression rationnelle est invalide ou que cet attribut n'est pas défini, l'attribut est ignoré.

Note : L'attribut title pourra être utilisé afin d'afficher une bulle d'informations qui explique les conditions à respecter. Il est également conseillé d'inclure un texte explicatif à proximité du champ.

Voir la section sur l'utilisation de cet attribut ci-après pour plus d'exemples.

placeholder

L'attribut placeholder est une chaîne de caractères fournissant une courte indication à l'utilisateur quant à l'information attendue dans le champ. Cet attribut devrait être un mot ou une phrase courte qui illustre le type de donnée attendu plutôt qu'un message explicatif. Le texte ne doit pas contenir de saut à la ligne.

Si le contenu du contrôle respecte une directionnalité donnée (LTR ou RTL) et que le texte indicatif doit être présenté dans l'autre sens, il est possible  d'utiliser l'algorithme de formatage bidirectionnel Unicode (cf. Overriding BiDi using Unicode control characters in The Unicode Bidirectional Text Algorithm).

Note : On évitera, tant que faire se peut, d'utiliser l'attribut placeholder car il n'est pas sémantiquement très utile pour expliquer le formulaire et car il peut causer certains problèmes avec le contenu. Voir  Libellés et textes indicatifs in <input> pour plus d'informations.

readonly

Un attribut booléen qui, lorsqu'il est présent, indique que le champ ne peut pas être édité par l'utilisateur. Toutefois, la valeur de l'attribut value peut toujours être modifiée via du code JavaScript qui définirait la propriété HTMLInputElement.value.

Note : Un champ en lecture seule pouvant ne pas avoir de valeur, l'attribut required n'aura pas d'effet si l'attribut readonly est également présent.

size

L'attribut size est un nombre positif qui indique le nombre de caractères affichés à l'écran et qui définit donc la largeur du champ. La valeur par défaut de cet attribut est 20. Étant donné que la largeur des caractères peut varier cet attribut ne permet de définir une largeur exacte mais approximative.

Cet attribut ne définit pas la limite du nombre de caractères saisissables dans le champ mais uniquement, et approximativement, le nombre de caractères qui peuvent être affichés à l'écran simultanément. Pour fixer une taille maximale sur la valeur du champ, on utilisera plutôt l'attribut maxlength.

spellcheck

spellcheck est un attribut universel qui est utilisé afin d'indiquer si la vérification orthographique doit être utilisée pour un élément. Il peut être utilisé pour n'importe quel conten éditable mais possède certaines spécificités pour les éléments <input>. Les valeurs autorisées pour cet attribut sont :

false
La vérification orthographique est désactivée pour cet élément.
true
La vérification orthographique est activée pour cet élément.
"" (chaîne de caractères vide) ou aucune valeur
La configuration par défaut de l'élément par rapport à la vérification orthographique sera respectée. Cette configuration par défaut peut provenir de la valeur de spellcheck pour les éléments parents ou d'autres facteurs.

Un champ de saisie peut avoir la vérification orthographique activée s'il ne possède pas l'attribut readonly et qu'il n'est pas désactivé.

La valeur renvoyée par l'attribut spellcheck peut ne pas refléter l'état réel de la vérification ortographique si certaines préférences de l'agent utilisateur surchargent le paramétrage par défaut.

Attributs non-standard

Les attributs non-standard suivants sont disponibles pour les champs de recherche. Toutefois, vu leur caractère spécifique, mieux vaut ne pas les utiliser.

Attribut Description
autocorrect Une chaîne de caractères qui indique si la correction automatique doit être appliquée à ce champ texte. Uniquement pris en charge par Safari.
incremental Cet attribut indique si des évènements search doivent être envoyés afin de mettre à jour les résultats de la recherche tandis que l'utilisateur continue d'éditer la valeur du champ. Uniquement WebKit et Blink (Safari, Chrome, Opera, etc.).
mozactionhint Une chaîne de caractères qui indique le type d'action qui sera effectuée lorsque l'utilisateur appuiera sur la touche Entrée ou Retour lors de l'édition du champ. La valeur de cet attribut est utilisée comme libellé pour la touche adéquate du clavier virtuel. Uniquement pris en charge par Firefox pour Android.
results Le nombre maximum d'éléments qui devraient être affichés comme recherches précédentes dans la liste déroulante du champ. Uniquement pris en charge par Safari.

autocorrect

Un attribut spécifique à Safari, sous la forme d'une chaîne de caractères, qui indique si la correction automatique doit être appliquée lors de l'édition du champ. Les valeurs autorisées pour cet attribut sont :

on
La correction automatique et les remplacements de texte sont appliqués.
off
Toute correction automatique et tout remplacement de texte est désactivé.

incremental

Un attribut booléen spécifique à WebKit et Blink qui indique à l'agent utilisateur de traiter la recherche en continu. Lorsque cet attribut est présent et lorsque l'utilisateur édite la valeur du champ, l'agent utilisateur envoie des évènements search sur l'objet HTMLInputElement qui représente le champ de recherche. Ainsi, on peut gérer, avec du code, la mise à jour continue des résultats de recherche.

Si l'attribut incremental n'est pas indiqué, l'évènement search est uniquement envoyé lorsque l'tuilisateur déclenche la recherche (en appuyant sur la touche Entrée ou Retour à l'édition du champ).

La fréquence maximale à laquelle l'évènement search est envoyé est définie par chaque implémentation.

mozactionhint

Un attribut spécifique à Mozilla (et plus particulièrement Firefox pour Android) qui fournit une indication quant au type d'action effectuée lorsque l'utilisateur appuie sur la touche Entrée ou Retour lors de l'édition. Cette information pourra être utilisée afin de choisir le libellé à afficher sur la touche Entrée du clavier virtuel.

Note : Cet attribut a été standardisé sous l'attribut universel enterkeyhint mais ce dernier n'est pas encore largement implémenté. Pour connaître le statut du changement d'implémentation pour Firefox, voir bug 1490661.

Les valeurs autorisées pour cet attribut sont : go, done, next, search et send. Le navigateur décide alors, selon la valeur, quel libellé utiliser pour la touche Entrée.

results

L'attribut results, spécifique à Safari, est une valeur numérique qui permet de surcharger la valeur maximale du nombre de recherches précédentes affichées dans la liste déroulante des suggestions.

Cette valeur doit être un nombre positif. Si cet attribut n'est pas fourni, ou que sa valeur est invalide, ce sera le maximum fourni par le navigateur qui sera utilisé.

Utiliser un champ de recherche

Les éléments <input> de type search sont semblables aux éléments <input> de type text mais sont spécifiquement destinés à la gestion des termes d'une recherche.

Exemple simple

<form>
  <div>
    <input type="search" id="maRecherche" name="q">
    <button>Rechercher</button>
  </div>
</form>

Cet exemple produira le résultat suivant :

q est la valeur standard utilisé pour l'attribut name des champs de recherche. Lorsque le formulaire est envoyée, les données envoyées au serveur auront la forme q=termederecherche. Il est nécessaire de fournir un nom (c'est-à-dire un attribut name) à un champ, sinon aucune information ne sera envoyée lors de l'envoi du formulaire.

Note : Il est toujours nécessaire de fournir une valeur pour l'attribut name car sinon aucune valeur ne sera envoyée.

Différences entre les champs de recherche et les champs texte

La différence principale est la façon dont les navigateurs gèrent cet élément. Premièrement, certains navigateurs affiche une icône de croix dans la zone de saisie qui peut être utilisée pour retirer le terme de la recherche. Voici par exemple un aperçu de la fonctionnalité sous Chrome:

De plus, les navigateurs modernes proposent souvent une auto-complétion basée sur les termes de recherche déjà utilisés sur le site. Ainsi, quand on réutilise le champ, différentes suggestions peuvent être affichées et utilisées. Voici l'aperçu de cette fonctionnalité sous Firefox :

Ajouter un texte indicatif

Il est possible de fournir un texte indicatif dans le champ de recherche afin de fournir une indication quant aux recherches qu'il est possible de faire. Pour cela, on ajoutera un texte avec l'attribut placeholder. Par exemple :

<form>
  <div>
    <input type="search" id="maRecherche" name="q"
     placeholder="Rechercher sur le site…">
    <button>Rechercher</button>
  </div>
</form>

Voici le résultat obtenu avec ce fragment HTML :

Les champs de recherche et l'accessibilité

Un des problèmes posé par les formulaires de recherche est leur accessibilité. En effet, dans la plupart des situations, il n'est pas nécessaire de fournir une étiquette indiquant le rôle de la recherche car le placement du champ rend son rôle clair (voici un exemple).

En revanche, pour les personnes qui utilisent des technologies assistives, cela peut être source de confusion. Une façon de résoudre ce problème sans modifier l'organisation visuelle est d'utiliser les fonctionnalités WAI-ARIA :

  • Utiliser un attribut role avec la valeur search sur l'élément <form> permettra aux lecteurs d'écran d'indiquer le formulaire comme étant un formulaire de recherche.
  • Si cela n'est pas suffisant, il est possible d'utiliser l'attribut aria-label sur l'élément <input>. Cet attribut peut contenir un texte descriptif qui sera lu à voix haute par un lecteur d'écran. Il s'agit d'un équivalent non-visuel de <label>.

Prenons un exemple :

<form role="search">
  <div>
    <input type="search" id="maRecherche" name="q"
     placeholder="Rechercher sur le site…"
     aria-label="Rechercher parmi le contenu du site">
    <button>Rechercher</button>
  </div>
</form>

Voici le résultat obtenu grâce à ce fragment de HTML :

Il n'y a aucune différence visuelle avec l'exemple précédent mais avec cette deuxième version, les personnes qui utilisent un lecteur d'écran disposeront de plus d'informations.

Note : Voir Signposts/Landmarks pour plus d'informations à propos de ces fonctionnalités relatives à l'accessibilité.

Paramétrer la taille physique

Il est possible de contrôler la taille physique du champ de saisie grâce à l'attribut size. Cet attribut permet d'indiquer le nombre de caractères qui peuvent être affichés simultanément à l'intérieur du champ. Ainsi, dans l'exemple qui suit, la zone de recherche peut contenir 20 caractères :

<form>
  <div>
    <input type="search" id="maRecherche" name="q"
    placeholder="Rechercher sur le site…" size="30">
    <button>Rechercher</button>
  </div>
</form>

Validation

Les éléments <input> de type search possèdent les mêmes fonctionnalités de validation que les éléments <input type="text">. Il existe peu de raison de contraindre les termes d'une recherche mais voici quelques cas.

Note : Attention, la validation des données d'un formulaire de recherche HTML par le client ne doit pas remplacer la vérification de ces données lorsqu'elles sont reçues sur le serveur. En effet, il est tout à fait possible pour quelqu'un de modifier le code HTML de la page pour outrepasser les mécanismes de validation. Il est également possible d'envoyer des données directement au serveur. Si le serveur ne valide pas les données reçues, des données potentiellement mal formatées pourraient causer des dommages aux bases de données et autres composants sensibles.

Une note sur la mise en forme

Les pseudo-classes CSS :valid et :invalid permettent de mettre en forme les éléments d'un formulaire en fonction de la validité de leur contenu. Dans cette section, nous utiliserons la feuille de style suivante afin de placer une coche à côté des champs valides et une croix à côté des champs invalides.

input:invalid ~ span:after {
  content: '✖';
  padding-left: 5px;
  position: absolute:
}

input:valid ~ span:after {
  content: '✓';
  padding-left: 5px;
  position: absolute:
}

Vous pouvez ici voir qu'on utilise un élément <span> placé après l'élément du formulaire, c'est cet élément <span> qui contiendra les icônes. Cet élément est nécessaire car, sur certains navigateurs, les pseudo-classes dans les éléments de saisie sont mal gérées.

Rendre le champ obligatoire

Il est possible d'utiliser l'attribut required afin d'indiquer que la valeur doit obligatoirement être saisie avant d'envoyer le formulaire :

<form>
  <div>
    <input type="search" id="maRecherche" name="q"
    placeholder="Recherche sur le site…" required>
    <button>Rechercher</button>
    <span class="validity"></span>
  </div>
</form>

Voici le résultat obtenu :

De plus, si on essaie d'envoyer le formulaire sans aucun terme de recherche, le navigateur affichera un message. Voici par exemple, le résultat dans Firefox :

form field with attached message that says Please fill out this field

Différents messages peuvent être affichés selon le type d'erreur liée à la saisie.

Contraindre la taille de la valeur saisie

Il est possible d'indiquer une taille minimale pour la longueur des termes de la recherche via l'attribut minlength. De même, on peut fixer la longueur maximale du texte qui peut être saisi pour la recherche grâce à l'attribut maxlength. Ces deux attributs sont exprimés en nombres de caractères.

Dans l'exemple qui suit, la valeur saisie dans le champ de recherche doit mesurer entre 4 et 8 caractères.

<form>
  <div>
    <label for="mySearch">Rechercher un utilisateur</label>
    <input type="search" id="mySearch" name="q"
    placeholder="ID de 4 à 8 char." required
    size="30" minlength="4" maxlength="8">
    <button>Rechercher</button>
    <span class="validity"></span>
  </div>
</form>

Voici le résultat obtenu avec ce fragment de code HTML :

Si vous essayez de soumettre une valeur qui est plus petite que 4 caractères, vous aurez un message d'erreur (qui peut varier selon le navigateur utilisé). De plus, le navigateur ne permettra pas de saisir un texte plus long que 8 caractères.

Indiquer un motif

L'attribut pattern permet d'indiquer une expression rationnelle que doit respecter la valeur saisie pour être considérée valide (cf. Valider une valeur avec une expression rationnelle pour une introduction).

Prenons un exemple. Imaginons qu'on veuille rechercher un produit grâce à son identifiant et que les identifiants commencent par deux lettres, suivies de 4 chiffres. Dans l'exemple qui suit, le formulaire n'accepte qu'une valeur dont la taille est comprise entre 4 et 8 caractères et qui commence par deux lettres puis termine par 4 chiffres.

<form>
  <div>
    <label for="mySearch">Rechercher un produit par son code :</label>
    <input type="search" id="mySearch" name="q"
    placeholder="2 lettres puis 4 chiffres" required
    size="30" pattern="[A-z]{2}[0-9]{4}">
    <button>Rechercher</button>
    <span class="validity"></span>
  </div>
</form>

Voici le résultat obtenu avec ce fragment HTML :

Exemples

Vous pouvez consulter un exemple de formulaire de recherche dans notre exemple website-aria-roles (voir la démonstration live).

Résumé technique

Valeur Une chaîne de caractères (DOMString) qui représente la valeur contenue dans le champ de recherche.
Évènements change et input
Attributs pris en charge autocomplete, list, maxlength, minlengthpatternplaceholderrequiredsize.
Attributs IDL value
Méthodes select(), setRangeText(), setSelectionRange().

Spécifications

Spécification État Commentaires
HTML Living Standard
La définition de '<input type="search">' dans cette spécification.
Standard évolutif Définition initiale.
HTML 5.1
La définition de '<input type="search">' dans cette spécification.
Recommendation Définition initiale.

Compatibilité des navigateurs

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidEdge MobileFirefox pour AndroidOpera pour AndroidSafari sur iOSSamsung Internet
Support simpleChrome Support complet 5Edge Support complet 12Firefox Support complet 4IE Support complet 10Opera Support complet 10.6Safari Support complet 5WebView Android Support complet OuiChrome Android Support complet OuiEdge Mobile Support complet OuiFirefox Android Support complet OuiOpera Android Support complet OuiSafari iOS Support complet OuiSamsung Internet Android ?

Légende

Support complet  
Support complet
Compatibilité inconnue  
Compatibilité inconnue

Voir aussi

Étiquettes et contributeurs liés au document

Étiquettes : 
Contributeurs à cette page : SphinxKnight, lionralfs
Dernière mise à jour par : SphinxKnight,