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

最新推荐文章于 2022-10-13 18:23:14 发布

小涛涛啊！

最新推荐文章于 2022-10-13 18:23:14 发布

阅读量163

点赞数

分类专栏：移动端内容文章标签：移动端

本文链接：https://blog.csdn.net/t5555666/article/details/108821785

版权

移动端内容专栏收录该内容

15 篇文章 0 订阅

订阅专栏

本文介绍了移动端开发中第三章的重点——新增的表单控件，包括各种type属性的详细讲解和新增控件的属性介绍。

摘要由CSDN通过智能技术生成

第三章新增表单控件

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="" /><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>

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

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

小涛涛啊！

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
移动端第三章新增表单控件

第三章新增表单控件1：表单中新增的控件(type属性)email: 提交表单时检测值是否是一个电子邮件格式url: 提交表单时检测值是否是一个url格式date: 年-月-日格式的控件time: 时:分格式的控件datetime: 年-月-日时:分格式的控件（UTC时间）datetime-local: 年-月-日时:分格式的控件（本地时间）month: 年-月格式的控件week: 年-周数格式的控件number: 数字输入框 <input type="number" n
复制链接

扫一扫

专栏目录