【HTML/CSS】创建日期和时间表单控件

最新推荐文章于 2025-03-25 22:58:33 发布

进阶er

最新推荐文章于 2025-03-25 22:58:33 发布

阅读量1.7w

点赞数 11

分类专栏：网页设计文章标签：表单中日期和时间控件

本文链接：https://blog.csdn.net/qq_43466457/article/details/100186541

版权

网页设计专栏收录该内容

5 篇文章

订阅专栏

本文介绍如何利用HTML5的日期和时间输入类型创建表单控件，通过CSS进行样式定制，以实现用户友好的日期和时间选择体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

属性值	说明
date	选择日，月，年
month	选择月，年
week	选择周，年
time	选择时间（时，分）
datetime	输入时间后，会验证是否是时间格式
datetime-local	选择时间，日期，月，年（本地时间）

对应示例代码如下：

<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="utf-8">
		<title>分类展示不同形式的选择日期</title>
	</head>
	<body>
		<form >
			<div class="form-group">
				<label for="date">日-月-年</label>
				<input type="date" name="date" id="date" value="" />
			</div>
			<div class="form-group">
				<label for="month">年-月</label>
				<input type="month" name="month" id="month" value="" />
			</div>
			<div class="form-group">
				<label for="week">年-周</label>
				<input type="week" name="week" id="week" value="" />
			</div>
			<div class="form-group">
				<label for="time">时-分</label>
				<input type="time" name="date" id="time" value="" />
			</div>
			<div class="form-group">
				<label for="date">日期-时间</label>
				<input type="datetime" name="date" id="datetime" value="" />
			</div>
			<div class="form-group">
				<label for="datetime-local">日期-时间</label>
				<input type="datetime-local" name="date" id="datetime-local" value="" />
			</div>
			
			 
		</form>
	</body>
</html>

在这里插入图片描述

date