Les éléments <input> dont l'attribut type vaut "url" sont employées afin de permettre à un utilisateur de saisir ou d'éditer une URL.

La valeur saisie est automatiquement validée par le navigateur qui vérifie qu'elle est vide ou formatée correctement avant que le formulaire puisse être envoyé. Les pseudo-classes :valid et :invalid sont appliquées auomatiquement selon le cas de figure.

Note : Les navigateurs qui ne prennent pas en charge le type"url" utiliseront à la place un élément text.

Valeur

La valeur de l'attribut value contient une chaîne de caractères (DOMString) dont la valeur est automatiquement vérifiée afin de s'assurer que sa syntaxe est bien celle d'une URL. De façon plus précise, seuls deux formats sont autorisés :

  1. Une chaîne de caractères vide ("") qui indique que l'utilisateur n'a pas saisi de valeur ou que la valeur a été retirée.
  2. Une seule URL bien formée. Cela ne signifie pas nécessairement que l'adresse existe mais qu'elle est formatée correctement. Autrement dit, la chaîne de caractères respecte la forme "schema://restedelurl".

Voir Validation pour plus de détails sur le format des URL et leur validation.

Attributs supplémentaires

En complément des attributs qui fonctionnent pour tous les types d'éléments <input>, les champs de saisie d'URL prennent en charge les attributs suivants :

Attribut Description
maxlength La longueur maximale de l'URL, exprimée en nombre de caractères UTF-16, afin qu'elle soit considérée comme valide.
minlength La longueur minimale de l'URL, exprimée en nombre de caractères UTF-16, afin qu'elle soit considérée comme valide.
pattern Une expression rationnelle que doit respecter la valeur afin d'être considérée comme valide.
placeholder Une valeur d'exemple à afficher lorsqu'aucune valeur n'est saisie dans le champ.
readonly Un attribut booléen qui indique si le champ est en lecture seule et ne peut être édité par l'utilisateur.
size Le nombre de caractères qui doivent être visibles à l'écran.
spellcheck Une chaîne de caractères qui contrôle si la vérification orthographique doit être activée.

maxlength

Le nombre maximal de caractères (en nombre de points de code UTF-16) qui peuvent être saisis dans le champ de l'URL. Cette valeur doit être un entier positif ou nul. Si aucune valeur n'est fournie pour maxlength ou qu'une valeur invalide est fournie, le champ n'aura pas de longueur maximale. La valeur de cet attribut doit être supérieure ou égale à celle de l'attribut minlength.

La valeur ne respectera pas la validation si la longueur du texte saisi est supérieure à cet attribut.

minlength

Le nombre minimal de caractères (en nombre de points de code UTF-16) qui doivent être saisis dans le champ de l'URL. Cette valeur doit être un entier positif ou nul. Si aucune valeur n'est fournie pour minlength ou qu'une valeur invalide est fournie, le champ n'aura pas de longueur minimale. La valeur de cet attribut doit être inférieure ou égale à celle de l'attribut maxlength.

La valeur ne respectera pas la validation si la longueur du texte saisi est inférieure à cet attribut.

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 ci-après sur le format pour plus de détails et 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

Il est possible (mais déconseillé) d'utiliser ces attributs non-standard sur les champs de saisie d'URL.

Attribut Description
autocorrect Autorise ou non la correction automatique lors de l'édition de ce champ. Uniquement pris en charge par Safari.
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. Cet attribut est destiné à fournir un libellé équivoque pour la touche du clavier virtuel présenté à l'utilisateur. Uniquement pris en charge par Firefox pour Android.

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é.

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.

Utiliser des champs de saisie d'URL

Lorsqu'on crée un champ avec un attribut type qui vaut "url", on obtient une validation automatique qui vérifie que le format de la valeur respecte bien celui d'une URL. Cela permet par exemple d'éviter des cas où des utilisateurs laissent une coquille dans la saisie d'une adresse d'un site web.

Toutefois, ce mécanisme ne vérifie pas que l'URL saisie existe bien ou correspond à l'utilisateur. Seule une vérification de format est effectuée.

Attention ! Il est également important de vérifier le format de la valeur saisie côté serveur ! En effet, il est tout à fait possible pour un utilisateur de modifier le code HTML du site ou d'envoyer des données au serveur sans passer par le formulaire. Il est donc nécessaire de contrôler la valeur avant de s'en servir dans la logique de l'application côté serveur afin d'éviter des conséquences malheureuses.

Un simple champ

Actuellement, l'ensemble des navigateurs implémentent ce type de champ comme un champ texte qui dispose de fonctionnalités de validation basiques. Dans sa forme la plus simple, un champ de saisie d'URL ressemblera à :

