HTML — La balise <input> : champ de saisie interactif

Qu'est-ce que la balise <input> en HTML ?

Chaque fois que vous tapez votre mot de passe, cochez une case ou cliquez sur "Envoyer", vous utilisez un élément <input>. C'est probablement la balise HTML la plus répandue dans les formulaires web.

Elle se place dans un <form> et joue le rôle de contrôle de saisie. Sa particularité : une seule et même balise peut devenir un champ texte, un bouton, une case à cocher ou un sélecteur de couleur. Tout dépend de l'attribut type qu'on lui donne.

Dans cet article, vous trouverez les types les plus courants, les attributs à connaître et des exemples progressifs pensés pour les débutants, mis à jour pour 2026.

Les types de champs <input> les plus utilisés

Sans attribut type, le navigateur affiche un simple champ texte. Dès qu'on le précise, le comportement change du tout au tout. Voici les types que vous croiserez dans la quasi-totalité des projets :

• text : saisie libre, pour un nom, une ville, une recherche.
• password : même chose, mais les caractères apparaissent masqués.
• email : le navigateur vérifie lui-même que la valeur ressemble à une adresse mail.
• number : n'accepte que des chiffres, avec des petites flèches pour incrémenter.
• checkbox : case à cocher, plusieurs sélections possibles en même temps.
• radio : bouton rond, un seul choix possible dans un groupe.
• submit : le bouton qui déclenche l'envoi du formulaire.
• file : ouvre le gestionnaire de fichiers pour importer un document ou une image.
• date : le navigateur affiche son propre calendrier.
• color : ouvre un sélecteur de couleur visuel.
• range : un curseur à faire glisser pour choisir une valeur dans un intervalle.
• hidden : champ invisible, pratique pour transmettre des données techniques sans les montrer.

Autre particularité : <input> est un élément vide. Pas de balise fermante, pas de contenu à l'intérieur. Tout se configure via les attributs.

Exemple 1 — Un formulaire de contact simple

Deux champs texte et un bouton. C'est la structure minimale de tout formulaire HTML, et c'est déjà fonctionnel.

<form action="traitement.php" method="post">
  <!-- Le "for" du label doit correspondre à l'"id" du champ -->
  <label for="nom">Nom :</label>
  <input type="text" id="nom" name="nom" placeholder="Votre nom"><br>

  <label for="prenom">Prénom :</label>
  <input type="text" id="prenom" name="prenom" placeholder="Votre prénom"><br>

  <!-- Ce bouton envoie toutes les données du formulaire -->
  <input type="submit" value="Envoyer">
</form>

Le lien entre <label> et <input> se fait via for et id : quand ils portent la même valeur, cliquer sur le libellé active directement le champ. C'est un réflexe d'accessibilité à prendre dès le début.

Exemple 2 — Formulaire d'inscription avec types variés

Voici quelque chose de plus concret : un formulaire qui combine e-mail, mot de passe, boutons radio et case à cocher. Ce type de structure se retrouve dans presque tous les formulaires d'inscription.

<form action="inscription.php" method="post">

  <!-- type="email" : le navigateur vérifie le format sans JavaScript -->
  <label for="email">Adresse e-mail :</label>
  <input type="email" id="email" name="email" required placeholder="exemple@domaine.com"><br>

  <!-- type="password" : les caractères tapés restent masqués -->
  <label for="mdp">Mot de passe :</label>
  <input type="password" id="mdp" name="mdp" minlength="8" required><br>

  <!-- Même attribut "name" = même groupe : un seul choix possible -->
  <p>Genre :</p>
  <input type="radio" id="homme" name="genre" value="homme">
  <label for="homme">Homme</label>
  <input type="radio" id="femme" name="genre" value="femme">
  <label for="femme">Femme</label><br>

  <!-- required sur une checkbox = doit être cochée pour valider -->
  <input type="checkbox" id="cgu" name="cgu" required>
  <label for="cgu">J'accepte les conditions d'utilisation</label><br>

  <input type="submit" value="Créer mon compte">
</form>

L'attribut required bloque l'envoi si le champ est vide — le navigateur affiche lui-même un message d'erreur. Pas besoin de JavaScript pour cette vérification de base.

Exemple 3 — Champs spéciaux HTML5 : date, couleur et curseur

Ces trois types délèguent entièrement l'interface au navigateur. Sur mobile, ils s'adaptent automatiquement : le clavier numérique s'ouvre pour un champ nombre, le sélecteur de date natif apparaît sur iOS ou Android. Zéro JavaScript nécessaire.

<form>
  <!-- Calendrier natif : format renvoyé au serveur = AAAA-MM-JJ -->
  <label for="naissance">Date de naissance :</label>
  <input type="date" id="naissance" name="naissance"><br>

  <!-- value="#3498db" : couleur affichée par défaut à l'ouverture -->
  <label for="couleur">Couleur préférée :</label>
  <input type="color" id="couleur" name="couleur" value="#3498db"><br>

  <!-- step="5" : le curseur ne peut s'arrêter qu'à 0, 5, 10, 15… -->
  <label for="satisfaction">Satisfaction (0-100) :</label>
  <input type="range" id="satisfaction" name="satisfaction" min="0" max="100" step="5"><br>

  <input type="submit" value="Valider">
</form>

Compatibilité navigateur

La balise <input> fonctionne partout. Les types HTML5 (color, date, range…) sont supportés par Chrome, Firefox, Safari, Edge et Opera. Sur un vieux navigateur qui ne les reconnaît pas, le champ se transforme en simple texte — l'utilisateur peut quand même saisir quelque chose.

Astuces et bonnes pratiques

À retenir : <input> est une balise vide — pas de balise fermante, rien à l'intérieur. En XHTML, la syntaxe auto-fermante est obligatoire : <input type="text" />.

Bonne pratique : Reliez toujours un <label> à chaque <input> avec for et id. Sans ça, les lecteurs d'écran ne peuvent pas identifier le champ, et votre formulaire devient inutilisable pour une partie de vos visiteurs.

Conseil 2026 : Exploitez la validation HTML native avant de sortir JavaScript. Les attributs required, minlength, pattern et type="email" couvrent la plupart des cas courants, fonctionnent sur tous les appareils et ne ralentissent pas la page.

Évolution de la balise <input> : HTML4 vs HTML5

En HTML 4.01, l'attribut align servait à positionner les champs de type image. Il n'existe plus en HTML5 — c'est le CSS qui gère le positionnement.

HTML5 a transformé <input> en profondeur : de nouveaux types (email, url, date, color, range, tel…) et de nouveaux attributs (placeholder, required, autofocus, pattern, min, max…) ont rendu les formulaires beaucoup plus capables sans écrire une ligne de JavaScript supplémentaire.

Tableau complet des attributs de la balise <input>

Tous les attributs reconnus par <input> sont listés ci-dessous. Le badge Nouveau signale les attributs apparus avec HTML5.

Attributs globaux

Comme toutes les balises HTML, <input> accepte les attributs globaux : id, class, style, tabindex, et les attributs aria-* pour l'accessibilité.

Attributs d'événement

<input> réagit à tous les événements HTML. Les plus utilisés avec les champs de formulaire sont oninput (déclenché à chaque frappe), onchange (déclenché quand la valeur change et que le champ perd le focus) et onfocus (quand l'utilisateur clique dans le champ).

Pages connexes :

Tutoriel HTML : formulaires HTML

Tutoriel PHP : traitement des formulaires en PHP

Par carabde | Mis à jour le 2 avril 2026