web前端：H5表单新特性

作者:lucien_jun更新于： 2020-03-05 21:38:57

　　表单按钮:包括提交按钮、复位按钮和一般按钮;用于将数据传送到服务器上的CGI脚本或者取消输入，还可以用表单按钮来控制其他定义了处理脚本的处理工作。

　　1.html5表单新特性之——新的inputtype

　　HTML5之前已有的inputtype:

　　text、password、radio、checkbox、file、submit、reset、button、image、hidden

　　HTML5新增的inputtype:

　　1.Email：邮件输入域，在表单提交时提供简单的邮箱格式验证，并弹出一个提示矿口(可定制内容不能定制样式)

　　2.url:URL地址输入域。在表单提交时提供简单的URL地址格式验证，并弹出一个提示窗口

　　3.number:数字输入域，在表单提交时提供简单的数字格式验证，并弹出一个提示窗口

　　4.tel:电话号码输入域，在手机浏览器中弹出数字键盘

　　5.search:搜索输入域，在手机浏览器中右下角呈现搜索按键

　　6.range：范围选择控件，帮助用户在一定范围内选择一个数字

　　(7)color：颜色选择控件，浏览器并未自己实现颜色选择框，而是使用操作系统自带的颜色选择控件

　　(8)date：日期选择控件，FF没有实现，推荐使用第三方插件代替，如jQueryUI-datepicker、laydate等

　　(9)month：月份选择控件，FF没有实现

　　(10)week：星期选择控件，FF没有实现

　　HTML5新特性之表单新特性——新的表单元素

　　HTML5之前FORM可以有的标签——用于数据提交：

　　INPUT、TEXTAREA、SELECT/OPTION、BUTTON

　　HTML5新增表单元素——用于信息提示，不能用于数据提交：

　　(1)datalist：数据列表，配合option使用，本身为不可见元素，为普通的input提供输入建议列表

　　XXX

　　(2)progress：进度条，未指定value属性则显示为“进行中”样式；若指定了value（默认在0~1之间）就可以控制其显示的进度

　　(3)meter：刻度尺/度量衡，用红黄绿三色表示出一个数值所处的范围：不可接受/可以接受/最优范围

　　(4)output：输出，用于描述表单中的计算结果，语义标签，样式与SPAN无异。

　　

xxx

　　HTML5新特性表单新特性——表单元素新的属性——重点

　　HTML5之前表单元素可用的属性：

　　id、class、title、style、type、name、value、checked、selected、disabled、readonly

　　HTML5之前表单元素新增的属性：

　　(1)autocomplete：on/off，自动补全，是否自动记录之前提交的数据，以用于下一次输入建议

　　(2)placeholder：站位符，用于在输入框中显示提示性文字，与value不同，不能被提交

　　(3)autofocus：false/true，自动获得输入焦点

　　(4)multiple：false/true，是否允许多个输入值，若声明了该属性，输入框中（如email）就允许输入用逗号分隔的多个值

　　(5)form：为一个元素指定form属性，值为某个表单的ID，则此输入域可以放到表单的外部

　　========上述五个属性是新的通用属性===========

　　=======上述六个属性是输入验证相关属性========

　　(6)required：false/true，必需的/必填项，在表单提交时会验证是否有输入，没有输入则弹出提示消息

　　(7)maxlength：最大长度，在有输入的情况下，限定输入域中字符的个数

　　(8)minlength：最小长度，在有输入的情况下，限定输入域中字符的个数，不是HTML5标准属性，仅部分浏览器支持（如Chrome）

　　(9)min：限定输入的数字的最小值

　　(10)max：限定输入的数字的最大值

　　(11)step：限定输入的数字的步长，与min属性连用

　　(12)pattern：指定一个正则表达式，对输入进行验证

　　注意：上述正则表达式可以省略^和$

　　表单在网页中主要负责数据采集功能。一个表单有三个基本组成部分:表单标签:这里面包含了处理表单数据所用CGI程序的URL以及数据提交到服务器的方法。表单域:包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等。