HTML5智能表单

一、HTML5新增输入类型

　　1.新增type类型

　　　　Type=“number” 专门用来输入数字的文本框

　　　　Type=“email” 限制用户必须输入email类型 “@”

　　　　Type=“url” 限制用户必须输入url类型 “http://”

　　　　Type=“range” 产生一个滑动条表单

　　　　Type=“search” 产生一个搜索意义的表单 <input type=”search” name=“name名”/>

　　　　Type=“color” 生成一个颜色选择的表单

　　　　Type=“time” 限制用户必须输入时间类型

　　　　Type=“month” 限制用户必须输入月类型

　　　　Type=“week” 限制用户必须输入周类型

　　　　Type=“datetime-local” 选取本地时间

　　2.智能表单类型名词解释

　　　　1）Number：专门用来输入数字的文本框；在提交时会检查其中的内容是否为数字，具有min（最小值）、max（最小值）、step（步幅，数字间隔，创建一系列有效数字）的属性；

　　　　　　例：<input name=“number1” type=“number” value=“25” min=“10” max=“100” step=“5” />

　　　　2）email：专门用来输入email地址的文本框,如果该文本框中内容不是email地址格式的，则不允许提交；但它不检查email地址是否存在；提交时可以为空，除非加上了required属性；

　　　　3）url：专门用来输入URL地址的文本框；如果该文本框中内容不是URL地址格式的，则不允许提交；

　　　　　　例：<input name=‘url1’ type=‘url’ value=‘’http://www.baidu.com”>

　　　　4）range：是用来只允许输入一段范围内数值的文本框，它具有min属性与max属性，及step属性，可以指定每次拖动的步幅；

　　　　　　例：<input name=“range1” type=“range” value=“25” min=“0” max=“100” step=“5” />

　　　　5）Search：输入的是搜索的关键字，与type=“text” 基本上一样；

　　　　6）Color：用来选取颜色；

　　　　7）(date, month, week, time, datetime, datetime-local)拥有多个可供选取日期和时间的新输入类型；

　　　　　　date - 选取日、月、年

　　　　　　month - 选取月、年

　　　　　　week - 选取周和年

　　　　　　time - 选取时间（小时和分钟）

　　　　　　datetime - 选取时间、日、月、年

　　　　　　datetime-local - 选取时间、日、月、年（本地时间）

　　　　　　例：<input type=“month” >

二、HTML5新增元素和属性

　　（一）新增元素

　　　　1.output： 定义不同类型的输出，如计算结果的输出，或脚本的输出。

　　　　注：必须从属于某个表单；即，必须将它书写在表单内部；Output标签IE不支持

　　　　Eg:

　　　　　　<form action="" oninput="x.value=parseInt(a.value)+parseInt(b.value)">

　　　　　　　　<input >

　　　　　　　　<input >=

　　　　　　　　<output ></output>

　　　　　　</form>

　　　　2.对新元素样式的使用：

　　　　　　跟 input 标签设置样式一样，但是要设置标签中局部的样式不能实现；如改变日历的背景色，颜色框的按钮效果等，这些都不可以实现。

　　（二）新增属性

　　　　1.checked="checked"属性：默认选中

　　　　　disabled="disabled"属性：禁用

　　　　　placeholder属性：文本框处于未输入状态时文本框中显示的输入提示；

　　　　　autofocus属性：给文本框、选择框、或者按钮控件加上该属性，当打开页面时，该控件自动获得焦点，一个页面只能有一个；

　　　　　required属性：验证输入不能为空list属性（结合datalist元素使用）；

　　　　　autocomplete属性：输入富足和所用的自动完成功能，是一个节省输入时间，同时也十分方便的功能；它的属性值为on/off，on可是显示指定候补输入的数据列表；

　　　　　eg：<input type="text" autocomplete="on" name ="greeting">

　　　　2.HTML5增加了大量在提交时对表单及表单元素内容有效性验证的功能

　　　　　　required属性：可以应用在大多数输入元素上（除了隐藏元素和图片），在提交时如果元素内容为空白，则不允许提交，同时显示提示文字；

　　　　　　pattern属性：将属性值设为某个格式的正则表达式，在提交时会检查其内容是否符合给定格式；

　　　　　　　　例：<input pattern = “[0-9][A-Z]{3}” title="输入内容：一个数与三个大写字母" placeholder=‘输入内容：一个数与三个大写字母’>

　　　　　　novalidate属性：取消验证可以对form表单添加novalidate属性，即使form表单中的input添加了required，也将不进行验证

　　　　　　Multiple属性：可以输入一个或多个值，每个值之间用逗号分开

　　　　　　　　例：<input type=“email” multiple/>还可以应用于file