HTML5 智能表单的应用

form表单和form标签的脱离

优点：表单里面的元素排版不受限制

input表单的type的新值：

在form提交之前会进行检测，如果通过不了会出现提示框。eg：

      

    "email"  用户输入必须是email类型（可查看正则表达式）

    "url"        用户输入必须是网址类型 包含协议http或者https

    "date"     用户输入必须是日期类型，这里出现的是一个时间选择器

            

    "time"   用户输入必须是时间类型 （谷歌等不支持，opero支持时间选择器）

                一般浏览器 

                opera： （24小时制）

    "month"   月份选择器（只有opera支持，其他浏览区是普通的input）

              

    "week"   周选择器（同上支持）

              

    "number"    用户必须输入数字，出现任何非数字的字符都会被清空，只能是数字组成的字符串，不能有小数点之类的

    "range"    滑动条，有的浏览器默认滑动条在初始位置，有的在中间，有自己的max最大值和min最小值以及step属性

              

    ”search“   搜索框，和text差不多，可以加一个属性result=“n”来给搜索框加一个小图标（opera不支持）

                

    “color”    颜色选择器，打开系统的颜色选择器。

form表单元素的四个新属性：

      required = “required” 是指表单这个元素为必填选项。

      placeholder = “babababa” 默认值，用户不填不会被提交，以前是写在value里面，极为不合理，若不改变则会被提交

      autofocus = “autofocus” 表单自动聚焦功能

      pattern = “正则表达式” 码农不需要将正则写在js里面来验证，直接写在pattern里。

form表单新标签，自动完成表单： datalist

datalist标签，用option引'入相应的内容

       <input type="text" name="auto" value="" list="mylist"/>

       <datalist id="mylist">

                 <option>人在囧途</option>

                 <option>车在囧途</option>

                 <option>泰囧</option>

        </datalist>

    

form表单新标签，输出：output

<form οninput="result.value=num1.value*num2.value">//此处注意类型转换
         <input type="number" name="num1"/>

         <input type="number" name="num2"/>

         <output name="result"></output>

</form>