HTML 时间输入：24小时制值、min、max、step 与秒

HTML input type="time" 接受一天中的时间。即使界面显示 AM/PM，值通常是 24 小时格式的字符串，例如 09:30，或者当包含秒数时为 13:10:20。min/max 设置边界，step 设置以秒为单位的间隔。

区分显示格式和数值

输入界面因操作系统、浏览器和用户语言而异。不要指望每个下拉菜单或选择器都看起来相同。在初始值中放置有效的字符串，例如 13:30，而不是本地化的显示文本，如 1:30 PM。使用 value 属性设置初始值，并通过 input.value 读取当前用户选择。

时间值没有日期或时区。它不能告诉你上午 9 点是首尔时间还是其他地方时间。对于标识实际时间点的预订，也要收集日期和参考时区，并在服务器上一致地解释它们。对于诸如 90 分钟的持续时间，请选择合适的格式，例如使用数字分钟计数，而不是重复使用一天中的时间控件。

设置界限和间隔

步长基准优先使用有效的 min，其次是有效的 HTML value 属性，两者都没有时为 00:00:00。对于 min="09:00" step="900"，09:00、09:15 和 09:30 是有效的，但 09:10 不符合。此规则不会决定可用预订时段或休息日；请单独实现服务规则。

完整示例：15 分钟间隔和秒数

将此代码保存为 time.html 并在浏览器中打开。无需服务器即可检查验证和提交的值。第二个输入明确使用 step="1" 来允许输入秒数。

<!doctype html>
<html lang="zh-CN">
<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>

1. 初始提交：meeting 是 09:30，checkpoint 是 13:10:20。输出为 24 小时格式，即使用户界面使用上午/下午制。
2. 将会议时间设置为08:45以使范围验证失败。09:10在范围内但不符合15分钟步进。09:45提交成功。
3. 完全清除会议时间并提交以检查必填验证。恢复有效时间，然后更改第二个输入的秒数以比较秒级输出。
4. 仅将检查点的step="1"更改为step="60"并重新打开文件。初始13:10:20比从13:00:00开始的一分钟步进多20秒，因此无效。之后将步进恢复为1。
5. 重置将会议恢复为09:30，检查点恢复为13:10:20。

跨越午夜的范围以及服务器验证

时间输入可以表示跨午夜的范围。例如，min="22:00" max="02:00" 意味着晚上 10 点到午夜到凌晨 2 点。这不是包含实际日期的时间间隔，因此不会自动选择第二天的日期。在目标浏览器中检查对此验证的支持，并在服务器上实施相同的规则。

浏览器的选择器和验证消息不能替代服务器端验证。服务器必须检查接收的字符串的格式、范围和步骤，并将其与所需的日期、时区和预订可用性结合使用。GET URL 中的 %3A 是编码后的冒号；正常解析表单值会得到类似 09:30 的字符串。

如果还需要日期，可参阅date 输入的日期值与范围设置。时刻格式与属性定义请参阅MDN 的 time 输入参考。