Docs HTML exécutables : Types d'input

Q: Combien y a-t-il de types d'input en HTML ?

22 : button, checkbox, color, date, datetime-local, email, file, hidden, image, month, number, password, radio, range, reset, search, submit, tel, text, time, url et week. Un type inconnu ou absent se comporte comme text.

Q: Quel est le type d'input par défaut en HTML ?

text. Un sans type, ou avec un type que le navigateur ne connaît pas, est un champ de texte sur une seule ligne.

Q: Faut-il utiliser type="number" pour les numéros de téléphone ou les codes postaux ?

Non. number est fait pour les quantités : il ajoute des boutons d'incrément et refuse le +, les espaces et les traits d'union que contiennent les numéros de téléphone. Utilisez type="tel" pour les numéros de téléphone, et type="text" avec inputmode="numeric" pour les codes comme les codes postaux et les numéros de carte.

Q: Quel format utilise input type date ?

La valeur est toujours YYYY-MM-DD, comme 2026-09-24, quel que soit le format que le lecteur voit à l'écran. L'affichage suit la langue et la région du lecteur ; la valeur envoyée et lue en script, non.

Q: La balise input a-t-elle besoin d'une balise fermante ?

Non. est un élément vide : écrivez . Un fermant est invalide, et la barre oblique de est autorisée mais ne fait rien.

La balise input et ses types

<input> est un champ de formulaire, et son attribut type décide de quel genre. La même balise crée une zone de texte, un curseur, un sélecteur de date ou un sélecteur de couleur. Essayez chaque champ ci-dessous et appuyez sur Submit pour voir ce qu'envoie le formulaire :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Input types</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    label { display: grid; grid-template-columns: 90px auto; align-items: center; gap: 8px; margin-bottom: 8px; }
  </style>
</head>
<body>
  <form>
    <label>text <input type="text" name="text" value="Hello"></label>
    <label>email <input type="email" name="email" value="ada@example.com"></label>
    <label>password <input type="password" name="password" value="secret"></label>
    <label>number <input type="number" name="number" value="3" min="1" max="10"></label>
    <label>range <input type="range" name="range" min="0" max="100" value="40"></label>
    <label>date <input type="date" name="date" value="2026-09-24"></label>
    <label>color <input type="color" name="color" value="#2563eb"></label>
    <label>checkbox <input type="checkbox" name="checkbox" value="on" checked></label>
    <button type="submit">Submit</button>
  </form>
</body>
</html>

<input> est un élément vide, il n'a donc pas de balise fermante. Son name est la clé sous laquelle la valeur est envoyée, et value est la valeur de départ. Un type absent ou mal écrit donne un simple champ de texte.

Tous les types d'input HTML

`type`	Ce que c'est	Remarques
`text`	Une ligne de texte	Par défaut
`password`	Du texte affiché en points	Pas chiffré en soi ; envoyez-le en HTTPS
`email`	Une adresse e-mail	Valide le format ; touche `@` sur les claviers de téléphone
`url`	Une adresse web	Doit commencer par un schéma comme `https://`
`tel`	Un numéro de téléphone	Pavé téléphonique sur mobile, aucune vérification du format
`search`	Un champ de recherche	Affiche souvent un bouton d'effacement
`number`	Un nombre	Boutons d'incrément, `min`, `max`, `step`
`range`	Un curseur	Imprécis par nature ; la valeur est un nombre
`date`	Une date	La valeur est `YYYY-MM-DD`
`time`	Une heure de la journée	La valeur est `HH:MM` (sur 24 heures)
`datetime-local`	Date et heure, sans fuseau horaire	La valeur est `YYYY-MM-DDTHH:MM`
`month`	Une année et un mois	Pas pris en charge par tous les navigateurs
`week`	Une année et un numéro de semaine	Pas pris en charge par tous les navigateurs
`color`	Un sélecteur de couleur	La valeur est `#rrggbb` en minuscules
`checkbox`	Une case à cocher	Voir case à cocher HTML
`radio`	Un choix parmi un groupe	Voir bouton radio HTML
`file`	Un sélecteur de fichier	`accept`, `multiple`
`hidden`	Une valeur envoyée mais pas affichée	Pour les identifiants et les jetons
`submit`	Un bouton d'envoi	`<button type="submit">` est plus souple
`reset`	Un bouton de réinitialisation	Rarement une bonne idée
`button`	Un bouton qui ne fait rien tout seul	Pour le JavaScript
`image`	Un bouton d'envoi dessiné comme une image	Envoie aussi les coordonnées du clic

