HTML — L'attribut type de la balise input

L'attribut type de la balise input

L'attribut type dit au navigateur quel genre de champ afficher : une case à cocher, un sélecteur de date, un champ de mot de passe ou simplement une ligne de texte. Sans lui, le navigateur affiche un champ texte par défaut — ce qui fonctionne, mais ne tire pas parti des fonctionnalités natives des navigateurs modernes.

En 2026, tous les navigateurs courants (Chrome, Firefox, Edge, Safari) prennent en charge l'essentiel des types introduits avec HTML5. L'attribut type n'est pas obligatoire, mais précisez-le toujours : il améliore l'accessibilité, déclenche le bon clavier sur mobile et active la validation native du formulaire.

Syntaxe

<input type="valeur">

Exemple de base — text et submit

Un formulaire minimal avec un champ texte et un bouton d'envoi.

<form action="traitement.php">
  Nom : <input type="text" name="nom"><br><br>
  <input type="submit" value="Envoyer">
</form>

Compatibilité navigateurs en 2026

L'attribut type fonctionne dans tous les navigateurs modernes. Les types comme date, color ou range sont supportés nativement dans Chrome, Firefox, Edge et Safari depuis plusieurs années. Internet Explorer est sorti du marché — sa compatibilité n'est plus un critère à considérer.

Sur mobile, des types comme email, tel ou url déclenchent automatiquement le clavier adapté. C'est une raison de plus pour toujours spécifier le bon type.

Tableau des valeurs disponibles

Type button

Le type button crée un bouton cliquable qui ne soumet pas le formulaire. On l'associe à un gestionnaire JavaScript pour déclencher une action personnalisée.

<script>
  function afficherMessage() {
    alert("Bonjour !");
  }
</script>
<form>
  <input type="button" value="Cliquez ici" onclick="afficherMessage()">
</form>

Type checkbox

Les cases à cocher permettent de sélectionner plusieurs options en même temps. Chaque case fonctionne indépendamment — cocher l'une ne décoche pas les autres.

<form>
  <input type="checkbox" name="transport" value="velo"> J'ai un vélo<br>
  <input type="checkbox" name="transport" value="voiture"> J'ai une voiture<br>
  <input type="checkbox" name="transport" value="aucun"> Aucun moyen personnel<br>
</form>

Type color

