Formulaires HTML5: Types d'entrée (partie 1) - SitePoint

Explication détaillée et meilleures pratiques pour les types d'entrée de formulaire HTML5

Points de base

• Les formulaires HTML5 introduisent de nouveaux types d'entrée, tels que le courrier électronique, la recherche, la date, l'heure, le nombre, la plage, la couleur, etc. Ces types fournissent des éléments d'interface utilisateur et des fonctions de vérification des données natives qui sont plus cohérentes avec les types de données. Même dans les navigateurs plus anciens, ces nouveaux types d'entrée fonctionnent correctement, sauf qu'ils apparaîtront par défaut en tant que champs de texte standard.
• Le type d'entrée de recherche (type="search") fournit un champ de recherche pour fournir aux utilisateurs des invites de site de recherche intuitives. Il est généralement livré avec un bouton Clear intégré et peut être conçu pour correspondre à la zone de recherche du navigateur ou du système d'exploitation.
• Le type d'entrée par e-mail (type="email") est utilisé pour spécifier une ou plusieurs adresses e-mail. Il prend en charge l'attribut booléen multiple pour plusieurs adresses e-mail séparées par des virgules. Les périphériques TouchPad affichent généralement les claviers optimisés pour l'entrée des e-mails lorsque ce champ se concentre, et certains navigateurs fournissent également des messages d'erreur pour l'entrée par e-mail non valide.
• Le type d'entrée d'URL (type="url") est utilisé pour spécifier une adresse réseau, similaire au type d'entrée de messagerie, qui s'affiche comme champ de texte normal, mais fournit un clavier optimisé pour l'entrée d'adresse réseau sur l'écran tactile. Les navigateurs modernes utilisent ce type d'entrée pour vérifier le format de protocole général de l'URL.

