Cette page vous a-t-elle été utile ?
Votre avis sur ce contenu est important. N'hésitez pas à nous faire part de vos commentaires.
Vous avez d'autres commentaires ?
1500 caractères restants
Exporter (0) Imprimer
Développer tout
Développer Réduire

Formulaires

Internet Explorer 10 et les applications du Windows Store en JavaScript offrent une nouvelle prise en charge des formulaires HTML5, notamment de nouveaux états de l’attribut type (sur l’élément input), de nouveaux attributs de l’élément input et l’élément progress. Cette prise en charge permet aux développeurs de fournir rapidement et facilement une invite utilisateur, la validation de l’entrée ainsi que des commentaires avec un minimum de script. Les formulaires HTML5 sont décrits dans la section 4.10 de la spécification HTML5 du World Wide Web Consortium (W3C).

Avant la mise à disposition de ces attributs et types input HTML5, vérifier qu’un numéro de téléphone ne contenait pas de caractères alphabétiques ou vérifier qu’une adresse électronique bien formée était entrée exigeait que le développeur écrive une logique supplémentaire pour la validation. La prise en charge de la validation de l’entrée et du formulaire côté client HTML5 permet au développeur de se concentrer sur d’autres tâches au lieu de créer des fonctions de validation.

Prise en charge de nouveaux états d’entrée

Les formulaires HTML5 définissent plusieurs états d’entrée pour l’attribut type de l’élément input. Internet Explorer 10 et les applications du Windows Store en JavaScript prennent en charge les états URL, Email et Range.

État Search

L’état Search se produit lorsque vous définissez l’attribut type de l’élément input sur search. Cet état est identique à l’état Text, à la seule différence qu’il est identifié dans le DOM (Document Object Model) comme type d’entrée « search » (recherche).


<input id="search" type="search" placeholder="Search..."/>

État Telephone

L’état d’entrée Telephone, qui se produit lorsque vous définissez l’attribut type de l’élément input sur tel, indique que le champ accepte un numéro de téléphone, par exemple 206-555-0012 ou (425) 555-0034. Étant donné que les numéros de téléphone peuvent avoir des formats différents, l’état Telephone n’applique aucun format. Si vous devez appliquer un format particulier, utilisez l’attribut pattern.


<input id="work_phone" type="tel" required placeholder="(425) 555-0067"/>

États URL et Email

La prise en charge des états URL et Email offrent aux développeurs la validation intégrée des types d’entrée URL et Email.

L’état d’entrée URL, qui se produit lorsque vous définissez l’attribut type de l’élément input sur url, indique que le champ doit accepter une adresse Web complète telle que "http://www.contoso.com".

De même, l’état d’entrée Email accepte uniquement une adresse de messagerie avec une syntaxe valide telle que "joe@contoso.com". Avec les exemples suivants, si l‘utilisateur n’entre pas une URL ou une adresse de messagerie correctement, un message d’erreur s’affiche.


<input type="url" name="myUrl"/>
<input type="email" name="myEmail"/>


État Number

L’état Number se produit lorsque vous définissez l’attribut type de l’élément input sur number. Avec cet état, l’attribut value, s’il est spécifié et s’il n’est pas vide, doit indiquer un nombre à virgule flottante valide.


<input type="number" name="desiredQuantity" value="1" />

État Range

La prise en charge de l’état d’entrée Range vous permet de créer facilement un contrôle d’entrée plage ou curseur. L’état d’entrée Range se produit lorsque vous définissez l’attribut type de l’élément input sur range. Le contrôle de plage nécessite quatre attributs, min, max, step et value, pour définir la plage de valeurs et la résolution du contrôle. Dans l’exemple ci-dessous, le contrôle de plage qui est créé retourne des valeurs comprises entre 0 et 100 dans des incréments de 5, 50 étant la valeur prédéfinie.


<input type="range" min="0" max="100" step="5" value="50"/>

Étant donné que le contrôle de plage est un élément input, s’il n’est pas pris en charge dans un navigateur, il sera rendu en tant que zone de texte avec une valeur par défaut.

Élément progress