<input id="monURL" name="monURL" type="url">

La valeur du champ est considérée valide lorsqu'elle est vide ou qu'il s'agit d'une URL correctement formatée, autrement elle est invalide. Si on ajoute l'attribut required, la valeur vide n'est plus valide, il est nécessaire de saisir une valeur.

Ainsi, si l'utilisateur saisit l'URL http://www.example.com, voici ce qui sera envoyé vers le serveur : monURL=http%3A%2F%2Fwww.example.com (on notera la façon dont certains caractères sont échappés).

Textes indicatifs (placeholders)

Il est parfois utile de fournir une indication sur le type de donnée attendu. Sur les pages pour lesquelles la place est restreinte, on ne peut pas se servir de l'étiqutte du champ. On peut alors utiliser un texte indicatif qui apparaît lorsque la valeur du champ est vide et qui est retiré dès que l'utilisateur saisit quelqu chose. Pour cela, on utilise l'attribut placeholder.

Dans l'exemple qui suit, le contrôle contient le texte indicatif "http://www.example.com". Dans le résultat, vous pouvez voir comment ce texte disparaît/réapparaît lorsqu'on saisit une valeur dans le contrôle.

<input id="monURL" name="monURL" type="url"
       placeholder="http://www.example.com">

Contrôler la taille du champ

Il est possible de contrôler la taille physique de la boîte utilisée pour le contrôle. On peut également contraindre la taille de la valeur saisie dans le champ (entre X et Y caractères par exemple).

La taille physique

C'est l'attribut size qui permet de contrôler la taille de la boîte utilisée. La valeur de cet attribut correspond au nombre de caractères qui seront affichés en même temps dans la boîte. Dans l'exemple suivant, on souhaite que la boîte de saisie mesure 30 caractères de large :

<input id="monURL" name="monURL" type="url"
       size="30">

La longueur de la valeur

L'attribut size ne limite pas la valeur qui peut être saisie mais uniquement l'affichage de celle-ci. Pour indiquer une longueur (exprimée en nombre de caractères) minimale d'URL à saisir, on pourra utiliser l'attribut minlength. De même, l'attribut maxlength indique la longueur maximale d'une URL qui peut être saisie dans le contrôle.

Dans l'exemple qui suit, on affiche une boîte de saisie qui mesure 30 caractères de large et on souhaite que l'URL soit plus longue que 10 caractères et moins longue que 80.

<input id="monURL" name="monURL" type="url"
       size="30" minlength="10" maxlength="80">

Note : Ces attributs jouent un rôle lors de la validation. Si la valeur saisie est plus courte que la longueur minimale indiquée ou plus grande que la longueur maximale indiquée, alors elle seera considérée comme invalide. De plus, la plupart des navigateurs ne permettent pas de saisir une valeur plus grande que la longueur maximale indiquée avec maxlength.

Fournir des valeurs par défaut

On peut fournir une valeur par défaut grâce à l'attribut value :

<input id="monURL" name="monURL" type="url"
       value="http://www.example.com">

Fournir des suggestions

On peut également fournir une liste d'options parmi lesquelles l'utilisateur peut choisir via l'attribut list. Cette liste ne limite pas l'utilisateur à ces choix mais permet de choisir certaines URL fréquemment utilisées plus facilement. Cette liste peut également être utilisée par l'attribut autocomplete. La valeur de l'attribut list est un identifiant d'un élément <datalist> qui contient autant d'éléments <option> que de valeurs suggérées. La valeur de l'attribut value de chacun de ces éléments <option> correspondra à la valeur qui sera suggérée dans le champ de saisie.

<input id="monURL" name="monURL" type="url"
       list="defaultURLs">

<datalist id="defaultURLs">
  <option value="http://www.example.com">
  <option value="https://www.example.com">
  <option value="http://www.example.org">
  <option value="https://www.example.org">
</datalist>

Avec cet élément <datalist> et les éléments <option> associés, le navigateur affichera les valeurs proposées sous la forme d'une liste déroulante (voire sous un autre format). Au fur et à mesure que l'utilisateur saisit dans le champ, la liste se réduit pour ne contenir que les valeurs correspondantes (et ce jusqu'à ce que l'utilisateur saisisse une autre valeur ou sélectionne une valeur parmi la liste).

Validation

Il existe deux niveaux de validation pour les contrôles de type "url". Tout d'abord, le contrôle natif, toujours présent qui s'asssure que la valeur correspond à une URL bien formée. Ensuite, on peut ajouter des options supplémentaires pour personnaliser le format de l'URL attendue.

