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

最新推荐文章于 2024-09-23 16:57:46 发布

原创最新推荐文章于 2024-09-23 16:57:46 发布 · 153 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#移动端

移动端专栏收录该内容

12 篇文章

订阅专栏

本文详细介绍了HTML5中新增的各种表单控件，包括email、url、date、time等，以及对应的输入类型和验证规则。同时，还讲解了如placeholder、required、autofocus等增强用户体验的属性，以及如何使用min、max、step等属性限制输入范围。此外，文章还提及了如何利用pattern属性进行正则表达式验证和autocomplete属性来管理用户输入历史。通过这些控件和属性，开发者能够创建更丰富、更健壮的表单交互。

表单中新增的控件(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="" /><br>
			密码框：<input type="password" id="" value="" /><br>
			<!-------------------------下面都是h5新增控件---------------------------------->
			数字框：<input type="number" id="" value="" /><br>
			邮件框：<input type="email" id="" value="" /><br>
			网址框：<input type="url" id="" value="" /><br>
			电话框：<input type="tel" id="" value="" /><br>
			搜索框：<input type="search" id="" value="" /><br>
			拾色器：<input type="color" id="" value="" /><br>
			选择区：<input type="range" id="" value="100" max='100' min='0'/><br>
			<!--------------------------下面是日期控件--------------------------------------->
			<input type="date" id="" value="" /><br>
			<input type="time" id="" value="" /><br>
			<input type="datetime-local" id="" value="" /><br>
			<input type="datetime" id="" value="" /><br>
			<input type="month" id="" value="" /><br>
			<input type="week" id="" value="" /><br>
			<input type="submit" value="提交"/>
		</form>
	</body>
</html>

新增控件属性：

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，作为下拉提示单

例子:

<!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>