HTML 输入日期格式 - HTML

在 HTML 中，我们可以使用 <input> 元素来创建一个日期输入框，使用户能够输入日期。

基本用法

要创建日期输入框，只需在 HTML 表单中使用 <input> 元素并将 type 属性设置为 date，如下所示：

<label for="date">选择日期：</label>
<input type="date" id="date" name="date">

其中，id 和 name 属性可以自行设置。

属性

<input> 元素还具有一些其他属性，可以对日期输入框进行进一步的自定义设置。下面列出了一些常用的属性：

min 和 max

通过设置 min 和 max 属性，可以限制用户选择的日期范围。例如，以下代码会将日期输入框的可选日期范围限制为 2022 年 1 月到 2022 年 12 月：

<label for="date">选择日期：</label>
<input type="date" id="date" name="date" min="2022-01" max="2022-12">

value

value 属性用于指定日期输入框的默认值。例如，以下代码会将日期输入框的默认值设置为今天的日期：

<label for="date">选择日期：</label>
<input type="date" id="date" name="date" value="2022-03-07">

placeholder

placeholder 属性用于在输入框中显示提示信息，告诉用户应该输入什么内容。例如，以下代码会在日期输入框中显示 “请选择日期”：

<label for="date">选择日期：</label>
<input type="date" id="date" name="date" placeholder="请选择日期">

required

required 属性用于指定日期输入框为必填项。如果用户没有填写日期，则提交表单时会出现错误提示。例如，以下代码会将日期输入框设置为必填项：

<label for="date">选择日期：</label>
<input type="date" id="date" name="date" required>

结论

日期输入框是 HTML 表单中常用的一种输入框。通过合理使用各种属性，可以对日期输入框进行进一步的自定义设置，从而满足不同的需求。