HTML 中的 <input /> 元素可以用来创建各种不同类型的输入字段,其中 type 属性用于指定输入字段的类型。其中,<input /> 元素的 type 属性为 "time" 时,会创建一个时间输入字段,允许用户选择时间。
使用方法
<input type="time" id="meeting-time" name="meeting-time">
在上面的示例中,我们创建了一个时间输入字段,id 为 "meeting-time",name 为 "meeting-time"。
属性
- value: 表示输入字段的值,可以是合法的时间值,例如 "12:00"。
- min: 设置输入字段的最小时间值。
- max: 设置输入字段的最大时间值。
- step: 设置输入字段的时间步长。
事件
- onchange: 当输入字段的值发生改变时触发该事件。
- oninput: 当用户输入值时触发该事件。
方法
- checkValidity(): 检查输入字段的值是否合法,返回 true 或 false。
示例代码
-- -------------------- ---- -------
--------- -----
------
------
----------- ----- ---------------
-------
------
------ ------------------------- - ------- -------------
------ ----------- ----------------- ------------------- ----------- ----------- -----------
--------
------------------------------------------------------------------ ---------- -
-------------------- ---- --------- - - ------------
---
---------
-------
-------在上面的示例中,我们创建了一个时间输入字段,限定了最小时间为 09:00,最大时间为 18:00,时间步长为 15 分钟。当用户选择时间后,会在控制台输出选择的会议时间。
| 属性 | 描述 |
|---|---|
| autocomplete | 设置或返回 time 字段的 autocomplete 属性值 |
| autofocus | 设置或返回 time 字段在页面加载后是否自动获取焦点 |
| defaultValue | 设置或返回 time 字段默认的值 |
| disabled | 设置或返回 time 字段是否可用 |
| form | 返回使用 time 字段的表单引用 |
| list | 返回包含了 time 字段的 datalist 引用 |
| max | 设置或返回 time 字段的 max 属性值 |
| min | 设置或返回 time 字段的 min 属性值 |
| name | 设置或返回 time 字段的 name 属性值 |
| readOnly | 设置或返回 time 字段是否只读 |
| required | 设置或返回 time 字段在表单中是否为必填字段 |
| step | 设置或返回 time 字段的 step 属性值 |
| type | 返回 time 字段的表单元素类型 |
| value | 设置或返回 time 字段的 value 属性值 |