Accueil    HTML    Balise INPUT : champs de formulaire
 



balise input  Balise INPUT : champs de formulaire

«  Partie précédente  |  Index  |  Partie suivante  »


  • Tag de fermeture facultatif (.../> en xhtml) | Support :
  • Google Chrome
  • Firefox
  • Internet Explorer
  • Opera
  • Safari



La balise <input> fait partie des éléments permettant à un utilisateur d'effectuer des saisies de données pouvant être échangées avec le serveur.
C'est l'un des différents contrôles utilisables au sein d'un formulaire <form> pour rapatrier des informations (au même titre que les balises button, textarea et select).

C'est également le tag le plus complet et incontournable car il propose un nombre importants de types différents, allant de la saisie de texte à la validation ou au reset de formulaire en passant par l'affichage de cases à cocher ou de boutons radio.



Propriétés pour la balise input :




Propriétés Définition Valeurs
accept indique pour un élément input de type "file" quels tsont les fichiers acceptés pour le transfert Type MIME
align Spécifie l'alignement du champ par rapport à son conteneur
déprécié, appliquer les styles CSS pour un rendu similaire
bottom
left
middle
right
top
alt Spécifie un texte alternatif, uniquement pour le type "image" Texte
checked Indique au chargemnt de la page si les balises <input> de type "checkbox" ou "radio" doivent être cochés ou non checked
disabled Rend le champ input inactif, il est alors non saisissable disabled
maxlength Détermine le nombre maximum de caractères saisissables dans une balise <input>
readonly Indique que le champ input doit être affiché en lecture seule readonly
size Largeur de la balise <input> sur la base du nombre de caractère spécifié Nombre
src Indique uniquement pour un champ input de type "image" la source de celle-ci URL
type Les différents types d'éléments existant pour la balise <input> button
checkbox
file
hidden
image
password
radio
reset
submit
text
value Valeur affichée dans la balise <input> Texte


Exemple d'utilisation de la balise input :




Rendu des principaux types de la balise input
» type button
<input type="button" value="Clic !" />
<input type="button" value="Clic !" style="color:red; font-weight:bold; padding:5px 10px;" />
<input type="button" value="Clic !" style="cursor:pointer; padding:5px 20px; background-color:lightsteelblue; border:dotted 2px grey; border-radius:5px;" />
<input type="button" value="Clic !" style="width:100px; height:100px; border:solid 1px black; border-radius:51px;" />
» type checkbox
<input type="checkbox" value="valeur" />
<input type="checkbox" id="IdCheckBox" value="valeur" />
<label for="IdCheckBox">Texte CheckBox</label>
<input type="checkbox" id="chkbox1" value="oui" />
<label for="chkbox1">oui</label>

<input type="checkbox" id="chkbox2" value="non" />
<label for="chkbox2">non</label>

<input type="checkbox" id="chkbox3" value="la réponse D" />
<label for="chkbox3">la réponse D</label>


» type color type html5
<input type="color" />
<input type="color" value="#dedede" />
<input type="color" value="#3377aa" onchange="document.getElementById('selColor').innerHTML = this.value;" />
<span id="selColor">Couleur : #3377aa</span>

Couleur : #3377aa
» type date type html5
<input type="date" />
<input type="date" value="2012-12-25" />
<input type="date" min="2012-12-01" max="2012-12-31" />
<input type="date" value="2012-12-25" style="padding:5px; border:solid 1px black; color:steelblue; border-radius:5px;" />
» type file
<input type="file" style="width:200px; font-size:10px;" />
<input type="file" style="width:200px; font-size:10px; color:red;" />
» type image
<input type="image" src="exemple.png" style="height:80px;" />
<input type="image" src="exemple.png" style="height:80px; border:solid 1px silver; border-radius:10px;" />
<input type="image" src="exemple.png" style="margin:10px; height:80px; border-radius:10px; box-shadow:0 0 15px 2px;" />
» type number type html5
<input type="number" />
<input type="number" min="0" max="10" value="100" step="5" onkeypress="return false;" />
» type password
<input type="password" value="password" />
<input type="password" value="password" style="border:solid 1px black; border-radius:5px; text-align:center;" />
<input type="password" value="password" style="border:solid 1px black; border-radius:5px; text-align:center; box-shadow:0 0 6px;" />
» type radio
<input id="rad1" name="radGroupe" type="radio" value="oui" />
<label for="rad1">oui</label>

<input id="rad2" name="radGroupe" type="radio" value="non" />
<label for="rad2">non</label>

<input id="rad3" name="radGroupe" type="radio" value="la réponse D" />
<label for="rad3">la réponse D</label>


» type range type html5
<input type="range" />
<input type="range" min="0" max="100" step="5" value="0" />
<span id="selRange">0</span>

0
» type text
<input type="text" value="Exemple" />
<input type="text" placeholder="Saisie libre" />
<input type="text" value="Exemple" style="border:solid 1px black; border-radius:5px; text-align:center; box-shadow:0 0 6px;" />
<input type="text" value="Exemple" style="border:solid 1px steelblue; text-transform:uppercase; font-weight:bold; color:steelblue;" />