移动端第三章新增表单控件

最新推荐文章于 2023-07-10 10:30:12 发布

LW0512

最新推荐文章于 2023-07-10 10:30:12 发布

阅读量214

点赞数

分类专栏：移动端

本文链接：https://blog.youkuaiyun.com/LW0512/article/details/108920370

版权

移动端专栏收录该内容

25 篇文章

订阅专栏

本文主要介绍移动端开发中表单控件的新增，详细探讨了type属性下的新控件及其特有的属性设置，旨在提升用户体验和交互设计。

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

新增表单控件

1：表单中新增的控件(type属性)

email: 提交表单时检测值是否是一个电子邮件格式
url: 提交表单时检测值是否是一个url格式
date: 年-月-日格式的控件
time: 时:分格式的控件
datetime: 年-月-日 时:分 格式的控件（UTC时间）
datetime-local: 年-月-日 时:分 格式的控件（本地时间）
month: 年-月格式的控件
week: 年-周数格式的控件
number: 数字输入框
<input type="number" name="" id="" value="60" max="100" min="0" />
range: 选择区域
<input type="range" name="" id="" value="60" max="100" min="0" />
tel: 电话输入框
search: 用于搜索
color: 调用系统选色器

实例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<form>
			<!--文本框：<input type="text" id="" value="" placeholder="" autofocus autocomplete="on" name="user"/><br>
			密码框：<input type="password" id="" value="" required/><br>
			数字框：<input type="number" id="" value="" /><br>-->
				<!------------------------------------------------------>
			<!--密码框：<input type="text" id="" value="" pattern="^[a-z0-9_-]{6,18}$"/><br>-->
			<!--电话框：<input type="tel" pattern="[0-9]{7,12}"/>-->
			<!--文本框：<input type="text" id="" value="" maxlength='8'/><br>-->
			<!--输入的数字必须是8以下，3以上-->
			<!--数字框：<input type="number" id="" value="" min="3" max="8" />-->
				区域：<input type="range" id="" value="" min="0" max="100" step="10"/>
			<input type="submit" value="提交"/>
		</form>
	</body>
</html>

2：新增控件属性：

placeholder: 占位符，输入框提示信息
<input type="text" autofocus placeholder=''/>
required: 该input为必填项
autofocus: 在页面加载时，域自动地获得焦点
autocomplete="off/on":可以记录输入信息  
必须有name属性  必须提交过
off==>关闭     on==>打开
<input type="tel" name="user" id="" value="" autocomplete="on"/>
pattern: 正则验证 
<input type="tel" pattern="[0-9]{7,12}"/>
min/max: input能输入的最小/最大字节的长度
step: 针对number和range类型，每次递增step的值
list: 指定一个datalist，作为下拉提示单