L’élément progress, défini dans la section 4.10.16 de la spécification HTML5, crée une barre qui indique la progression d’une tâche (mode déterminé), ou qui indique qu’une tâche est en cours d’exécution mais que le pourcentage de progression est inconnu (mode indéterminé) ou qui indique les deux modes. Par exemple, vous pouvez commencer par afficher une barre de progression indéterminée, puis afficher une barre de progression déterminée après avoir calculé la durée d’une tâche.

Pour créer un indicateur de progression qui montre uniquement l’activité, n’indiquez pas l’attribut value. Lorsque vous indiquez un attribut value sur l’élément, ou lui assignez une valeur dans le script, la barre devient déterminée. La barre commence à 0 et continue jusqu’à la valeur que vous avez définie avec l’attribut max. Si vous n’indiquez pas l’attribut max, la plage de progression est comprise entre 0 et 1. Les attributs value et max ont pour valeurs des nombres à virgule flottante.

Syntaxe du mode indéterminé


<progress>fallback text</progress>

Syntaxe du mode déterminé


<progress id="progCtrl" max="100" value="50">fallback text</progress>

Si le navigateur de l’utilisateur ne prend pas en charge le contrôle de progression HTML5, vous pouvez placer du texte de secours entre les balises (indiqué ici par « fallback text »). Affichez par exemple la valeur de l’attribut value comme texte entre les balises. Par exemple, écrivez un script pour mettre à jour le texte de remplacement avec quelque chose comme « La progression de cette tâche est x% », x représentant la valeur actuelle de l’attribut value.

L’élément progress a également un attribut position qui est égal au quotient de la valeur de l’attribut value divisée par la valeur de l’attribut max, ou "-1" si le contrôle est en mode indéterminé. L’attribut position est en lecture seule.

Exemple : état d’entrée Range et contrôle de progression

L’exemple suivant associe l’état d’entrée Range et un contrôle de progression. Lorsque vous chargez la page, l’élément progress est en mode indéterminé (aucune valeur ne lui est assignée). Lorsque vous déplacez la barre du curseur, la valeur vers laquelle vous déplacez le curseur est attribuée au contrôle de progression. Le curseur et le contrôle de progression sont synchronisés.


<!DOCTYPE html>
<html>

<head>
<title>Range and progress example</title>
<style type="text/css">
input[type=range] {
  padding-left: 0px;
  padding-right: 0px;
}
</style>
<script type="text/javascript">
  function changeValue() {
    document.getElementById("progCtrl").value = document.getElementById("rangeCtrl").value;
  }
  document.addEventListener('DOMContentLoaded', function () {
    document.getElementById("rangeCtrl").addEventListener('change', changeValue, false);
  }, false);
</script>
</head>

<body>

<progress id="progCtrl" max="100" >Sorry, your browser doesn't support the progress 
element.</progress>
<br><br>
<input id="rangeCtrl" max="100" min="0" step="5" type="range" value="50" />

</body>

</html>


Lorsqu’il est chargé, cet exemple apparaît comme suit dans Internet Explorer 10 dans Windows 8. Vous pouvez constater que la barre de progression est en mode indéterminé. Dans Windows 8 elle s’affiche sous forme de points animés qui apparaissent et disparaissent.

Exemple d’une barre de progression indéterminée (haut) et d’un contrôle de plage (bas).

Si vous déplacez le curseur vers la droite (jusqu’à la valeur 75), l’exemple apparaît comme suit. La barre de progression est désormais en mode déterminé et a « suivi » le curseur pour avoir la même valeur.

Exemple d’une barre de progression déterminée (haut) et d’un contrôle de plage (bas).

Vous pouvez afficher cette page.

Remarque  D’autres navigateurs et systèmes d’exploitation afficheront la barre de progression et le curseur différemment.

Pour obtenir une démonstration pratique des formulaires HTML5 avec validation d’entrée et de format, voir HTML5 Forms sur le site IE Test Drive.

Prise en charge de nouveaux attributs d’entrée

La prise en charge de nouveaux attributs  input HTML5 tels que required, pattern et placeholder permet aux développeurs de faire en sorte que les utilisateurs entreront les données correctes sur une page Web.

Attribut required

L’attribut required marque un élément qui ne peut pas être soumis sans une valeur. L’attribut peut être défini sur des contrôles de texte, d’URL, de messagerie, de sélection, de case à cocher et de bouton radio ainsi que sur les éléments textarea et select. Il s’agit d’un attribut booléen et il doit être uniquement spécifié sur un élément. Lorsque les utilisateurs placent la souris sur un champ requis, ils voient une info-bulle leur indiquant que ce champ est requis. (Si vous avez défini l’attribut title, la valeur de ce champ s’affichera.)