(Les éléments suivants sont extraits du livre "HTML5 & CSS3 pour le monde réel, 2e édition" co-écrit par Alexis Goldstein, Louis Lazaris et Estelle Weyl. Le livre est disponible dans les magasins du monde entier, et Vous pouvez également le trouver ici. Vous connaissez peut-être déjà les attributs

de l'élément

. Cette propriété détermine quel type d'entrée de formulaire sera présenté à l'utilisateur. Si cette propriété est omise - ou pour les nouveaux types d'entrée et les navigateurs plus anciens, si le navigateur ne comprend pas le type - il reste valide; C'est ce qui fait que les formulaires HTML5 fonctionnent toujours aujourd'hui, même si vous soutenez toujours les navigateurs plus âgés. Si vous utilisez un nouveau type d'entrée, tel que le courrier électronique ou la recherche, l'ancien navigateur affichera uniquement les champs de texte standard à l'utilisateur. input type Notre formulaire d'enregistrement utilise actuellement quatre des dix types d'entrée que vous connaissez: case, texte, mot de passe et soumettre. Voici une liste de tous les types disponibles avant HTML5: type="text"

bouton

cocher la boîte
fichier
Hidden
Image
mot de passe
radio
réinitialiser
soumettre
texte
• La spécification HTML5 nous fournit neuf nouveaux types d'entrée qui fournissent des éléments d'interface utilisateur et des capacités de vérification des données natives qui sont plus conformes au type de données:
• Recherche
• Email
• url
• tel
• Date
• temps
• numéro
• gamme
• couleur

HTML5.1 et Whatwg HTML Living Standard contiennent quatre types d'entrée de date supplémentaires, dont trois sont bien pris en charge dans les navigateurs modernes:

• DateTime-local
• mois
• semaine
• DateTime (aucun navigateur ne le prend en charge)

En savoir plus sur chaque nouveau type et comment les utiliser.

Recherche (recherche)

Le type d'entrée de recherche (type="search") fournit un champ de recherche - un contrôle d'entrée de texte à une seule ligne pour saisir un ou plusieurs termes de recherche. Spécification souligne:

La différence entre l'état du texte et l'état de recherche est principalement dans le style: sur les plates-formes où le champ de recherche est différent du champ de texte normal, l'état de recherche peut entraîner la cohérence de l'apparence avec le champ de recherche de la plate-forme, plutôt que comme le champ de texte normal.

De nombreux navigateurs sont de style de recherche des entrées de manière cohérente en tant que case de recherche du navigateur ou du système d'exploitation. Actuellement, Chrome, Safari, Opera et IE ont ajouté la fonction de compensation de l'entrée en cliquant sur la souris pour fournir l'icône × icône après la saisie du texte, comme le montre la figure 4.5. Le type d'entrée de date / heure peut également être effacé dans Chrome et l'opéra.



Figure 4.5.
Sur les appareils Apple, les champs de recherche de Chrome, Safari et Opera ont des coins arrondis par défaut, correspondant à l'apparence du champ de recherche de l'appareil. Sur un pavé tactile avec un clavier dynamique, le bouton «Go» apparaîtra comme l'icône de recherche ou le mot «recherche», selon l'appareil. Si vous incluez des propriétés non standard
, Chrome et l'opéra affichent l'icône de loupe / trouver dans le champ de formulaire.

results Bien que vous puissiez toujours utiliser

pour créer des champs de recherche, le nouveau type de recherche peut intudier intuitivement les utilisateurs où rechercher des sites et fournir une interface à laquelle les utilisateurs sont habitués.

Il n'y a pas de champ de recherche, mais voici un exemple de la façon de l'utiliser: type="text" HTML5 Herald

Étant donné que la recherche, comme tous les nouveaux types d'entrée, apparaît comme une zone de texte ordinaire dans les navigateurs non pris en charge, il n'y a aucune raison de ne pas l'utiliser le cas échéant.

<form id="search" method="get">
  <label for="s">Search:</label>
  <input type="search" id="s" name="s"/>
  <input type="submit" value="Search"/>
</form>

Adresses e-mail (adresses e-mail)

Le type de messagerie (

) est utilisé pour spécifier une ou plusieurs adresses e-mail. Il prend en charge les attributs booléens

, permettant à plusieurs adresses e-mail séparées (espaces facultatives). Changeons le formulaire pour utiliser type="email" pour l'adresse e-mail du inscrit: multiple

<form id="search" method="get">
  <label for="s">Search:</label>
  <input type="search" id="s" name="s"/>
  <input type="submit" value="Search"/>
</form>

Si vous modifiez le type d'entrée du texte au e-mail, comme nous le faisons ici, vous remarquerez qu'il n'y a pas de changement notable dans l'interface utilisateur; l'entrée ressemble toujours à un champ de texte normal. Cependant, il existe des différences dans les coulisses.

Si vous utilisez un appareil tactile, ce changement devient évident. Lorsque vous vous concentrez sur le champ d'e-mail, la plupart des appareils tactiles, tels que les iPads ou les téléphones Android exécutant le chrome, affichent les claviers optimisés pour l'entrée des e-mails, y compris les symboles, les périodes et les boutons d'espace, mais pas les virgules, comme le montre la figure 4.6.



Figure 4.6.
Firefox, Chrome, Opera, and Internet Explorer 10 fournit également des messages d'erreur pour la saisie par e-mail non valide: si vous essayez de soumettre un formulaire qui ne reconnaît pas comme une ou plusieurs adresses e-mail, le navigateur vous dira ce qui ne va pas. Le message d'erreur par défaut est illustré à la figure 4.7.

Figure 4.7. Remarque: les messages de vérification personnalisés n'aiment pas les messages d'erreur par défaut fournis par le navigateur? Utilisez

pour définir votre propre message.
n'accepte qu'un paramètre, le message d'erreur que vous souhaitez fournir. Si vous configurez un message de validation personnalisé, une fois que la valeur devient une valeur valide, vous devez définir le message de validation sur une chaîne vide (fausse valeur) pour activer la soumission du formulaire:

.setCustomValidity(errorMsg) Malheureusement, bien que vous puissiez modifier le contenu du message, au moins pour le moment, vous êtes toujours limité par son apparence. setCustomValidity

url

<label for="email">My email address is:</label>
<input type="email" id="email" name="email"/>

Entrée d'URL (

) est utilisée pour spécifier l'adresse réseau. Tout comme les e-mails, il apparaîtra comme un champ de texte normal. Sur de nombreux écrans tactiles, le clavier à l'écran affiché sera optimisé pour l'entrée d'adresse du réseau, avec des raccourcis vers l'avant (/) et ".com". Mettons à jour notre formulaire d'enregistrement pour utiliser le type d'entrée d'URL:

Vérification de l'URL type="url"

Tous les navigateurs modernes commençant par Internet Explorer 10 Prise en charge des types d'entrée d'URL, et si la valeur ne commence pas par un protocole, l'entrée sera invalide. Valider uniquement le format de protocole général de l'URL, donc par exemple, q: //example.xyz sera considéré comme valide, même si q: // n'est pas un réel protocole, .xyz n'est pas un vrai domaine de niveau supérieur. Si vous souhaitez que la valeur entrée s'adapte à un format plus spécifique, fournissez des informations dans la balise (ou l'espace réservé) pour informer l'utilisateur et utiliser l'attribut

function setErrorMessages(formControl) {
  var validityState_object = formControl.validity;
  if (validityState_object.valueMissing) {
      formControl.setCustomValidity('Please set an age (required)');  
  } else if (validityState_object.rangeUnderflow) {
      formControl.setCustomValidity('You\'re too young');
  } else if (validityState_object.rangeOverflow) {
      formControl.setCustomValidity('You\'re too old');
  } else if (validityState_object.stepMismatch) {
      formControl.setCustomValidity('Counting half birthdays?');
  } else {
      //如果有效，必须设置虚假值，否则将始终出错
      formControl.setCustomValidity('');
  }
}

pour garantir son exactitude, comme mentionné précédemment.

Numéros de téléphone (numéros de téléphone)

Pour les numéros de téléphone, utilisez le type d'entrée TEL (type="tel"). Contrairement aux types d'URL et d'e-mails, les types TEL n'appliquent pas une syntaxe ou un modèle spécifique. Les lettres et les nombres - en fait, tout caractère sauf les ruptures de ligne ou le retour du chariot - est valide. Cela a une bonne raison: dans le monde, chaque pays a des numéros de téléphone valides de différentes longueurs et ponctuations, il est donc impossible de spécifier un format unique en tant que norme. Par exemple, aux États-Unis, 1 (415) 555-1212 est aussi facile à comprendre que 415.555.1212, mais les entreprises peuvent également utiliser des lettres dans les numéros de téléphone, tels que (800) Call-Now. Vous pouvez encourager un formatage spécifique en incluant des espaces réservés avec une syntaxe ou des commentaires corrects après la contribution, ainsi que des exemples. De plus, vous pouvez spécifier le format à l'aide de l'attribut pattern. Incluez un pattern dans l'attribut title pour fournir des info-bulles et améliorer l'expérience utilisateur des messages d'erreur de vérification native. Vous pouvez également utiliser la méthode setCustomValidity pour fournir une vérification plus informative du client. Lorsque vous utilisez le type d'entrée TEL, le pavé tactile dynamique affiche généralement le clavier du téléphone, y compris les touches d'astérisque et de livre. Vous pouvez utiliser TEL à d'autres fins que les numéros de téléphone. Par exemple, il peut être le meilleur clavier pour l'entrée de formulaire de numéro de sécurité sociale.

FAQS pour les types d'entrée de formulaire HTML5 (FAQ)

Quels sont les différents types de types d'entrée de formulaires HTML5?