Attention ! Il est également important de vérifier le format de la valeur saisie côté serveur ! En effet, il est tout à fait possible pour un utilisateur de modifier le code HTML du site ou d'envoyer des données au serveur sans passer par le formulaire. Il est donc nécessaire de contrôler la valeur avant de s'en servir dans la logique de l'application côté serveur afin d'éviter des conséquences malheureuses.

Validation simple

Les navigateurs qui prennent en charge le type "url" fournissent automatiquement un mécanisme de validation pour s'assurer que la valeur saisie correspond à une URL bien formée.

Rendre l'URL obligatoire

Comme vu ci-avant, on peut rendre la saisie de l'URL obligatoire avec l'attribut required :

<form>
  <input id="monURL" name="monURL" type="url" required>
  <button>Envoyer</button>
</form>

Vous pouvez essayer d'envoyer le formulaire précédent sans valeur saisie et voir le résultat obtenu.

Utiliser un format particulier

S'il faut restreindre l'URL plus fortement, on peut utiliser l'attribut pattern afin d'indiquer une expression rationnelle que la valeur saisie doit respecter afin d'être valide.

Prenons comme exemple la construction d'un formulaire de support pour les employés de MaBoîte Inc. Ce formulaire permet d'indiquer à un service une des pages du site interne qui pose problème. Dans l'exemple simplifié, l'utilisateur indique l'URL de la page problématique ainsi qu'un message descriptif. Ici, on souhaite que l'URL saisit ne soit valide que si elle correspond au domaine maboite.

Les contrôles de type "url" utilisant la validation native pour vérifier que c'est une URL bien formée et une validation spécifique via l'attribut pattern, on peut implémenter cette contrainte facilement :

<form>
  <div>
    <label for="myURL">Veuillez saisir l'adresse de la page problématique:</label>
    <input id="myURL" name="myURL" type="url"
           required pattern=".*\.maboite\..*"
           title="L'URL doit être sur le domaine maboite.">
    <span class="validity"></span>
  </div>
  <div>
    <label for="myComment">Quel est le problème ?</label>
    <input id="myComment" name="myComment" type="text"
           required>
    <span class="validity"></span>
  </div>
  <div>
    <button>Envoyer</button>
  </div>
</form>

Si on étudie le contrôle, on peut voir qu'on commence par utiliser l'attribut required afin de rendre le champ obligatoire.

Ensuite, on utilise l'attribut pattern avec l'expression rationnelle ".*\.maboite\..*". Cet expression rationnelle indique que la chaîne de caractères saisie doit contenir des caractères quelconques suivis d'un point, suivi de "maboite", suivi d'un point, suivi de n'importe quels caractères.

Cette expression rationnelle est loin d'être parfaite mais suffit pour les besoins de cet exemple.

Il est conseillé d'utiliser l'attribut title quand on utilise l'attribut pattern. Dans ce cas, l'attribut title doit alors décrire l'expression rationnelle (et l'explication de la contrainte) plutôt que le rôle du champ. En effet, la valeur contenue dans title pourrait alors être affichée ou vocalisée comme message d'erreur. Un navigateur pourra ainsi affiche un message : "Le texte saisi ne respecte pas la format souhaité." suivi du texte contenu dans title. Si la valeur de title est simplement "URL", le message complet obtenu serait "Le texte saisi ne respecte pas la format souhaité. URL" (ce qui n'est pas très parlant).

C'est pourquoi nous avons écrit "L'URL doit être sur le domaine maboite" qui est plus détaillé.

Note : Si vous rencontrez des problèmes avec ces expressions rationnelles et qu'elles ne semblent pas fonctionner correctement, vérifiez la console de votre navigateur. Il est possible que des messages d'erreur y soient affichés et puissent vous aider à diagnostiquer le problème.

Exemples

En plus des exemples précédents, vous pouvez consulter l'exemple de validation de format sur GitHub (et voir le résultat live).

Résumé technique

Valeur Une chaîne de caractères (DOMString) qui représente une URL ou une chaîne de caractères vide.
Évènements change et input
Attributs pris en charge autocomplete, list, maxlength, minlength, pattern, placeholder, readonlyrequired et size
Attributs IDL list, value, selectionEnd, selectionDirection
Méthodes select(), setRangeText(), setSelectionRange()

Spécifications

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

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 1Edge Support complet OuiFirefox Support complet OuiIE Support complet 10Opera Support complet 11Safari Support complet OuiWebView 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
Dernière mise à jour par : SphinxKnight,