<form id="yourname">
  <label>Enter your first name: 
    <input name="firstname" type="text" required><input type="submit" value="Go"/>
  </label>
</form>


Si les utilisateurs tentent de valider un formulaire sans entrer une valeur dans le champ, ils obtiennent un message d’erreur et le focus du curseur passe au champ manquant.

Exemple d’image d’un champ d’entrée avec le texte "Champ requis" dans une info-bulle.

Attribut pattern

L’attribut pattern vous permet de définir une expression régulière à laquelle l’entrée de l’utilisateur doit correspondre. L’attribut pattern est disponible sur les éléments input dont l’attribut type a été défini sur text, search, url, tel, email ou password.


<form>
<label>
  <input type="tel" name="tel" pattern="\(\d\d\d\) \d\d\d\-\d\d\d\d" 
   title="enter a telephone number in   the format (xxx) xxx-xxxx"/>
  <input type="submit"/>
</label>
</form>


Attributs min, max et step

Les attributs min, max et step sont applicables aux contrôles input dont l’attribut type a été défini sur number ou range. (Pour plus d’informations sur les types d’entrée range, voir l’état Range dans cette rubrique.)

Les attributs min et max définissent les valeurs minimales et maximales qui seront acceptées.

L’attribut step définit l’intervalle autorisé entre les valeurs. Par exemple, si min est défini sur "0" et si step est défini sur "1", alors seules les valeurs 0, 1, 2, 3 et ainsi de suite, sont autorisées. De même, si min est défini sur "1,1" et si step est défini sur "1", alors seules les valeurs 1,1, 2,1, 3,1, et ainsi de suite, sont autorisées.

L’exemple suivant montre un champ d’entrée qui requiert un nombre pair compris entre 0 et 10. Les nombres en dehors de cette plage et les nombres impairs sont refusés et un message d’erreur s’affiche.


<form>
  <label>Enter an even number between 0 and 10: 
    <input type="number" min="0" max="10" step="2"/> 
    <input type="submit"/>
  </label>
</form>


Attribut placeholder et pseudo-classe :-ms-input-placeholder

Souvent, le fait de diriger l’utilisateur vers le champ d’entrée correct et de lui indiquer comment entrer les données contribue à ce qu’il fournisse des données valides. La prise en charge de l’attribut placeholder vous permet d’indiquer aux utilisateurs comment entrer les données correctes dans les champs du formulaire.

L’attribut placeholder définit une brève invite ou un exemple de texte à afficher à l’intérieur d’un champ d’entrée. Il peut être utilisé dans les contrôles input dont l’attribut type a été défini sur text, search, url, tel, email et password ainsi que sur les éléments textarea.

Vous pouvez utiliser l’attribut placeholder pour placer un exemple d’entrée correcte directement dans le champ d’entrée, comme le montre l’extrait de code suivant.


<input name="url" type="url" placeholder="http://www.contoso.com" />

Le balisage ci-dessus affiche le texte de l’espace réservé (attribut placeholder) dans le champ jusqu’à ce que le focus soit placé dans ce champ.

Image d’un champ d’entrée avec du texte d’espace réservé.

Par défaut, le texte de l’espace réservé est de couleur gris clair, mais vous pouvez lui donner le style que vous voulez avec CSS (Cascading Style Sheets) en utilisant le sélecteur de pseudo-class :-ms-input-placeholder. L’exemple suivant met en surbrillance les champs de rue et de code postal avec un style personnalisé.


<!DOCTYPE html >
<html>
<head>
  <title>Placeholder style example</title>
  <style type="text/css">
  input  /* normal style */
  {
    background-color:LightGray;
    color:Purple;
  }   
  input.address:-ms-input-placeholder /* placeholder only style */   
  {
    font-style:italic;        
    background-color:yellow;
    color:Red;
  }

  </style></head>
<body>
  <form id="test">
    <p><label>Enter Name: <input id="name" placeholder="Your Name"/></label></p>
    <p><label>Enter Street: <input id="street" class="address" 
