logo oujood
🔍

  Attributs min et max de la balise input HTML5

Apprenez à contrôler et valider les saisies utilisateur avec les attributs min et max : plages numériques, restrictions de dates, compatibilité navigateurs et bonnes pratiques de validation côté client.

OUJOOD.COM

Définition et utilisation de l'attribut min

LES ATTRIBUTS HTML5

L'attribut min spécifie la valeur minimale autorisée pour le champ <input>. Utilisé conjointement avec la validation native HTML5, il empêche l'utilisateur de saisir ou sélectionner une valeur inférieure au seuil défini, sans nécessiter de JavaScript. C'est un mécanisme fondamental de validation de formulaire côté client pour améliorer l'expérience utilisateur et réduire les erreurs de saisie.

Définition et utilisation de l'attribut max

L'attribut max spécifie la valeur maximale autorisée pour un champ <input>. Il définit le plafond de saisie pour les champs numériques, de dates ou temporels, garantissant que les données transmises au serveur respectent un format attendu. Combiné à min, il crée une plage de valeurs valides directement dans le balisage HTML.

Syntaxe

<input min="nombre|date">
<input max="nombre|date">

Astuce Astuce : Utilisez simultanément min et max pour définir une plage de valeurs autorisées précise. Par exemple, min="1" max="100" limitera la saisie entre 1 et 100 inclus. Cette technique de contrainte de saisie HTML natif est plus fiable que de compter uniquement sur JavaScript.

Important : Les attributs min et max sont compatibles avec les types input suivants : number, range, date, datetime-local, month, time et week. Ils n'ont aucun effet sur les types text, email, password, etc.

Types d'input compatibles avec min et max

Voici un tableau récapitulatif des types d'entrée HTML5 supportant les attributs min et max avec le format de valeur attendu :

Type d'inputFormat min/maxExemple
numberEntier ou décimalmin="0" max="100"
rangeEntier ou décimalmin="0" max="10"
dateAAAA-MM-JJmin="2020-01-01"
datetime-localAAAA-MM-JJTHH:MMmax="2026-12-31T23:59"
monthAAAA-MMmin="2024-01"
timeHH:MMmin="08:00" max="18:00"
weekAAAA-W##min="2026-W01"

Exemple 1 : Restriction de dates et plage numérique avec min et max

Cet exemple illustre l'usage classique des attributs min et max pour restreindre la saisie de dates dans un formulaire HTML5. Le navigateur affiche un sélecteur de date en bloquant les valeurs hors plage, offrant une validation native sans JavaScript.

  📋 Copier le code

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <title>Attributs min et max HTML5</title>
</head>
<body>
  <form action="page-cible.php">
    <!-- Restreint la sélection aux dates antérieures au 01/01/1980 -->
    <label>Date avant 1980 :
      <input type="date" name="date_ancienne" max="1979-12-31">
    </label>
    <!-- Autorise uniquement les dates à partir du 01/01/2000 -->
    <label>Date après 2000 :
      <input type="date" name="date_moderne" min="2000-01-01">
    </label>
    <!-- Plage numérique stricte : seules les valeurs entre 1 et 5 sont valides -->
    <label>Quantité (1 à 5) :
      <input type="number" name="quantite" min="1" max="5" value="1">
    </label>
    <input type="submit" value="Envoyer">
  </form>
</body>
</html>

Exemple 2 : Curseur de volume avec input type="range" et min/max

Le type range est idéal pour créer des curseurs interactifs. Associé à min et max, il permet de définir précisément l'étendue du contrôle sans aucun code supplémentaire. L'attribut step complète le dispositif pour contrôler le pas de progression.

  📋 Copier le code

<form>
  <!-- Curseur de volume : valeurs entre 0 et 100, par pas de 5 -->
  <label for="volume">Volume (0-100) :</label>
  <input type="range" id="volume" name="volume"
         min="0" max="100" step="5" value="50">
  <!-- Affichage dynamique de la valeur sélectionnée -->
  <output for="volume" id="vol-affichage">50</output>
  <script>
    // Met à jour l'affichage en temps réel lors du déplacement du curseur
    document.getElementById('volume').addEventListener('input', function() {
      document.getElementById('vol-affichage').value = this.value;
    });
  </script>
</form>

Exemple 3 : Réservation avec plage horaire (input type="time")

Cet exemple montre comment limiter la sélection d'horaire aux heures d'ouverture d'un service, une technique courante dans les formulaires de réservation en ligne. La validation HTML5 native avec min et max sur input time évite les réservations hors plage sans développement JavaScript complexe.

  📋 Copier le code

<form action="reservation.php">
  <!-- Réservation uniquement entre 9h et 18h (heures ouvrées) -->
  <label for="heure">Heure de rendez-vous :</label>
  <input type="time" id="heure" name="heure_rdv"
         min="09:00" max="18:00" required>
  <!-- L'attribut required force la saisie avant soumission -->
  <input type="submit" value="Confirmer">
</form>

Compatibilité navigateurs en 2026

En 2026, les attributs min et max bénéficient d'une compatibilité universelle dans tous les navigateurs modernes : Chrome, Firefox, Edge, Safari, Opera et leurs versions mobiles. Internet Explorer est officiellement abandonné depuis juin 2022 et ne doit plus être pris en compte dans le développement web. La prise en charge du type date est désormais complète y compris sur Safari mobile (iOS 14+).

Note 2026 : Contrairement aux informations obsolètes des anciennes documentations, Firefox et Safari supportent pleinement input type="date" avec min/max depuis plusieurs versions. Aucun polyfill n'est nécessaire pour les projets ciblant des navigateurs à jour.

min et max vs validation JavaScript : quelle approche choisir ?

Les attributs min et max offrent une validation déclarative légère et accessible, intégrée nativement au navigateur. Ils génèrent automatiquement des messages d'erreur localisés et sont compatibles avec les technologies d'assistance (lecteurs d'écran). Cependant, la validation côté serveur reste indispensable : un utilisateur malveillant peut modifier ou désactiver les contraintes HTML. Utilisez toujours les deux niveaux de validation pour des formulaires sécurisés.

Différences entre HTML 4.01 et HTML5

Les attributs min et max ont été introduits avec HTML5 (spécification W3C 2014). Ils n'existent pas en HTML 4.01. Leur adoption a permis de réduire significativement la dépendance aux scripts de validation tiers et d'améliorer l'accessibilité des formulaires web.

Valeurs d'attribut

ValeurDescription
nombreEntier ou décimal définissant la valeur minimale ou maximale autorisée (ex. : min="0.5")
dateDate au format ISO 8601 (AAAA-MM-JJ) définissant la borne temporelle (ex. : max="2026-12-31")

Retour à l'accueil du site

Par carabde | Créé le 10 mars 2014 | Mis à jour le 18 février 2026