Heure HTML : format 24 heures, min, max, step et secondes

HTML input type="time" accepte une heure de la journée. Même si l'interface affiche AM/PM, la valeur est généralement une chaîne sur 24 heures telle que 09:30, ou 13:10:20 lorsque les secondes sont incluses. min/max définissent les limites, et step définit les intervalles en secondes.

Distinguer le format d'affichage de la valeur

L'interface de saisie varie selon le système d'exploitation, le navigateur et la langue de l'utilisateur. Ne vous attendez pas à ce que chaque menu déroulant ou sélecteur se ressemble. Mettez une chaîne valide telle que 13:30 dans la valeur initiale, et non du texte d'affichage localisé tel que 1:30 PM. Définissez la valeur initiale avec l'attribut value et lisez la sélection actuelle de l'utilisateur via input.value.

Une valeur horaire n'a pas de date ni de fuseau horaire. Elle ne peut pas vous dire si 9 h signifie Séoul ou un autre lieu. Pour une réservation qui identifie un instant précis, collectez également la date et le fuseau horaire de référence et interprétez-les de manière cohérente sur le serveur. Pour une durée telle que 90 minutes, choisissez un format adapté comme un nombre de minutes numérique au lieu de réutiliser un contrôle d'heure de la journée.

Définissez des limites et des intervalles

La base du pas est une valeur min valide, sinon l’attribut HTML value valide, et à défaut 00:00:00. Pour min="09:00" step="900", 09:00, 09:15 et 09:30 sont valides, mais 09:10 ne correspond pas. Cela ne détermine pas les créneaux de réservation disponibles ni les jours fermés ; appliquez les règles de service séparément.

Exemple complet : intervalles de 15 minutes et secondes

Enregistrez ce code sous time.html et ouvrez-le dans un navigateur. Aucun serveur n'est nécessaire pour vérifier la validation et les valeurs soumises. Le deuxième champ utilise explicitement step="1" pour permettre les secondes.

<!doctype html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Plages horaires et saisie des secondes</title>
  <style>
    body { margin: 24px; font-family: sans-serif; }
    label { display: block; margin: 16px 0 6px; }
    input { max-width: 100%; box-sizing: border-box; }
    pre { white-space: pre-wrap; overflow-wrap: anywhere; }
  </style>
</head>
<body>
  <h1>Choisir une heure</h1>
  <form id="demo">
    <label for="meeting">Réunion (09:00–18:00, pas de 15 minutes)</label>
    <input id="meeting" name="meeting" type="time"
      min="09:00" max="18:00" step="900" value="09:30" required>
    <label for="checkpoint">Vérification (13:00–15:00, pas d’une seconde)</label>
    <input id="checkpoint" name="checkpoint" type="time"
      min="13:00:00" max="15:00:00" step="1" value="13:10:20" required>
    <p><button type="submit">Afficher les valeurs envoyées</button>
      <button type="reset">Réinitialiser</button></p>
  </form>
  <pre id="result" aria-live="polite"></pre>
  <script>
    const form = document.querySelector('#demo');
    const result = document.querySelector('#result');
    form.addEventListener('submit', (event) => {
      event.preventDefault();
      result.textContent = JSON.stringify([...new FormData(form).entries()], null, 2);
    });
    form.addEventListener('input', () => { result.textContent = ''; });
    form.addEventListener('reset', () => { result.textContent = ''; });
  </script>
</body>
</html>

1. Soumettez initialement : meeting est 09:30 et checkpoint est 13:10:20. La sortie est au format 24 heures même si l'interface utilise AM/PM.
2. Réglez l'heure de la réunion à 08:45 pour échouer à la validation de l'intervalle. 09:10 est dans l'intervalle mais échoue le pas de 15 minutes. 09:45 soumet avec succès.
3. Effacez complètement l'heure de la réunion et soumettez pour vérifier la validation obligatoire. Restaurez une heure valide, puis changez les secondes dans la deuxième saisie pour comparer la sortie au niveau des secondes.
4. Changez uniquement le step="1" de checkpoint en step="60" et rouvrez le fichier. Le 13:10:20 initial est à 20 secondes des pas d'une minute depuis 13:00:00 et est invalide. Restaurez le pas à 1 ensuite.
5. La réinitialisation restaure la réunion à 09:30 et le checkpoint à 13:10:20.

Plages à travers minuit et validation du serveur

Les entrées de temps peuvent exprimer une plage à travers minuit. Par exemple, min="22:00" max="02:00" signifie de 22 h à 2 h du matin en passant par minuit. Ce n'est pas un intervalle contenant des dates réelles, donc cela ne sélectionne pas automatiquement la date du jour suivant. Vérifiez la prise en charge de cette validation dans vos navigateurs cibles et appliquez les mêmes règles sur le serveur.

Le sélecteur et les messages de validation du navigateur ne remplacent pas la validation côté serveur. Le serveur doit vérifier le format, la plage et l’incrément de la chaîne reçue et les combiner avec la date requise, le fuseau horaire et la disponibilité de la réservation. %3A dans une URL GET est deux-points codés ; l’analyse de la valeur du formulaire donne normalement une chaîne telle que 09:30.

Si une date est aussi nécessaire, consultez les valeurs et limites d’un champ date. Pour les formats horaires et les attributs, consultez la référence MDN de time.