Les types texte et les claviers de téléphone

email, url, tel, search et text ressemblent tous à une zone de texte sur ordinateur. La différence tient à la validation et, sur téléphone, au clavier qui s'ouvre. Dans cet exemple, la bordure devient verte ou rouge selon le jugement du navigateur sur la valeur :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Text types</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    label { display: block; margin-bottom: 10px; }
    input { display: block; font: inherit; margin-top: 4px; padding: 4px 8px; border: 2px solid #9ca3af; border-radius: 6px; }
    input:valid { border-color: #16a34a; }
    input:invalid { border-color: #dc2626; }
  </style>
</head>
<body>
  <form>
    <label>email <input type="email" name="email" value="ada@example"></label>
    <label>url <input type="url" name="site" value="example.com"></label>
    <label>tel <input type="tel" name="phone" value="+1 555 0100"></label>
    <label>text with inputmode="numeric" <input type="text" name="zip" inputmode="numeric" pattern="[0-9]{5}" value="02134"></label>
    <button type="submit">Submit</button>
  </form>
</body>
</html>

ada@example est un e-mail valide pour le navigateur : il vérifie seulement la présence de texte, d'un @ et d'un domaine, pas que le domaine contienne un point. La vraie vérification se fait sur le serveur.
example.com n'est pas une url valide, car il n'a pas de schéma. https://example.com l'est.
tel accepte tout. Les formats de téléphone varient trop d'un pays à l'autre, il n'y a donc pas de vérification intégrée ; ajoutez un pattern si vous en avez besoin.
inputmode="numeric" demande aux téléphones un clavier numérique sans les inconvénients de type="number", c'est pourquoi c'est le bon choix pour les codes postaux, les codes à usage unique et les numéros de carte.

number et range

Les deux acceptent min, max et step. number sert aux valeurs exactes ; range est un curseur pour des valeurs où le nombre exact compte moins. Un curseur range n'affiche aucun nombre, alors associez-le à un <output> :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>number and range</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    label { display: block; margin-bottom: 12px; }
  </style>
</head>
<body>
  <form>
    <label>Tickets
      <input type="number" name="tickets" min="1" max="8" step="1" value="2">
    </label>
    <label>Price per kg
      <input type="number" name="price" min="0" step="0.01" value="4.99">
    </label>
    <label>Volume
      <input type="range" name="volume" id="volume" min="0" max="100" step="5" value="60">
      <output for="volume" id="shown">60</output>
    </label>
    <button type="submit">Submit</button>
  </form>

  <script>
    const volume = document.querySelector('#volume');
    volume.addEventListener('input', () => {
      document.querySelector('#shown').textContent = volume.value;
    });
  </script>
</body>
</html>

step vaut 1 par défaut pour number, donc un champ de prix sans step="0.01" refuse 4.99 à l'envoi du formulaire. En JavaScript, input.value est toujours une chaîne ; utilisez input.valueAsNumber pour obtenir un nombre.

Dates et heures

Les types de date et d'heure ouvrent le sélecteur propre au navigateur. Ce que voit le lecteur suit sa langue et sa région (09/24/2026, 24.09.2026), mais la valeur a toujours le même format fixe :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Date and time</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    label { display: block; margin-bottom: 10px; }
    code { background: #e5e7eb; padding: 2px 6px; }
  </style>
</head>
<body>
  <form>
    <label>date <input type="date" name="date" value="2026-09-24" min="2026-01-01"></label>
    <label>time <input type="time" name="time" value="14:30"></label>
    <label>datetime-local <input type="datetime-local" name="when" value="2026-09-24T14:30"></label>
  </form>
  <p>Values: <code id="out"></code></p>

  <script>
    const form = document.querySelector('form');
    const show = () => {
      document.querySelector('#out').textContent =
        [...form.elements].map((f) => f.value).join('  |  ');
    };
    form.addEventListener('input', show);
    show();
  </script>
</body>
</html>

Ce format fixe est ce que reçoit le serveur et ce que lit le JavaScript, donc vous n'avez jamais à analyser « 24.09.2026 ». min et max prennent le même format. datetime-local n'a pas de fuseau horaire : si c'est important, convertissez sur le serveur avec le fuseau du lecteur.

color et file

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>color and file</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    label { display: block; margin-bottom: 12px; }
    #swatch { display: inline-block; width: 60px; height: 24px; border-radius: 4px; vertical-align: middle; }
  </style>
</head>
<body>
  <form>
    <label>Theme color <input type="color" name="color" id="color" value="#16a34a"></label>
    <p>Preview: <span id="swatch"></span></p>
    <label>Photos <input type="file" name="photos" accept="image/*" multiple></label>
    <button type="submit">Submit</button>
  </form>

  <script>
    const color = document.querySelector('#color');
    const paint = () => { document.querySelector('#swatch').style.background = color.value; };
    color.addEventListener('input', paint);
    paint();
  </script>
</body>
</html>

accept="image/*" limite le sélecteur de fichiers aux images (et propose l'appareil photo sur téléphone) ; il accepte aussi des extensions, comme accept=".pdf,.docx". Ce n'est qu'une indication pour le sélecteur, donc vérifiez le type de fichier sur le serveur. multiple autorise plusieurs fichiers. Un vrai envoi de fichier demande aussi method="post" et enctype="multipart/form-data" sur le formulaire.

Des suggestions avec datalist

Un <datalist> donne à un champ de texte une liste de suggestions tout en autorisant n'importe quelle valeur. Reliez-les avec l'attribut list :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>datalist</title>
</head>
<body>
  <form>
    <label>Language
      <input name="language" list="languages" placeholder="Start typing">
    </label>
    <datalist id="languages">
      <option value="JavaScript"></option>
      <option value="Python"></option>
      <option value="Java"></option>
      <option value="Rust"></option>
    </datalist>
    <button type="submit">Submit</button>
  </form>
</body>
</html>

Tapez « ja » dans le champ pour voir les suggestions correspondantes. Contrairement à une liste déroulante select, le lecteur peut taper une valeur absente de la liste.

Les attributs des inputs

Attribut	Rôle
`name`	La clé sous laquelle la valeur est envoyée
`value`	La valeur de départ
`placeholder`	Une indication affichée tant que le champ est vide (pas un label)
`required`	Doit être rempli avant l'envoi
`disabled`	Inutilisable, et pas envoyé
`readonly`	Non modifiable, mais envoyé
`autocomplete`	Ce qu'il faut remplir automatiquement : `email`, `name`, `current-password`, `one-time-code`, `off`
`min`, `max`, `step`	Limites pour les nombres, curseurs, dates et heures
`minlength`, `maxlength`	Limites de longueur pour les types texte
`pattern`	Une expression régulière à laquelle toute la valeur doit correspondre
`inputmode`	Le clavier de téléphone à afficher : `numeric`, `decimal`, `email`, `tel`, `url`
`list`	L'`id` d'un `<datalist>`
`multiple`	Plusieurs valeurs, pour `email` et `file`
`accept`	Les types de fichiers pour `file`

Erreurs fréquentes

type="number" pour les numéros de téléphone, codes postaux ou numéros de carte. Ce ne sont pas des quantités. Utilisez tel ou text avec inputmode="numeric".
Un champ de prix sans step="0.01". Les valeurs décimales échouent à la validation.
Utiliser placeholder comme label. Il disparaît dès que le lecteur tape.
Compter sur accept ou type="email" pour la sécurité. Ce sont des commodités ; le serveur revérifie.
type="month" ou type="week" sans solution de repli. Certains navigateurs affichent un simple champ de texte.
Une balise fermante </input>. <input> est vide.

Questions fréquentes

Combien y a-t-il de types d'input en HTML ?

22 : button, checkbox, color, date, datetime-local, email, file, hidden, image, month, number, password, radio, range, reset, search, submit, tel, text, time, url et week. Un type inconnu ou absent se comporte comme text.

Quel est le type d'input par défaut en HTML ?

text. Un <input> sans type, ou avec un type que le navigateur ne connaît pas, est un champ de texte sur une seule ligne.

Faut-il utiliser type="number" pour les numéros de téléphone ou les codes postaux ?

Non. number est fait pour les quantités : il ajoute des boutons d'incrément et refuse le +, les espaces et les traits d'union que contiennent les numéros de téléphone. Utilisez type="tel" pour les numéros de téléphone, et type="text" avec inputmode="numeric" pour les codes comme les codes postaux et les numéros de carte.

Quel format utilise input type date ?

La valeur est toujours YYYY-MM-DD, comme 2026-09-24, quel que soit le format que le lecteur voit à l'écran. L'affichage suit la langue et la région du lecteur ; la valeur envoyée et lue en script, non.

La balise input a-t-elle besoin d'une balise fermante ?

Non. <input> est un élément vide : écrivez <input type="text" name="city">. Un </input> fermant est invalide, et la barre oblique de <input /> est autorisée mais ne fait rien.

Concepts liés