Section courante

A propos

Section administrative du site

INPUT

Entrée
HTML 2+ IE2+, FireFox 1+, Opera 3+, Chrome 1+, Safari 1+, Netscape 2+, AvantGo

Syntaxe

<INPUT paramètres />

Paramètres

Paramètre Description
ACCEPT=mime Ce paramètre de balise permet d'indiquer le type MIME lorsqu'on on choisit le type d'entrée fichier (type="file").
ACCESSKEY=caractère Ce paramètre de balise permet d'indiquer un touche de raccourci à associer avec cette balise.
ALIGN=alignement Ce paramètre de balise permet de définir le type d'alignement que l'élément appliquera par défaut:
Constante Description
"BOTTOM" Cette constante indique que l'alignement sera effectuer à partir du bas
"CENTER" Cette constante indique que l'alignement sera effectuer à partir du centre
"LEFT" Cette constante indique que l'alignement sera effectuer à partir de la gauche
"MIDDLE" Cette constante indique que l'alignement sera effectuer à partir du milieu
"RIGHT" Cette constante indique que l'alignement sera effectuer à partir de la droite
"TOP" Cette constante indique que l'alignement sera effectuer à partir du haut
ALT=message Ce paramètre de balise permet d'indiquer un message alternatif lorsqu'un élément n'est pas totalement affiché.
AUTOCOMPLETE=valeur Ce paramètre de balise permet d'indiquer s'il est autoriser de suggéré des réponses à l'internaute :
Constante Description
OFF Cette valeur permet d'indiquer qu'il ne faut pas proposer de choix de réponse. C'est le cas par exemple pour informations de carte de crédit ou bancaire.
"CENTER" Cette valeur permet d'indiquer qu'il faut autorise les choix de réponse, d'autocomplétion du navigateur Web. C'est l'option par défaut.
CHECKED Ce paramètre de balise permet d'indiquer que l'entrée est sélectionné lorsqu'on à un type case à cocher ou bouton radio (type="checkbox" ou type="radio").
CLASS=nomclasse Ce paramètre de balise permet d'indiquer la classe de feuille de style associé avec cette balise.
DATAFLD=nomchamps Ce paramètre de balise permet d'indiquer le nom du champs de la source de données.
DATAFORMATAS=texte Ce paramètre de balise permet d'indiquer le type d'interprétation de la source de données.
DATASRC=nomsource Ce paramètre de balise permet d'indiquer le nom de la source de données.
DIR=direction Ce paramètre de balise permet d'indiquer la direction de la langue:
Constante Description
"LTR" Cette constante indique que la direction s'effectue de la gauche vers la droite
"RTL" Cette constante indique que la direction s'effectue de la droite vers la gauche
DISABLED Ce paramètre de balise permet d'indiquer l'entrée n'est pas active et par conséquent sélectionnable ou modifiable.
ID=identificateur Ce paramètre de balise permet d'indiquer l'identificateur de cette balise.
ISMAP Ce paramètre de balise permet d'indiquer un graphique pour les cartes cliquables.
LANG=mid Ce paramètre de balise permet d'indiquer le MID du langage:
Valeur Description
"af" Cette valeur indique la langue africaine
"ar" Cette valeur indique la langue arabe
"ar-AE" Cette valeur indique la langue arabe des Émirates-Unies
"ar-BH" Cette valeur indique la langue arabe de Bahreïn
"ar-DZ" Cette valeur indique la langue arabe de l'Algérie
"ar-EG" Cette valeur indique la langue arabe de l'Egypte
"ar-IQ" Cette valeur indique la langue arabe de l'Irak
"ar-JO" Cette valeur indique la langue arabe de la Jordanie
"ar-KW" Cette valeur indique la langue arabe du Koweit
"ar-LB" Cette valeur indique la langue arabe du Liban
"ar-LY" Cette valeur indique la langue arabe du Libye
"ar-MA" Cette valeur indique la langue arabe du Maroc
"ar-OM" Cette valeur indique la langue arabe du Oman
"ar-QA" Cette valeur indique la langue arabe du Qatar
"ar-SA" Cette valeur indique la langue arabe de l'Arabie Saoudite
"ar-SY" Cette valeur indique la langue arabe de Syrie
"ar-TN" Cette valeur indique la langue arabe de la Tunisie
"ar-YE" Cette valeur indique la langue arabe du Yémen
"be" Cette valeur indique la langue de Biélorussie
"bg" Cette valeur indique la langue de Bulgarie
"cs" Cette valeur indique la langue de Crète
"da" Cette valeur indique la langue danoise
"de" Cette valeur indique la langue allemande
"de-AT" Cette valeur indique la langue allemande d'autriche
"de-CH" Cette valeur indique la langue allemande de Suisse
"de-LI" Cette valeur indique la langue allemande de Liechtenstein
"de-LU" Cette valeur indique la langue allemande du Luxembourg
"el" Cette valeur indique la langue grecque
"en" Cette valeur indique la langue anglaise
"en-AU" Cette valeur indique la langue anglaise australienne
"en-BZ" Cette valeur indique la langue anglaise du Bélize
"en-CA" Cette valeur indique la langue anglaise canadienne
"en-GB" Cette valeur indique la langue anglaise de la Grande Bretagne
"en-IE" Cette valeur indique la langue anglaise de l'Irlande
"en-JM" Cette valeur indique la langue anglaise de la Jamaïque
"en-NZ" Cette valeur indique la langue anglaise du Néo-zélandais
"en-US" Cette valeur indique la langue anglaise à l'américaine
"en-ZA" Cette valeur indique la langue anglaise de l'afrique du sud
"es" Cette valeur indique la langue espagnol
"es-AR" Cette valeur indique la langue espagnol de l'Argentine
"es-BO" Cette valeur indique la langue espagnol de Bolivie
"es-CL" Cette valeur indique la langue espagnol du Chilie
"es-CO" Cette valeur indique la langue espagnol de Colombie
"es-CR" Cette valeur indique la langue espagnol du Costa Rica
"es-EC" Cette valeur indique la langue espagnol du Equateur
"es-GT" Cette valeur indique la langue espagnol du Guatemala
"es-HN" Cette valeur indique la langue espagnol du Honduras
"es-MX" Cette valeur indique la langue espagnol du Mexique
"es-NI" Cette valeur indique la langue espagnol du Nicaragua
"es-PA" Cette valeur indique la langue espagnol du Panama
"es-PE" Cette valeur indique la langue espagnol du Pérou
"es-PR" Cette valeur indique la langue espagnol du Puerto Rico
"es-PY" Cette valeur indique la langue espagnol du Paraguay
"es-SV" Cette valeur indique la langue espagnol du El Salvador
"es-TT" Cette valeur indique la langue espagnol du Trinidad
"es-UY" Cette valeur indique la langue espagnol du Uruguay
"es-VE" Cette valeur indique la langue espagnol du Venezuela
"et" Cette valeur indique la langue estonienne
"eu" Cette valeur indique la langue basque
"fa" Cette valeur indique la langue iranienne
"fi" Cette valeur indique la langue finlandaise
"fo" Cette valeur indique la langue faeroese
"fr" Cette valeur indique la langue française
"fr-BE" Cette valeur indique la langue française de Belgique
"fr-CA" Cette valeur indique la langue française canadienne
"fr-CH" Cette valeur indique la langue française de Suisse
"fr-FR" Cette valeur indique la langue française de France
"fr-LU" Cette valeur indique la langue française du Luxembourg
"fr-QC" Cette valeur indique la langue française québécoise
"gd" Cette valeur indique la langue galicienne
"he" Cette valeur indique la langue hébreu
"hi" Cette valeur indique la langue hindou
"hr" Cette valeur indique la langue croate
"hu" Cette valeur indique la langue hongroise
"in" Cette valeur indique la langue indonésienne
"is" Cette valeur indique la langue Islandaise
"it" Cette valeur indique la langue italienne
"it-CH" Cette valeur indique la langue italienne de la Suisse
"ja" Cette valeur indique la langue japonais
"ji" Cette valeur indique la langue yiddish
"ko" Cette valeur indique la langue coréein
"lt" Cette valeur indique la langue littuanienne
"lv" Cette valeur indique la langue Lettische
"mk" Cette valeur indique la langue de la Macédoine
"ms" Cette valeur indique la langue malésienne
"mt" Cette valeur indique la langue maltaise
"nl" Cette valeur indique la langue néerlandaise
"nl-BE" Cette valeur indique la langue néerlandaise Belge
"no" Cette valeur indique la langue norvégien
"pl" Cette valeur indique la langue polonaise
"pt" Cette valeur indique la langue portuguaise
"pt-br" Cette valeur indique la langue portuguaise du Brésil
"rm" Cette valeur indique la langue Rhaeto-Romanic
"ro" Cette valeur indique la langue roumain
"ro-MO" Cette valeur indique la langue roumain de la Moldavie
"ru" Cette valeur indique la langue russe
"ru-MO" Cette valeur indique la langue russe de la Moldavie
"sa" Cette valeur indique la langue sanskrit
"sb" Cette valeur indique la langue sorbianne
"sk" Cette valeur indique la langue slovaque
"sl" Cette valeur indique la langue Slovéne
"sq" Cette valeur indique la langue albanaise
"sr" Cette valeur indique la langue serbe
"sv" Cette valeur indique la langue suèdoise
"sv-FI" Cette valeur indique la langue suèdoise de la Finlande
"sx" Cette valeur indique la langue estonienne
"th" Cette valeur indique la langue thaïlandaise
"tn" Cette valeur indique la langue tswana de l'Afrique du sud
"tr" Cette valeur indique la langue turc
"ts" Cette valeur indique la langue tsonga de l'Afrique du sud
"uk" Cette valeur indique la langue ukrainienne
"ur" Cette valeur indique la langue urdu
"vi" Cette valeur indique la langue vietnamienne
"xh" Cette valeur indique la langue xhosa de l'Afrique
"zh" Cette valeur indique la langue chinoise
"zh-CN" Cette valeur indique la langue chinoise de PRC
"zh-HK" Cette valeur indique la langue chinoise de Hong-Kong
"zh-SG" Cette valeur indique la langue chinoise de Singapour
"zh-TW" Cette valeur indique la langue chinoise de Taïwan
"zu" Cette valeur indique la langue zulu de l'Afrique
... ...
MAXLENGTH=longueur Ce paramètre de balise permet d'indiquer la longueur maximal de caractères d'une entrée de données.
NAME=nom Ce paramètre de balise permet d'indiquer le nom d'un de l'entrée de données.
ONBLUR=action Ce paramètre de balise permet d'indiquer une action à effectuer lorsqu'on quitte cette balise
ONCHANGE=action Ce paramètre de balise permet d'indiquer une action à effectuer lorsqu'on modifie la valeur de cette balise
ONCLICK=action Ce paramètre de balise permet d'indiquer une action à effectuer lorsqu'on clique avec la souris sur cette balise
ONDBLCLICK=action Ce paramètre de balise permet d'indiquer une action à effectuer lorsqu'on double-clique avec la souris sur cette balise
ONFOCUS=action Ce paramètre de balise permet d'indiquer une action à effectuer lorsqu'on sélectionne cette balise
ONKEYDOWN=action Ce paramètre de balise permet d'indiquer une action à effectuer lorsqu'une touche du clavier est enfoncée
ONKEYPRESS=action Ce paramètre de balise permet d'indiquer une action à effectuer lorsqu'une touche du clavier est enfoncée puis relachée
ONKEYUP=action Ce paramètre de balise permet d'indiquer une action à effectuer lorsqu'une touche du clavier est relachée
ONMOUSEDOWN=action Ce paramètre de balise permet d'indiquer une action à effectuer lorsque le bouton de la souris est enfoncé au moment du passage sur cette balise
ONMOUSEMOVE=action Ce paramètre de balise permet d'indiquer une action à effectuer lorsque la souris déplace cette balise
ONMOUSEOUT=action Ce paramètre de balise permet d'indiquer une action à effectuer lorsque la souris quitte la zone de cette balise
ONMOUSEOVER=action Ce paramètre de balise permet d'indiquer une action à effectuer lorsque la souris passe sur cette balise
ONMOUSEUP=action Ce paramètre de balise permet d'indiquer une action à effectuer lorsque le bouton de la souris est relaché au moment du passage sur cette balise
PLACEHOLDER=texte Ce paramètre permet d'indiquer le message entrée automatiquement par la valeur de message dans le genre «Entrer votre message ici». Il n'est plus nécessaire d'utiliser les paramètres ONBLUR et ONFOCUS pour l'échange du message grâce à ce paramètre.
ONPROPERTYCHANGE=action Ce paramètre de balise permet d'indiquer une action à effectuer lorsque une propriété de la balise se modifie. Ce paramètre est seulement utilisé par Internet Explorer. Il était la seule alternative pour ajouter un événement d'un téléversement de fichier a eu lieu dans cette balise sous Internet Explorer 5 : «onpropertychange="if(event.propertyName=='value') {alert('Un téléversement a été effectué');}».
ONSELECT=action Ce paramètre de balise permet d'indiquer une action à effectuer lorsqu'on choisi cette balise
READONLY Ce paramètre de balise permet d'indiquer que la valeur n'est pas modifiable
REQUIRED Ce paramètre rendre obligatoire l'insertion d'une valeur avant de soumettre le formulaire. Il n'est donc plus nécessaire d'inclure du JavaScript pour effectuer une validation de champ vide.
SIZE=taille Ce paramètre de balise permet d'indiquer que la taille d'affichage de cette balise
SRC=source Ce paramètre de balise permet d'indiquer que la source graphique lorsque le type d'entrée est une image (type="image")>
STYLE=list Ce paramètre de balise permet d'indiquer des paramètres de feuille de style associé avec cette balise.
TABINDEX=position Ce paramètre de balise permet d'indiquer l'ordre de sélection des champs et éléments dans un formulaire.
TYPE=modeleentree Ce paramètre de balise permet d'indiquer le type d'entrée.
Constante Description
"BUTTON" Cette constante indique une entrée de données de bouton
"CHECKBOX" Cette constante indique une entrée de données d'une case à cocher
"FILE" Cette constante indique une entrée de données de fichier à télécharger
"HIDDEN" Cette constante indique une entrée de données caché
"IMAGE" Cette constante indique une entrée d'image
"PASSWORD" Cette constante indique une entrée de données d'un mot de passe
"RADIO" Cette constante indique une entrée de données de bouton radio
"RESET" Cette constante indique une entrée de réinitialisation de formulaire
"SUBMIT" Cette constante indique une entrée de données de bouton d'envoi de formulaire
"TEXT" Cette constante indique une entrée de données texte
USEMAP=carte Ce paramètre de balise permet d'indiquer le nom de l'ancre d'un élément de carte d'une image.
VALUE=valeur Ce paramètre de balise permet d'indiquer la valeur par défaut de l'entrée de données.

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

