HTML時刻入力：24時間制の値・min・max・stepと秒

HTMLリファレンス

作成日 2026-10-30 最終更新日 2026-10-30

HTML input type="time" は時刻を受け入れます。インターフェースがAM/PMを表示していても、値は一般的に09:30のような24時間形式の文字列、または秒を含む場合は13:10:20です。min/maxは範囲を設定し、stepは秒単位の間隔を設定します。

表示形式を値と区別する

入力UIは、オペレーティングシステム、ブラウザ、ユーザーの言語によって異なります。すべてのドロップダウンやピッカーが同じように見えるとは期待しないでください。初期値には1:30 PMのようなローカライズされた表示テキストではなく、13:30のような有効な文字列を入力してください。初期値はvalue属性で設定し、現在のユーザー選択はinput.valueで読み取ります。

時間値には日付やタイムゾーンは含まれません。午前9時がソウルか他の場所かを判断することはできません。実際の瞬間を特定する予約の場合は、日付と基準タイムゾーンも収集してサーバー側で一貫して解釈してください。90分のような期間の場合、時刻のコントロールを再利用するのではなく、分単位の数値のような適切な形式を選択してください。

範囲と間隔を設定する

属性	例	意味
`value`	`09:30`	初期時間；範囲やステップ、形式に適合している必要があります。
`min`、`max`	`09:00`、`18:00`	許可される時間の包括的な境界。
`step`	`900`	900秒は15分です。デフォルトの60は1分、1は1秒です。
`required`	ブール属性	空の場合、通常の送信をブロックします。
`name`	`meeting`	送信されるフィールド名；idだけではデータ名は作成されません。

間隔の基準は、有効なminがあればその値、なければHTMLの有効なvalue属性、どちらもなければ00:00:00です。有効なHTMLのvalue属性がある場合はそれを使用し、どちらもない場合は深夜を使用します。min="09:00" step="900"の場合、09:00、09:15、および09:30は有効ですが、09:10は適合しません。これは利用可能な予約枠や休業日を決定するものではなく、サービスルールは別途実装してください。

完全な例：15分間隔と秒

このコードをtime.htmlとして保存し、ブラウザで開いてください。検証および送信された値を確認するためにサーバーは必要ありません。2つ目の入力では、秒を許可するために明示的にstep="1"を使用しています。

<!doctype html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>時刻の範囲と秒単位の入力</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>時刻を選択</h1>
  <form id="demo">
    <label for="meeting">会議時刻（09:00–18:00、15分間隔）</label>
    <input id="meeting" name="meeting" type="time"
      min="09:00" max="18:00" step="900" value="09:30" required>
    <label for="checkpoint">点検時刻（13:00–15:00、1秒間隔）</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">送信値を確認</button>
      <button type="reset">初期化</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>

最初に送信：meetingは09:30であり、checkpointは13:10:20です。出力はUIがAM/PMを使用していても24時間形式です。
ミーティング時間を08:45に設定すると範囲バリデーションに失敗します。09:10は範囲内ですが、15分刻みのステップで失敗します。09:45は正常に送信されます。
ミーティング時間を完全にクリアして送信し、必須バリデーションを確認します。有効な時間を復元した後、2番目の入力で秒を変更して秒単位の出力を比較します。
チェックポイントのstep="1"のみをstep="60"に変更し、ファイルを再度開きます。初期の13:10:20は13:00:00から1分刻みのステップから20秒ずれており、無効です。その後、ステップを1に戻します。
リセットにより、ミーティングが09:30に、チェックポイントが13:10:20に復元されます。

深夜をまたぐ範囲とサーバーバリデーション

時間入力は、深夜をまたぐ範囲を表現できます。たとえば、min="22:00" max="02:00" は午後10時から深夜を経て午前2時までを意味します。これは実際の日付を含む間隔ではないため、自動的に翌日の日付を選択することはありません。ターゲットブラウザでこの検証のサポートを確認し、サーバーでも同じルールを実装してください。

ブラウザの時刻選択UIや検証メッセージは、サーバー側の検証を代替できません。サーバーは、受信した文字列の形式、範囲、ステップを確認し、それを必須の日付、タイムゾーン、予約可能性と組み合わせてチェックする必要があります。GET URL の %3A はエンコードされたコロンであり、フォーム値を通常通り解析すると 09:30 のような文字列が得られます。

日付も必要ならdate入力の日付値と範囲を参照してください。時刻形式と属性の詳細はMDNのtime入力リファレンスで確認できます。

HTMLリファレンス