INPUT: les nouveaux types de données

L'élement INPUT accepte de nouveaux types de données. Nous allons voir ici comment les exploiter et le bénéfice qu'on peut en tirer.

Les types standards

Selon les spécifications du W3C, l'élément input accepte seulement les types suivants:

button
checkbox
file
hidden
image
password
radio
reset
submit
text

Le type qui nous intéresse plus particulièrement est le type text:

<form action="monAction.php" method="POST">
    <p><label>nom:</label>
        <input type="text" name="prenom"/></p>
    <p><label>email:</label>
        <input type="text" name="email"/></p>
    <p><label>&nbsp;</label>
        <input type="submit" value=" envoyer "/></p>
</form>

Et le formulaire ainsi généré:

Jusqu'à présent, c'est à dire avant l'arrivée de HTML5, le contrôle du contenu d'un champ de type text n'était possible que selon deux méthodes:

en PHP: à l'exécution de l'action, ce qui oblige l'utilisateur à revenir au formulaire, avec le risque de voir perdre tout ou partie du contenu des champs saisis;
en javaScript: pendant la saisie ou au moment de l'envoi du formulaire via des scripts JavaScript.

Le contrôle du contenu d'un champ de type text reste un véritable problème qu'il faut prendre en compte:

validation d'une adresse mail,
validation d'un lien hypertexte,
validation d'une date,
test d'une valeur numérique ou alphabétique, etc...

Les nouveaux types en HTML5

Avec le nouveau standard HTML5, input accepte de nouveaux types:

color
date
datetime
datetime-local
email
month
number
range
search
tel
time
url
week

En gras ci-avant les types d'entrées pris en compte par l'élément input avec les navigateurs Firefox, Chrome et Opera (2012). Voici notre formulaire réécrit en exploitant le type email à la place du type text:

<form action="monAction.php" method="POST">
    <p><label>nom:</label>
        <input type="text" name="prenom"/></p>
    <p><label>email:</label>
        <input type="email" name="email"/></p>
    <p><label>&nbsp;</label>
        <input type="submit" value=" envoyer "/></p>
</form>

le type email est exploité dans cette ligne de code:

  <input type="email" name="email"/></p>

Question: que ce passe-t-il si on utilise le type email avec un navigateur non compatible HTML5 ou n'exploirtant pas ce type d'entrée pour input?

Réponse: rien! Tous les navigateurs non compatibles HTML5 prennent par défaut la valeur text pour l'attribut type si c'est une valeur non gérée. Exemple, utilisons volontairement un type vraiment inconnu de tous les navigateurs:

        <input type="azertyuiop" name="email"/></p>

Le contrôle des données saisies

Le choix de nouvelles valeurs possibles pour l'attribut type de l'élément input devient intéressant avec certains moyens de contrôles du contenu d'un champ, soit à la saisie, soit à la validation du formulaire.

Voici comment faire le contrôle via jQuery. D'abord la partie javaScript à intégrer en tête du code HTML dans la partie head:

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.validate.js"></script>
<script>
    $(document).ready(function() { 
        $("#myform").validate(); 
    });
</script>

Et le code CSS pour que tout soit bien beau et présentable:

<style type="text/css">
    form label { display: inline-block; width: 120px; text-align: right; 
                 padding-right: 4px; vertical-align: top; }
    form p { margin-top: 6px; margin-bottom: 0px; }
    input { font: inherit; border: 1px solid #a0a0a0; }
    label.error { color: red; width: 360px; text-align: left; padding-left: 6px; }
    input.error { background-color: yellow; }
</style>

Et comment exploiter la validation via jQuery dans notre code HTML:

<form action="monAction.php" method="POST id="myform">
    <p><label>nom:</label>
        <input type="text" name="prenom"/></p>
    <p><label>email:</label>
        <input type="email" name="email"
               title="entrer un mail valide" /></p>
    <p><label>&nbsp;</label>
        <input type="submit" value=" envoyer "/></p>
</form>

Nous n'avons fait que deux choses dans notre code HTML:

identifier le formulaire avec id="myform", ce qui rattache l'exécution des contrôles de jQuery à ce formulaire;
rajouter l'attribut title à l'élément input du champ de saisie de l'adresse mail.

Certains navigateurs, en particulier Firefox, Chrome et opera n'ont même plus besoin de code JavaScript pour tester la validité du contenu d'un champ saisi au travers de l'élément input:

contrôle de saisie email par Firefox v14.x

Ci-dessus, Firefox refuse de valider le formulaire si on n'entre pas une adresse mail valide. Par contre, la saisie est acceptée si le champ reste vide.

Ce test du contenu du champ par les versions récentes de Firefox est possible seulement si on affecte explicitement la valeur email à l'attribut type de notre élément input.

Ce test automatique du contenu par Firefox, Chrome et Opéra sans passer par du code JavaScript s'applique aussi aux champs de saisie texte de type url:

    <p><label>site web:</label>
        <input type="url" name="siteWeb"/></p>

L'URL saisi devra obligatoirement commencer par http:// sans quoi la validation du formulaire sera refusée.

En conclusion

L'adoption des nouvelles règles de codage HTML devient une nécessité pour le créateur de sites web. Ici, un simple changement de valeur text en email permet une validation automatique d'une adresse mail - au niveau de la structure exclusivement de cette adresse mail - sans autre connaissance, tel JavaScript et son extension jQuery.

Ni HTML5, ni Javascript ne savent vérifier si une adresse mail correspond bien à une adresse mail réellement utilisée. Dans ce domaine, il n'existe guère de solution absolument fiable