placeholder="Your address" /></label></p>
    <p><label>Enter a zip code: <input type="num" pattern="(0-9){5}" 
id="zip" class="address" placeholder="5 digit zip" /></label></p>
    <input type="submit" />
  </form>
</body>
</html>


Le texte de l’espace réservé est affiché avec le style spécifié jusqu’à ce que le focus soit dans le champ, ce qui signifie que l’utilisateur peut renseigner le champ. Lorsque le focus est dans le champ, le style normal du champ d’entrée est rétabli et le texte de l’espace réservé disparaît.

Image de trois champs d’entrée, chacun avec du texte d’espace réservé et auquel un style de couleur et de texte est appliqué.

Vous pouvez afficher cette page. (Internet Explorer 10 est nécessaire pour que cette page soit rendue correctement.)

Attribut autofocus

L’attribut autofocus vous permet de guider l’utilisateur vers un champ spécifique en plaçant le focus sur un champ ou un contrôle lorsqu’une page Web est chargée. Cela peut s’avérer pratique pour l’utilisateur et lui évite de devoir cliquer ou d’appuyer sur la touche Tab dans le contrôle de formulaire lorsqu’une page s’ouvre.

L’attribut autofocus ne peut être spécifié que pour un seul contrôle dans un document. Si l’attribut est spécifié pour plusieurs éléments, le focus est placé uniquement sur le premier élément lorsque la page s’ouvre. Il s’agit d’un attribut booléen, par conséquent il n’est pas nécessaire de le définir avec une valeur ; sa présence implique que cette valeur est "true".


<input name="email" type="text" placeholder="joe@contoso.com" autofocus />

Attributs novalidate et formnovalidate

L’attribut novalidate peut être défini sur des éléments form auxquels des contraintes de validation ont été appliquées pour que le formulaire soit envoyé sans validation.

Nous vous conseillons de prévoir plusieurs boutons d’envoi pour un formulaire, par exemple, un bouton pour envoyer le formulaire et un bouton pour l’enregistrer même s’il n’est pas entièrement rempli pour permettre à l’utilisateur d’y revenir plus tard Vous pouvez faire en sorte que le bouton principal d’envoi valide les éléments du formulaire avec des contraintes de validation et que le bouton d’« enregistrement pour plus tard » ne valide pas ces éléments. Pour cela, au lieu de définir l’attribut novalidate sur le formulaire entier, définissez l’attribut formnovalidate sur le bouton qui enregistre le formulaire pour plus tard.

Dans l’exemple suivant, les deux attributs sont utilisés. L’attribut formnovalidate est défini sur le bouton Enregistrer pour plus tard, tandis que l’attribut novalidate est défini sur le second élément form. Ainsi, dans le premier formulaire, le bouton Envoyer validera les éléments auxquels des contraintes de validation sont appliquées, mais le bouton Enregistrer pour plus tard ne les validera pas et, dans le second formulaire, aucun élément ne sera validé, que des contraintes de validation lui soient appliquées ou non.


<!DOCTYPE html>
<html>
<head>
  <title>novalidate and formnovalidate Example</title>
</head>
<body>
  <form>
    <p><label>*Name: <input type="text" required /></label></p>
    <p><label>*Street: <input type="text" required /></label></p>
    <p><label>*Zip: <input type="text" pattern="[0-9](5|10)" placeholder="5 or 9 digit ZIP" required /></label></p>
    <input type="submit" name=submit value="Submit" />
    <input type="submit" formnovalidate name="save" value="Save for Later" />
    <p>* Required field</p>
  </form>
  <form novalidate>
    <p>Unvalidated area</p>
    <p><label>Name: <input type="text" required /></label></p>
    <p><label>Street: <input type="text" required /></label></p>
    <p><label>Zip: <input type="text" pattern= "[0-9](5|10)" placeholder="5 or 9 digit zip" required /></label></p>
    <input type="submit" name=submit value="Submit" />
  </form>
</body>
</html>


Messages d’erreur de validation personnalisés

Internet Explorer 10 affiche plusieurs messages génériques pour diverses erreurs de validation sur les éléments input. Vous pouvez désactiver ces messages à l’aide de l’attribut title dans l’élément input. Le contenu de l’attribut title est indiqué comme texte d’info-bulle pour le champ et ajouté au message d’erreur de correspondance générique. L’exemple suivant montre comment un champ d’entrée de numéro de téléphone peut fournir une invite aux utilisateurs pour leur indiquer le format correct du numéro de téléphone.


