HTML5新增表单类型

Html5 Forms概述,在Html5中:

1.表单仍然使用<form>元素作为容器,我们可以在其中设置基本的提交特性form的action
	指向一个服务器地址(接口)
2.当用户或开发人员提交页面时,表单仍然用于向服务端发送表单中控件的值
	注意表单项的name属性必须有值,服务器才能获取表单
3.所有之前的表单控件都保持不变
4.仍然可以使用脚本操作表单控件

Html5之前的表单:

标签为input
	type:text:文本框
	type:password:密码框
	type:radio:单选按钮
		注意以name分组,确保单选关系,也为了后台能成功获取
		必须有value属性,为了后台获取后的识别(不写统一为on)
		checked属性,选中控制
	type:checkbox:复选框
		注意以name分组,确保为一组,也为了后台能成功获取
		必须有value属性,为了后台获取后的识别(不写统一为on)
		checked属性,选中控制
	type:submit:提交按钮
	type:reset:重置按钮
	type:button:普通按钮
标签为select:下拉框
	name属性在select标签上
	multiple:可选多项
	子项可以通过optgroup来进行分组
	label属性用来定义组名
	子项为option标签
	selected属性,选中控制必须有value属性,为了后台获取后的识别
标签为textarea:文本域
标签为button:按钮
	type:submit:提交按钮
	type:reset:重置按钮
	type:button:普通按钮
标签为lable:控制文本与表单的关系
	for属性指向一个input的id
标签fieldset 标签
	legend:来为表单分组

新增表单控件:

type:email :email地址类型

当格式不符合email格式时,提交是不会成功的;
会出现提示:只有当格式相符时,提交才会通过。
在移动端获焦的时候会切换到英文键盘

type:tel :电话类型

在移动端获焦的时候会切换到数字键盘

type:url :url类型

当格式不符合url格式时,提交是不会成功的,会出现提示;
只有当格式相符时,提交才会通过

type:search :搜索类型

有清空文本的按钮

type:range :

特定范围内的数值选择器

属性:min、max、step

file

上传文件;
multiple:这是个attribute属性;布尔值类型,可以选择多个文件上传;

后台项目常用input类型

	  type:number          :  只能包含数字的输入框
	  type:color  	       :  颜色选择器
	  type:datetime        :  显示完整日期(移动端浏览器支持)
	  type:datetime-local  :  显示完整日期,不含时区
	  type:time            :  显示时间,不含时区
	  type:date            :  显示日期
	  type:week            :  显示某年第几周
	  type:month           :  显示某年第几月
发布了133 篇原创文章 · 获赞 0 · 访问量 1706

猜你喜欢

转载自blog.csdn.net/weixin_43269800/article/details/104427566
今日推荐