Exemples

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

  1. Votre nom : <input name="Name" value="" size="10"><br>
  2. Votre question : <input name="Question" value="" size="10"><br>
  3. Courriel : <input name="Email" value="" size="10"><br>
  4. <input type="submit" value="Envoyer"><br>

Voici le résultat affiché :

Votre nom :
Votre question :
Courriel :

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

  1. <table id="RadioButtonListA">
  2.      <tr>
  3.           <td><input id="RadioButtonListA_0" type="radio" name="RadioButtonListA" value="Item 1" /><label for="RadioButtonListA_0">Item 1</label></td>
  4.      </tr><tr>
  5.           <td><input id="RadioButtonListA_1" type="radio" name="RadioButtonListA" value="Item 2" /><label for="RadioButtonListA_1">Item 2</label></td>
  6.      </tr><tr>
  7.           <td><input id="RadioButtonListA_2" type="radio" name="RadioButtonListA" value="Item 3" /><label for="RadioButtonListA_2">Item 3</label></td>
  8.      </tr><tr>
  9.           <td><input id="RadioButtonListA_3" type="radio" name="RadioButtonListA" value="Item 4" /><label for="RadioButtonListA_3">Item 4</label></td>
  10.      </tr>
  11. </table>

on obtiendra le résultat semblable suivant :

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

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <body>
  4.     <form id="MonFormulaire">
  5.         <input type="image" name="ImageButton1" id="ImageButton1" title="Logo" src="http://www.gladir.com/IMAGES/logo.gif" />
  6.     </form>
  7. </body>
  8. </html>