<form>
  <label>Enter a phone number: 
  <input type="text" title="xxx-xxx-xxxx" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" />
  <input type="submit" />
  </label>
</form>


Si un utilisateur ignore les tirets ou tape des lettres dans le champ, la réponse suivante apparaît. Le texte « Vous devez utiliser le format suivant : » est automatique.

Image de champ d’entrée de numéro de téléphone avec du texte d’info-bulle indiquant le format correct.

Avertissement en cas de verrouillage des majuscules sur les champs de mot de passe.

Pour permettre aux utilisateurs de réaliser plus rapidement qu’ils entrent un mot de passe incorrect, car la touche Verr. maj est active, Internet Explorer 10 et les applications du Windows Store en JavaScript ajoutent un message d’avertissement lorsque le focus est dans un champ d’entrée avec le type défini sur password et que la touche Verr. maj est active. Aucun codage supplémentaire n’est nécessaire.

Image d’un champ d’entrée de mot de passe avec du texte d’info-bulle indiquant que la touche Verr. maj est active.

Stylisation de champs validés avec les pseudo-classes :valid et :invalid

Signaler visuellement aux utilisateurs que les informations qu’ils ont entrées sont valides ou non peut être plus efficace que d’afficher un message d’erreur. Internet Explorer 10 et les applications du Windows Store en JavaScript prennent en charge les pseudo-classes :valid et :invalid. Ces sélecteurs vous permettent de styliser un champ d’entrée selon le type d’entrée ou un modèle. Par exemple, un champ d’URL peut avoir une bordure rouge jusqu’à ce qu’une adresse avec le format correct soit entrée.

Un champ requis sera non valide jusqu’à ce qu’il soit renseigné avec les informations correctes Un champ qui n’est pas requis mais auquel une contrainte de validation est appliquée, comme un champ d’URL, sera valide jusqu’à ce que du texte y soit entré.

Vous pouvez également styliser des champs requis ou facultatifs avec les pseudo-classes :required et :optional, respectivement. Les champs « requis » sont décrits dans une section précédente. Les champs « facultatifs » sont définis comme n’importe quels champs input pouvant accepter l’attribut required, mais pour lesquels cet attribut n’est pas défini, et comme n’importe quels éléments textarea et select pour lesquels l’attribut required n’est pas défini.

L’exemple suivant place une bordure verte sur un champ lorsqu’il est valide et une bordure rouge avec du texte gras lorsqu’il ne l’est pas. Le champ d’adresse de messagerie est requis mais les autres ne le sont pas. Le champ d’URL est prérempli avec une URL incorrecte, par conséquent il n’est pas valide lorsque la page s’ouvre. En outre, les deux champs facultatifs sont stylisés avec des arrière-plans de couleur gris clair et le champ requis avec un arrière-plan jaune vif.


<!DOCTYPE html >
<html>
<head>
  <title>:valid/:invalid Pseudo-class Example</title>
  <style type="text/css">

  #PC1 input:valid { 
    border :solid lime;
    font-weight:normal;
  }
  #PC1 input:invalid { 
    border:solid red;
    font-weight:bold;
  }
  #PC1 input:required{
    background-color:Yellow;
  }
  #PC1 input:optional{
    background-color:LightGray;
  }       
  </style>
</head>
<body>
  <form id="PC1">
    <p><label>Enter some text: <input type="text"/></label></p>
    <p><label>*Enter a valid email address: <input type="email" required /></label></p>
    <p><label>Enter a valid URL: <input type="url" value="not a url"/></label></p>       
    <p>* required field</p>
  </form>
</body>
</html>


Lorsque vous commencez à taper une adresse de messagerie dans le champ correspondant, il apparaît comme suit.

Image de plusieurs champs d’entrée. Une adresse incomplète est entrée dans le champ d’entrée d’adresse de messagerie et la couleur (rouge) de la bordure du champ l’indique.

Une fois que vous avez entré une adresse de messagerie valide (du point de vue syntaxique), la couleur de la bordure du champ passe de rouge à vert et le texte n’est plus en gras, comme il est illustré ci-dessous.

