如何在 HTML 中使用时间输入类型?

front end technologyhtmlweb development更新于 2025/4/1 13:00:17

HTML 提供了各种标签来设计用户界面。有一类特定的标签可供用户选择日期和时间类型的数据。

要使用 HTML 创建时间控件，我们使用 <input type="time"> 标签，其中时间值可以在 <input> 标签的 TYPE 属性中使用。

默认情况下，时间控件将以 24 小时制显示输出。时间可以采用 hh:mm(小时::分钟)格式表示，或者如果您还想包含秒，则格式为 hh::mm::ss。小时值可以在 0-24 之间选择，分钟值可以在 0-59 之间选择。

让我们看一个创建时间类型输入元素的程序。

示例


<html>
<body>
   <form>
      <label for="meet">Meeting Time :</label>
      <input type="time" id="time1">
   </form>
</body>
</html>

选择时钟图标后，将打开计时器选项，您可以从中选择时间。

我们还可以设置时间选择器的默认值，这样，它最初将显示默认时间，而不是空白。要设置默认值，我们可以使用 VALUE 属性。

示例


<html>
<body>
   <form>
      <label for="meet">Meeting Time :</label>
      <input type="time" id="time1" value="13:20">
   </form>
</body>
</html>

我们还可以指定时间选择器控件的范围，因为在某些情况下可能需要限制时间的输入，例如工作时间有限、商店时间等。对于此类信息，您应该使用 min、max 和 step 属性设置一个范围，如果用户选择的范围超出给定范围，则会显示错误消息。

示例


<html>
<body>
   <form>
      <table border="3" bordercolor="black">
         <caption>Online Doctor Appointment Form</caption>
         <tr>
            <td>Doctor Name</td>
            <td>Speciality</td>
            <td>Appointment Date</td>
            <td>Available Time</td>
         </tr>
         <tr>
            <td>Dr Kapoor</td>
            <td>Orthopedic Surgeon</td>
            <td><input type="datetime-local"></td>
            <td>
               <input type="time" id="time1" value="09:12" min="09:00" max="12:00">
            </td>
            <td><input type="submit" value="Schedule"></td>
         </tr>
      </table>
   </form>
</body>
</html>

在本程序中，我们还使用了 datetime-local 控件来指定"预约日期"。并使用 time 控件来创建时间选择器。可用时间使用 VALUE 属性 (9:30 – 12:00) 显示在字段中，如果用户选择除 VALUE 属性以外的时间，则会产生错误。

上述操作会导致错误。

假设，如果您想强制用户从时间选择器中选择值，那么您可以使用 REQUIRED 属性。

除了设置时间范围外，我们还可以在下拉菜单中添加一些特定值。现在让我们以航班追踪应用为例，例如 flightview.com。在此应用中，我们可以通过输入航班详情或航线信息来追踪航班。此外，还可以指定航班时刻，用户也可以从可用的时刻中进行选择。

为此，我们可以在 HTML 表单中使用 <datalist> 标签。通过在 <input> 标签中使用 list 属性，可以将其与 <input> 标签关联。

示例


<html>
<body>
   <form name="form1">
      <label for="fli">Flight Timings :</label>
      <input type="time" list="avail">
      <datalist id="avail">
      <option value="06:00">
      <option value="07:00">
      <option value="08:00">
      </datalist>
      <br><br>
      <input type="submit" value="Book">
   </form>
</body>
</html>