on obtiendra le résultat semblable suivant :

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

  1. <input type="submit" class="btn" value="Envoyer">
  2. <style>
  3. button.btn, input.btn[type="submit"] {
  4.     background: url("http://www.gladir.com/IMAGES/logo.gif") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
  5.     height: 20px;
  6.     width: 20px;
  7.     text-indent: -9999px;
  8.     border: 0px;
  9.     cursor: pointer;
  10. }
  11. </style>

on obtiendra le résultat semblable suivant :

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

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <body>
  4.     <table id="MaListeCaseACocher">
  5.           <tr>
  6.                <td><input id="MaListeCaseACocher_0" type="checkbox" name="MaListeCaseACocher$0" value="Case à cocher 1" /><label for="MaListeCaseACocher_0">Case à cocher 1</label></td>
  7.           </tr><tr>
  8.                <td><input id="MaListeCaseACocher_1" type="checkbox" name="MaListeCaseACocher$1" value="Case à cocher 2" /><label for="MaListeCaseACocher_1">Case à cocher 2</label></td>
  9.           </tr><tr>
  10.                <td><input id="MaListeCaseACocher_2" type="checkbox" name="MaListeCaseACocher$2" value="Case à cocher 3" /><label for="MaListeCaseACocher_2">Case à cocher 3</label></td>
  11.           </tr><tr>
  12.                <td><input id="MaListeCaseACocher_3" type="checkbox" name="MaListeCaseACocher$3" value="Case à cocher 4" /><label for="MaListeCaseACocher_3">Case à cocher 4</label></td>
  13.           </tr><tr>
  14.                <td><input id="MaListeCaseACocher_4" type="checkbox" name="MaListeCaseACocher$4" value="Case à cocher 5" /><label for="MaListeCaseACocher_4">Case à cocher 5</label></td>
  15.           </tr>
  16.      </table>
  17. </body>
  18. </html>