HTML5 introduit divers nouveaux types d'entrée de formulaire. Ceux-ci incluent "Color", "Date", "DateTime-Local", "Email", "Mois", "Number", "Range", "Search", "Tel", "Time", "URL" et "Week ». Chaque type d'entrée a son objectif spécifique et peut améliorer considérablement l'expérience utilisateur du site Web en fournissant des champs d'entrée plus appropriés et conviviaux.

Comment fonctionne l'entrée "Date" dans HTML5?

Le type d'entrée "Date" dans HTML5 crée un champ de saisie qui permet à l'utilisateur de saisir une date. Le format de date est formaté en fonction du paramètre des paramètres du navigateur de l'utilisateur et un sélecteur de date est généralement fourni pour la commodité des utilisateurs. Cependant, la prise en charge de ce type d'entrée varie d'un navigateur à l'autre.

Que se passe-t-il lors de la visualisation des types d'entrée de formulaire HTML5 dans les anciens navigateurs?

Si vous affichez le type d'entrée de formulaire HTML5 dans un navigateur plus ancien qui ne le prend pas en charge, le navigateur sera par défaut au champ de saisie "Text" standard. Cela signifie que l'utilisateur peut toujours saisir des informations, mais les fonctionnalités spécifiques du type d'entrée HTML5 (telles que le sélecteur de date pour le type d'entrée "date") ne seront pas disponibles.

Comment vérifier la saisie de l'utilisateur dans le formulaire HTML5?

html5 fournit plusieurs attributs pour la vérification des entrées, y compris "requis", "modèle" et "min" / "max" des types d'entrée numériques. Ces propriétés peuvent être utilisées pour garantir que la saisie de l'utilisateur répond aux critères spécifiques avant la soumission du formulaire.

Quel est le type d'entrée "Range" dans HTML5?

Le type d'entrée "plage" dans HTML5 crée un curseur qui permet à l'utilisateur de sélectionner des valeurs dans une plage spécifique. Vous pouvez spécifier la plage à l'aide des propriétés "min" et "max" et spécifier la valeur par défaut à l'aide des propriétés "valeur".

Comment le type d'entrée "e-mail" dans HTML5 améliore-t-il l'expérience utilisateur?

Le type d'entrée "e-mail" dans HTML5 offre aux utilisateurs un moyen pratique de saisir leur adresse e-mail. Il comprend une vérification intégrée pour vérifier si le texte entré se trouve dans le format d'adresse e-mail. Certains navigateurs peuvent également fournir une saisie semi-automatique pour ce type d'entrée.

Quel est le but du type d'entrée "Search" dans HTML5?

Le type d'entrée "Search" dans HTML5 est conçu pour les champs de recherche. Ce type d'entrée peut fournir des fonctionnalités spécifiques à la recherche, telles que l'effacement de la zone de recherche en un clic, ou afficher les résultats de recherche les plus récents à l'utilisateur.

Comment utiliser le type d'entrée "numéro" dans HTML5?

Le type d'entrée "numéro" dans HTML5 permet à l'utilisateur de saisir l'entrée numérique. Vous pouvez utiliser les propriétés MIN et MAX pour spécifier une plage de nombres acceptable et utiliser la propriété «Step» pour spécifier les valeurs d'étape.

À quoi sert le type d'entrée "Tel" dans HTML5?

Le type d'entrée "Tel" dans HTML5 est utilisé pour le champ de saisie qui doit contenir le numéro de téléphone. Cependant, il ne vérifie pas l'entrée, vous devez donc utiliser JavaScript ou des techniques de vérification similaires.

Comment fonctionne l'entrée "URL" dans HTML5?

Le type d'entrée "URL" dans HTML5 est utilisé pour les champs d'entrée qui doivent contenir des URL. Il comprend une vérification intégrée pour vérifier si le texte entré est au format URL. Certains navigateurs peuvent également fournir une saisie semi-automatique pour ce type d'entrée.

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!