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 : 显示某年第几月