on obtiendra le résultat semblable suivant :

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

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <body>
  4.     <form id="MonFormulaire">
  5.        <input type="file" name="fichierTeleverser" id="fichierTeleverser" />
  6.        <input type="submit" name="btnSubmit" value="Soumettre" id="btnSubmit" />
  7.     </form>
  8. </body>
  9. </html>

on obtiendra le résultat semblable suivant :

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

  1. <html>
  2. <head>
  3. <style>
  4. @keyframes pulse { 0%     {color: rgba(255,0,0,0.2);} 50%     {color: rgba(0,255,0,0.2);}}
  5. @-webkit-keyframes pulse { 0%     {color: rgba(255,0,0,0.2);} 50%     {color: rgba(0,255,0,0.2);}}
  6. @-moz-keyframes pulse { 0%     {color: rgba(255,0,0,0.2);} 50%     {color: rgba(0,255,0,0.2);}}
  7. @-o-keyframes pulse { 0%     {color: rgba(255,0,0,0.2);} 50%     {color: rgba(0,255,0,0.2);}}
  8.  
  9. .mesboutons:hover, .mesboutons:focus {
  10.  -moz-animation:pulse 1.5s infinite ease-in-out;
  11. -webkit-animation:pulse 1.5s infinite ease-in-out;
  12. -o-animation:pulse 1.5s infinite ease-in-out;
  13.  
  14. }
  15. </style>
  16. </head>
  17. <body>
  18. <input type="button" value="Bouton A" class="mesboutons" autofocus>
  19. <input type="button" value="Bouton B" class="mesboutons">
  20. </body>
  21. </html>

on obtiendra le résultat semblable suivant :

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

  1. <html>
  2. <body>
  3.      <form>
  4.           <input type="checkbox" name="heure_manuel" id="heure_manuel" value="1" onclick="document.getElementById('heure_manuel_heure').disabled = !this.checked;" /> Heure manuel
  5.           <input type="text" name="heure_manuel_heure" id="heure_manuel_heure" value="" size="5" disabled="disabled"  /> format hh:mm
  6.      </form>
  7. </body>
  8. </html>

on obtiendra le résultat semblable suivant :

Heure manuel format hh:mm

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

Dernière mise à jour : Samedi, le 20 juin 2015