L’ élément HTML input permet de saisir les informations des internautes.
La saisie peut se faire sous forme de cases à cocher, de zones de texte, de boutons radio,…
Il est utilisé avec l’élément form pour la création des formulaires, et la récupération des données.

<form>
<p><label for="radio-1">Rouge : </label><input id="radio-1" type="radio" name="choix" /></p>
<p><label for="radio-2">Jaune : </label><input id="radio-2" type="radio" name="choix" /></p>
<p><label for="radio-3">Orange : </label><input id="radio-3" type="radio" name="choix" /></p>
</form>

Attributs

Attribut : type

Détermine le type de la balise input :

  • text : champs texte (textbox).
  • password : champs de mot de passe.
  • radio : liste de déroulante.
  • checkbox : case à cocher.
  • button : bouton.
  • submit : bouton d’envoi du formulaire.
  • image : champ image, envoie le formulaire.

Exemple

HTML
<form>
  <p>
    <label for="name-7">Name : </label><input id="name-7" name="name-7" type="text" lang="en" />
  </p>
</form>


Attribut : tabindex

Permet de spécifier l’ordre de tabulation des éléments input, celui qui possède le plus petit chiffre sera tabulé en premier.

Exemple

HTML
<form>
  <p>
    <label for="surname">Nom : </label><input id="surname" name="surname" tabindex="1" type="text" />
  </p>
  <p>
    <label for="name">Prénom : </label><input id="name" name="name" tabindex="2" type="text" />
  </p>
</form>



Attribut : alt & src

alt et src sont utilisés pour les input de type image.

  • alt est utilisé qu’avec un élément input de type image, il permet de mettre un texte alternatif lors d’un problème de chargement de l’image.
  • src permet de spécifier l’adresse de l’image à afficher.

Exemple

HTML
<form>
  <p>
    <label for="image-2">Envoyer : </label><input id="image-2" name="image-2" type="image"  alt="Twitter" src="http://www.web-petit.com/wp-content/themes/wp-v2/images/twitter.png" />
  </p>
</form>


Attribut : checked

Permet de présélectionner un élément.

Exemple

HTML
<form>
  <p>
    <label for="radio-4">Rouge : </label><input id="radio-4" value="red" type="checkbox" />
  </p>
  <p>
    <label for="radio-4-1">Vert : </label><input id="radio-4-1" value="green" type="checkbox" />
  </p>
 <p>
    <label for="radio-4-2">Jaune : </label><input id="radio-4-2" value="yellow" type="checkbox" checked="checked" />
 </p>
</form>




Attribut : disabled

Permet de désactiver l’élément input.

Exemple

HTML
<form>
  <p>
    <label for="name-1">Nom : </label><input id="name-1" name="name-1" type="text" disabled="disabled" />
  </p>
</form>


Attribut : maxlength

Permet de spécifier la longuer maximale d’une chaîne de caractères dans un input de type text ou password.

Exemple

HTML
<form>
  <p>
    <label for="name-2">Nom : </label><input id="name-2" name="name-2" type="text" maxlength="5" />
  </p>
</form>


Attribut : value

Spécifie la valeur par défaut à afficher.

Exemple

HTML
<form>
  <p>
    <label for="name-3">Nom : </label><input id="name-3" name="name-3" type="text" value="Dupont" />
  </p>
</form>


Attribut : name

Spécifie le nom de l’élément input.

Exemple

HTML
<form>
  <p>
    <label for="name-4">Nom : </label><input id="name-4" name="name-4" type="text" />
  </p>
</form>


Attribut : class

Permet de spécifier la classe CSS à utiliser sur l’élément input.

Exemple

HTML
<form>
  <p>
    <label for="name-5">Nom : </label><input id="name-5" name="name-5" type="text" class="text-example" />
  </p>
</form>

.text-example {
  background:#faa;
  border:1px solid #48f;
}


Attribut : id

Permet de spécifier l’identifiant CSS à utiliser sur l’élément input.

Exemple

HTML
<form>
  <p>
    <label for="name-6">Nom : </label><input id="name-6" name="name-6" type="text" class="text-example" />
  </p>
</form>

#text-example {
  background:#afa;
  border:1px solid #f55;
}


Attribut : title

Permet de mettre une infobulle sur l’élément input.

Exemple

HTML
<form>
  <p>
    <label for="image">Envoyer : </label><input id="image" name="image" type="image"  alt="Twitter" title="Twitter" src="http://www.web-petit.com/wp-content/themes/wp-v2/images/twitter.png" />
  </p>
</form>


Attribut : dir

Permet de spécifier le sens d’écriture de l’élément input. Elle prend 2 valeurs :

  • ltr : Left To Right : de gauche à droite(valeur par défaut).
  • rtl : Right To Left : de droite à gauche.

Exemple

HTML
<form>
  <p>
    <label for="name-7-bis">Nom : </label><input id="name-7-bis" name="name-7-bis" type="text" dir="rtl" />
  </p>
</form>


Attribut : style

Permet d’appliquer un style au formulaire directement dans le html, sans avoir besoin d’une feuille de style.

Exemple

HTML
<form>
  <p>
    <label for="name-8">Nom : </label><input id="name-8" name="name-8" type="text" style="background:yellow;border:1px solid orange;" />
  </p>
</form>


Attribut : lang

Permet de spécifier la langue à l’intérieur de l’élément input.

Exemple

HTML
<form>
  <p>
    <label for="name-9">Name : </label><input id="name-9" name="name-9" type="text" lang="en" />
  </p>
</form>