Le type color ouvre le sélecteur de couleurs natif du navigateur. La valeur renvoyée est toujours un code hexadécimal (ex. #ff5500).

<form>
  Couleur favorite : <input type="color" name="couleur" value="#3498db">
</form>

Type date

Le type date affiche un calendrier pour choisir une date (année, mois, jour). La valeur transmise suit le format ISO YYYY-MM-DD. Bornez la plage avec min et max.

<form>
  Date de naissance : <input type="date" name="naissance" min="1900-01-01" max="2026-12-31">
</form>

Type datetime-local

Le type datetime-local combine date et heure dans un seul champ, sans tenir compte du fuseau horaire. C'est le type à utiliser pour des réservations ou des rappels. Le type datetime (avec fuseau UTC) a été retiré de la spécification HTML — datetime-local est son successeur recommandé.

<form>
  Date et heure du rendez-vous : <input type="datetime-local" name="rdv">
</form>

Type email

Le type email vérifie automatiquement que la valeur saisie ressemble à une adresse email (présence d'un @ et d'un domaine) avant de soumettre le formulaire. Sur iOS et Android, il déclenche un clavier adapté avec la touche @ accessible directement.

<form>
  Adresse email : <input type="email" name="email" placeholder="vous@exemple.com">
  <input type="submit" value="Envoyer">
</form>

 Astuce : La validation native du navigateur ne remplace pas une vérification côté serveur. Toujours valider les données reçues en PHP ou dans votre backend.

Type file

Le type file affiche un bouton « Parcourir » qui ouvre l'explorateur de fichiers. Pour permettre l'envoi du fichier au serveur, ajoutez enctype="multipart/form-data" sur la balise form.

<form enctype="multipart/form-data">
  Sélectionner un fichier : <input type="file" name="fichier" accept=".pdf,.jpg,.png">
  <input type="submit" value="Envoyer">
</form>

Type hidden

Un champ hidden est invisible dans la page mais sa valeur est bien transmise au serveur lors de l'envoi. On l'utilise pour transporter des données contextuelles — un identifiant de session, un token CSRF ou l'ID d'un enregistrement à modifier.

<form action="modifier.php">
  <input type="hidden" name="user_id" value="42">
  <input type="submit" value="Confirmer">
</form>

Type image

Le type image fonctionne comme submit, mais affiche une image à la place du bouton. Les coordonnées du clic (x, y) sont aussi transmises au serveur.

<form action="traitement.php">
  <input type="image" src="images/bouton-envoyer.png" alt="Envoyer le formulaire">
</form>

Type month

Le type month permet de sélectionner un mois et une année, sans préciser le jour. La valeur transmise suit le format YYYY-MM. Utile pour des abonnements ou des périodes de facturation.

<form>
  Mois de naissance : <input type="month" name="mois_naissance">
</form>

Type number

Le type number affiche un champ numérique avec des flèches d'incrément. Les attributs min, max et step définissent les valeurs acceptées. Le navigateur bloque automatiquement les saisies hors plage.

<form>
  Quantité (1 à 10) : <input type="number" name="quantite" min="1" max="10" value="1">
  <input type="submit" value="Ajouter au panier">
</form>

Attributs disponibles pour restreindre les valeurs :

max — valeur maximale autorisée

min — valeur minimale autorisée

step — intervalle entre chaque valeur acceptée

value — valeur affichée par défaut

Type password

Le type password masque automatiquement les caractères saisis. Les navigateurs modernes proposent souvent un œil pour afficher temporairement le mot de passe saisi.

<form>
  Mot de passe : <input type="password" name="mdp" minlength="8">
  <input type="submit" value="Connexion">
</form>

Type radio

Les boutons radio fonctionnent en groupe : ils partagent le même attribut name, et un seul peut être sélectionné à la fois. Différence clé avec les checkboxes : cocher un bouton radio désélectionne automatiquement les autres du groupe.

<form>
  <input type="radio" name="genre" value="homme"> Homme<br>
  <input type="radio" name="genre" value="femme"> Femme<br>
  <input type="radio" name="genre" value="autre"> Autre<br>
</form>

Type range

Le type range affiche un curseur glissant (slider). Il convient quand la valeur exacte n'a pas d'importance — une jauge de volume, un niveau de satisfaction ou un filtre de prix approximatif.

<form>
  Volume : <input type="range" name="volume" min="0" max="100" step="5" value="50">
</form>

Attributs disponibles :

max — valeur maximale

min — valeur minimale

step — pas entre chaque position du curseur

value — position initiale du curseur

Type reset

Le bouton reset remet toutes les valeurs du formulaire à leur état initial. À utiliser avec parcimonie : un clic accidentel efface tout ce que l'utilisateur a saisi.

<form>
  Email : <input type="email" name="email"><br>
  Code PIN : <input type="text" name="pin" maxlength="4"><br><br>
  <input type="reset" value="Effacer">  
  <input type="submit" value="Envoyer">
</form>

Type search

Le type search ressemble visuellement à un champ texte, mais certains navigateurs lui ajoutent une croix pour effacer la saisie. Sur iOS, le clavier affiche une touche « Rechercher ». Côté serveur, il se traite exactement comme un champ text.

<form action="resultats.php">
  Recherche : <input type="search" name="q" placeholder="Mot-clé...">
  <input type="submit" value="Chercher">
</form>

Type submit

Le type submit est le bouton d'envoi classique. Quand l'utilisateur clique dessus, le formulaire est soumis à l'URL définie dans l'attribut action.

<form action="traitement.php">
  Nom : <input type="text" name="nom">
  <input type="submit" value="Envoyer">
</form>

Type tel

Le type tel ne valide pas le format du numéro (les formats varient trop selon les pays), mais il déclenche le pavé numérique sur mobile. Pour une validation réelle, utilisez l'attribut pattern avec une expression régulière.

<form>
  Téléphone : <input type="tel" name="telephone" placeholder="06 00 00 00 00">
  <input type="submit" value="Envoyer">
</form>

Type text

Le type text est la valeur par défaut de la balise input. Il affiche un champ de saisie monoligne acceptant n'importe quel caractère. La largeur par défaut est de 20 caractères, ajustable en CSS.

<form>
  Prénom : <input type="text" name="prenom"><br>
  Nom : <input type="text" name="nom"><br>
  <input type="submit" value="Envoyer">
</form>

Type time

Le type time affiche un champ heure au format HH:MM. La valeur est transmise sans fuseau horaire — c'est l'heure locale de l'utilisateur. Les attributs min et max permettent de restreindre la plage horaire.

<form>
  Heure du rendez-vous : <input type="time" name="heure" min="08:00" max="18:00">
  <input type="submit" value="Réserver">
</form>

Type url

Le type url vérifie que la valeur commence bien par https:// ou un autre protocole valide avant d'autoriser l'envoi. Sur iPhone et iPad, le clavier affiche directement .com et / pour accélérer la saisie.

<form>
  Votre site web : <input type="url" name="site" placeholder="https://exemple.com"><br><br>
  <input type="submit" value="Envoyer">
</form>
<p>Saisissez une adresse incorrecte et cliquez sur Envoyer pour voir la validation en action.</p>

Type week

Le type week permet de choisir une semaine dans l'année. La valeur transmise suit le format ISO YYYY-W## (ex. 2026-W23). Pratique pour des plannings ou des formulaires de congés.

<form>
  Choisir une semaine : <input type="week" name="semaine"><br><br>
  <input type="submit" value="Valider">
</form>

Par carabde | 10 mars 2014 | Mis à jour le 2 juin 2026