html5-表单

html5   表单

          <input> html5新增类型

                       邮件输入框          <input type="email">        输入E-mail地址的文本框

                                                   在表单提交前，并不检查"email"类型的文本框内容是否为空；而是在不为空的情况                                                        下，检查其内容是否符合标准的E-mail 格式；如果将multiple=true,则允许用户输入一                                                    串用逗号分隔的E-mail地址                                                    

                       web地址输入框    <input type="url">            输入URL地址的文本框

                                                     可以有效检测并不判断输入框的内容是否为空，而是针对非空内容进行检测  

                      数字输入框            <input type="number">    输入数字的文本框，可以设置输入值的范围

                                                    在页面中以输入框加微调控件显示max,min,step,value ,step 表示步长，默认值为1，                                                     如不需要上限，则可不设置max

                      数字滑动条            <input type="range">       通过拖动滑动条改变一定范围内的数字

                                                     在页面中以滑动条展示数字，通过滑动实现数字的改变

                      日期选择器            <input tpe="date">            选择日期(包括年，月，日星期)的文本框

                                                    展示类型："date" "time";"month" "week";"datetime" "datetime-local"

                      搜索输入框            <input type="search">      输入搜索关键字操作的文本框

                      ps:目前，上述控件只能在Opera浏览器可以很好的支持，其它浏览器只能显示常规的文本框

input 公共属性

                     autofocus   <input autofocus="true">   页面加载完后，光标是否自动锁定<input>元素，即是否使元素                                           自动获取元素(但是需要通过按空格键滚动页面时，而焦点还在表单的输入文本框，因此，                                            输入的空格只能显示在文本内，并不能实现页面的滚动)

                      pattern      <input pattern="正则表达式">   使用正则表达式验证<input>元素的内容，是<input>元素的                                           验证属性，使用该属性中的正则表达式，可以验证文本输入框中的内容。

                      placeholder  <input placeholder="默认内容">  设置文本输入框中的默认内容；成为“占位”属性，其属性                                            值称为“占位文本”，显示在文本框中的提示信息，当输入框获取焦点时，该提示自动消                                                  失，当输入框失去焦点时,提示又重新显示

                      requireed     <input required="true">    是否检测文本输入框中的内容是否为空

                      novalidate    <input novalidate="true">  是否验证文本输入框中的内容

 

新增表单元素                         

           <datalist>  是html5新增元素，该元素的功能是辅助表单中文本框的数据输入。<datalist>本身是隐藏的，与表                                单文本框的"list"属性绑定，即将"list"属性值设置为<datalist>元素的"id"号，绑定成功后，用户单击                                文本框准备输入内容时。当用户选中列表中的某个选项后，<datalist>元素将自动隐藏，同时，文                                本框显示所选择的内容。

         

<input type="text" list="isWork" />
<datalist id="isWork">
  <option>程序开发员</option>
  <option>系统架构师</option>
  <option>数据维护员</option>
</datalist>

                       (chrome 点击选择某项后，文本框中显示选中的，后面有一个小三角，而IE，选择后，文本框显示选                             择的，后面出现 叉号)

            output   是html5新增元素,该元素必须从属于某个表单，或通过属性指定某个表单，该元素的功能是在页面中                            显示不同类型表单元素的内容；为了获取需要的值，需要设置<output> 元素的"onFormInput"事                              件。在表单输入框中录入内容，触发该事件，从而十分方便的实时观察到表单中各元素的输入内容。

<input id="num1" type="number"/>*<input id="num2" type="number"/> = 
<output onFormInput="value=num1.value*num2.value"></output>

           

              keygen  是html5新增元素，用于生成页面的密钥。一般情况下，如果在表单中创建该元素，在表单提交时，                            该元素将生成一对密钥：一个保存在客户端，称为私密钥，另一个发送至服务器，有服务器进行保                              存，称为公密钥，公密钥可以用于客户端证书的验证。

验证方法及属性

           

             checkValidity  显示验证法   表单中的各个元素除了可以利用pattern,required 进行验证，还可以通过一个公用                                    方法checkValidity(),判断是否与验证条件匹配，如果一致，返回true,否则，返回false.开发人员                                       可以编写js代码调元素的该方法，将验证结果显示出来，因此，这种方法又称为”显示验法“。

             setCustomValidity  在表单与相应规则验证时，由于使用的是系统内置的验证方法，因此，出错提示信息也是                                            由系统自带的，一般情况下不能进行修改。但有时，为了与系统出错信息的格式一致，需                                            要修改验证出错信息内容，实现的方法是调用元素或表单的setCustomValidity()方法，该                                              方法括号中的内容就是修改后的错误提示信息

                                           $("#id").setCustomValidity("x,两次密码输入不一致");

             novalidate     用于取消表单全部元素的验证，在表单提交时，通常需要逐个验证元素的内容是否与既定的规                                     则一致，如果所有元素都相符，才能进行表单的提交，否则，提示出错信息。但有时，并不需                                    要元素进行验证，这时，如果是单个元素，可以动态设置其验证方法，但如果是表单，设置该                                      属性来实现（不仅表单具有该属性，大部分的文本输入框元素 tex,search,url,email等都支持该属                                  性）