INPUT

Syntaxe

Paramètres

Description

Cette balise permet d'effectuer une entrée de données dans un formulaire. On entend par une entrée de données, un ensemble de n'importe quel caractère, lettre, chiffre ou symbole insérable par l'intermédiaire d'un périphérique de clavier ou d'un clavier virtuel.

Remarques

• Placeholder et Watermark : Si vous n'utilisez pas le HTML5, vous devriez envisager d'utiliser un Watermark comme le Watermark plugin for jQuery, situé sur le site de Google «https://code.google.com/p/jquery-watermark/»
• ATTENTION ! Si vous ajoutez un paramètre «DISABLED» et qu'il est soumis dans un formulaire, le champ et sa valeur ne seront pas retournés par le navigateur Web au serveur Web. Ainsi, le serveur Web ne pourrait jamais connaitre la valeur de ce champ, peu importe le type de validation qu'il effectue.
• Si vous utilisez le navigateur Web «Google Chrome» et que vous souhaitez enlever les contours dorés, vous devrez utiliser une feuille de style et insérer le code CSS suivant associé à cette balise : «outline: none;».
• «input submit» : Si vous avez un formulaire à soumettre et que vous ne voulez pas qu'il soit resoumis une deuxième fois avec un refresh (F5) et ses méthodes «POST» par exemple, vous avez le choix d'effectuer une redirection sur la même page, de l'envoyer à une page différente, de mettre un Captcha ou de vérifier au niveau du serveur Web que l'information n'y est pas dupliqué (soit en vérifiant dans le journal de bord ou dans la base de données). Toutefois, il est déconseillé d'utiliser le JavaScript «location.reload();» car il renverra les méthodes «POST» au serveur Web. De plus, il est quand même sage de désactiver le bouton de soumission, à l'aide de JavaScript, une fois que le bouton a été cliqué.
• ATTENTION ! Si vous utilisez un <INPUT TYPE="PASSWORD"> et que vous lui mettez un paramètre VALUE correspondant au mot de passe, il indiquera donc se mot de passe par défaut dans cet entrée de données, mais rien n'empêche n'importe quel utilisateur malveillant d'afficher le code source de la page et de constater en claire le mot de passe dans la page. Dans cette situation, il peut s'agir d'une faille de sécurité majeure exploitable par un logiciel malveillant installé à l'insu de l'utilisateur.
• Conflit : Dans la plupart des navigateurs, le paramètre «style» est prioritaire sur le paramètre «class» ou «id». Ainsi, si vous définissez aux deux endroits, des valeurs différentes, par exemple «style="color:red;"» et «color:green» dans la classe, c'est le paramètre «style» avec son «color:red» qui sera utilisé par le navigateur Web. Il est à noter qu'il est préférable de ne pas mettre des informations contradictoires comme celle-ci (deux paramètres identiques avec des valeurs différentes) car le résultat peut malgré tout demeurer imprévisible.
• Ancienne pratiques : Au début du HTML, la bande passante était très limitée, par exemple, le modem avec un taux de transfert de quelques centaines d'octets par secondes. Le chargement des pages était très lent, et pour accélérer le processus beaucoup de développeurs enlevaient délibérément les guillemets «"» au paramètre de leur balise afin de réduire la taille de leur page HTML. Par la suite, à cause des résultats souvent imprévisible que cela causait par à un IE versus les autres navigateurs, les idées de la norme du w3c se sont imposées et le retour des guillemets au paramètres de balises est revenue.
• Fichier: Si vous avez un type="FILE", vous devez vous assurer d'avoir le paramètre «enctype="multipart/form-data"» dans la balise «FORM», car sinon, il n'enverra pas le contenu du fichier.
• checked="checked" en double : Si vous avez indiquer le paramètre «checked="checked"» à plus d'un bouton radio du même nom, certains navigateurs sélectionneront le premier tandis que d'autres navigateurs sélectionneront le dernier, il est donc déconseiller de mettre ce paramètre en double car vos applications ne réagiront pas de la même manière d'un navigateur à l'autre.
• Les paramètres peuvent être indiqué dans l'ordre que vous le souhaitez. Il n'existe pas d'obligation de les mettre dans un ordre précis pour les navigateurs Web.

Exemples

Voici un exemple montrant différente façon d'utiliser cette balise :

Voici le résultat affiché :

L'exemple suivant permet de valider que le champ contient une date de format «jj/mm/aaaa» ou «mm/jj/aaaa» :

L'exemple suivant permet de valider que le champ contient un URL avec le protocole HTTP ou HTTPS :

L'exemple suivant permet de valider que le champ contient une adresse IP de format IPv4 :

L'exemple suivant permet de valider que le champ contient bien une longitude et une latitude :

Voici un exemple permettant d'afficher une liste de boutons radio :

on obtiendra le résultat semblable suivant :

Voici un exemple permettant d'afficher un bouton d'image :

on obtiendra le résultat semblable suivant :

L'exemple suivant permet de remplacer un bouton soumettre par une image :

on obtiendra le résultat semblable suivant :

Voici un exemple permettant d'afficher 5 cases à cocher :

on obtiendra le résultat semblable suivant :

Voici un exemple montrant comment effectuer un téléversement :

on obtiendra le résultat semblable suivant :

Voici un exemple montrant comment faire clignoter les boutons si les animations du CSS3 sont supportés :

on obtiendra le résultat semblable suivant :

L'exemple suivant permet d'activer un champ texte lorsque une case est coché : :

on obtiendra le résultat semblable suivant :

Légende

    Cette couleur permet d'indiquer les paramètres existantes seulement depuis le HTML5.
    Cette couleur permet d'indiquer le paramètre ou la constante est déconseillé.

Voir également

Langage de programmation - JavaScript - Soumettre un formulaire en JavaScript
Articles - Comparatif des méthodes «POST» ou «GET» ?

Références

HTML - The Definitive Guide, 3rd Edition, Edition O'Reilly, Chuck Musciano, Bill Kennedy, 1998, ISBN: 1-56592-492-4, page 515 à 520
La Bible Micro Application HTML & Développement Web, Edition Micro Application, Stefan Munz, Wolfgang Nefzger, 2003, ISBN: 2-7429-2898-7, page 616