Image de plusieurs champs d’entrée. Une adresse complète est entrée dans le champ d’entrée d’adresse de messagerie et la couleur (vert) de la bordure du champ l’indique.

Lorsqu’ils sont stylisés ainsi, les champs renseignent immédiatement les utilisateurs sur la validité des informations qu’ils fournissent, car ils changent lorsque l’utilisateur entre des informations.

Vous pouvez afficher cette page. (Internet Explorer 10 ou un navigateur prenant en charge les pseudo-classes de validation de formulaire est nécessaire pour générer correctement le rendu de cette page.)

Méthodes, attributs et objets du DOM pour la validation des entrées

De nouvelles API ont été ajoutées à Internet Explorer 10 et aux applications du Windows Store en JavaScript pour permettre l’accès par programmation à l’état de validation des formulaires et des éléments en JavaScript.

Méthode checkValidity [pour HTMLFormElement]

La méthode checkValidity valide statiquement les contraintes (comme il est indiqué à la Section 4.10.21.2 de la spécification HTML5) de l’élément form et retourne "true" si la validation de la contrainte retourne un résultat positif ou "false" si elle retourne un résultat négatif.

Méthode checkValidity [pour HTMLInputElement et tous les autres éléments de formulaire]

La méthode checkValidity vérifie si l’élément est valide et retourne "true" si c’est le cas. Sinon, elle retourne "false". Si l’élément n’est pas valide, il déclenche également un événement invalid simple qui peut être annulé. Par contre, il n’a pas d’événement par défaut.

Attribut willValidate

L’attribut willValidate retourne "true" si un élément peut être validé (par exemple un type d’entrée url ou email ou un élément pour lequel l’attribut validation est défini) et retourne "false" dans le cas contraire.

Attribut validity

L’attribut validity retourne un objet d’état de validité (ValidityState) pour l’élément. L’objet est actif et le même objet est retourné à chaque fois que l’attribut est récupéré.

Attribut validationMessage

L’attribut validationMessage retourne le message d’erreur qui est affiché en fonction de l’état actuel du formulaire. Par exemple, si le formulaire est envoyé à ce moment, il n’est pas valide.

Méthode setCustomValidity (dans erreur DOMString)

La méthode setCustomValidity définit le message d’erreur de validité personnalisé pour un élément.

Objet ValidityState

L’objet ValidityState retourne "true" ou "false" pour les attributs booléens en lecture seule suivants :

AttributDescription

valueMissing

L’utilisateur n’a pas entré de valeur dans un champ requis.

typeMismatch

L’utilisateur a entré des informations dont la syntaxe n’est pas correcte, comme une URL ou une adresse de messagerie avec un format incorrect.

patternMismatch

L’utilisateur a entré des informations qui ne correspondent pas à ce que spécifie l’attribut pattern, comme des lettres alors que des chiffres sont attendus.

tooLong

Un contrôle a une valeur qui est plus longue que la valeur spécifiée par l’attribut maxlength. Étant donné que Windows Internet Explorer permet à un utilisateur d’entrer uniquement le nombre de caractères spécifié par maxlength, cela se produit en général lorsque la valeur par défaut contient trop de caractères.

rangeUnderflow

L’utilisateur a entré une valeur inférieure à la valeur spécifiée par l’attribut min.

rangeOverflow

L’utilisateur a entré une valeur supérieure à la valeur spécifiée par l’attribut max.

stepMismatch

L’utilisateur a entré une valeur qui ne correspond pas à une valeur autorisée spécifiée par les attributs step et min. Par exemple, l’utilisateur a entré un nombre impair alors que des nombres pairs sont attendus.

customError

Le contrôle affiche un message défini par la méthode setCustomValidity de l’élément (la chaîne n’est pas vide).

valid

Aucune autre condition ne retourne true.

 

Informations de référence sur les API

:invalid
:optional
:required
:valid
checkValidity
input
progress
setCustomValidity
validationMessage
validity
ValidityState
willValidate

Exemples et didacticiels

Exemples de contrôles de formulaire
Exemples de validation de formulaire

Démonstrations du site Internet Explorer Test Drive

Touch First Controls

Billets IEBlog

Recommandations en matière de génération de sites tactiles

Spécification

HTML5: Section 4.10

 

 

Afficher:
© 2015 Microsoft