H5_ 表单及其他新增和改良元素

1.

　form属性

formaction属性

formmethod属性

formenctype属性

formtarget属性

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>H5form</title>
 </head>
 <body>
     <div class="content">
         <form action="" id="testfrom">
             <input type="text">
         </form>
         <textarea name="" id="" cols="30" rows="10" form="textarea">表单内元素的form属性</textarea>

         <p>formaction属性：将表单提交到不同的页面</p>
         <form action="server.jsp">
             <input type="submit" name="s1" value="v1" formaction="s1.jsp">提交到s1
             <input type="submit" name="s2" value="v2" formaction="s2.jsp">提交到s2
         </form>

         <p>formmethod属性：对每个表单元素指定不同的提交方法</p>
         <form action="">
             姓名：<input type="text" name="name" formmethod="post" value="post提交方式"><br>
             <input type="submit" value="get提交方式" frommethod="get">
         </form>

         <p>formenctype属性对表单元素分别指定不同的编码方式</p>
         <input type="text" formenctype="multipart/form-data">

         <p>formtarget属性指定提交后在何处打开所需要加载的页面</p>
         <p>autofocus属性：页面打开后，控件自动获取光标焦点（注意：一个页面只能有一个控件具有autofocus属性）</p>
         <input type="text" autofocus>
     </div>
     <script>

     </script>
 </body>
 </html>

2.

labels属性

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>labels属性</title>
 </head>
 <body>
    <form action="" id="testfrom">
        <label for="txt_name" id="label">姓名：</label>
        <input type="text" id="txt_name">
        <input type="button" id="btnValidate" value="验证">
    </form>
    <script>
        var page = {
             init : function(){
                 this.bindEvent();
             },
             bindEvent : function(){
                 var _this = this,
                     button  = document.getElementById('btnValidate');
                 button.onclick = function(){
                     _this.validate();
                 }
             },
             validate : function(){
                 var txtName = document.getElementById('txt_name'),
                     button  = document.getElementById('btnValidate'),
                     form    = document.getElementById('testfrom');
                 if(txtName.value.trim() === ''){
                     if(txtName.labels.length === 1){
                         var label=document.createElement('label');
                         label.setAttribute('for', 'txt_name');
                         form.insertBefore(label,button);
                         txtName.labels[1].innerHTML='请输入姓名';
                         txtName.labels[1].setAttribute(
                             "style","font-size:9px; color:red"
                         );
                         txtName.setAttribute(
                             "style","border:1px solid red"
                         )
                     }
                 }
                 else if(txtName.labels.length>1){
                     form.removeChild(txtName.labels[1]);
                      txtName.setAttribute(
                             "style","border:1px solid #ccc"
                         )
                 }
             }
        }
        window.onload = page.init();
    </script>
 </body>
 </html>

3.

label标签的control属性

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>label标签的control属性</title>
 </head>
 <body>
     <p>
         H5中,可以再标签label元素内部放置表单元素，并且通过该标签的control属性来访问该表单元素。
         eg：通过label的control属性设置input的value
     </p>
     <form action="">
         <label for="txt_zip" id="label">
             邮编：
             <input type="text" id="txt_zip" maxlength="6">
             <small>请输入六位数字</small>
         </label>
         <input type="button" value="设置默认值" id="setValue">
     </form>
     <script>
         var page = {
             init : function(){
                 this.bindEvent();
             },
             bindEvent : function(){
                 var _this   = this,
                     btn     = document.getElementById('setValue');
                 btn.onclick = function(){
                     _this.setValue();
                 }
             },
             setValue : function(){
                 var label     = document.getElementById('label'),
                     textbox   = label.control;
                 textbox.value = '123456';
             },
             //这里直接通过获取input id设置value值。
             // setValue : function(){
             //     var ipt = document.getElementById('txt_zip');
             //     ipt.value = '123456';
             // }
         }
         window.onload = page.init();
     </script>
 </body>
 </html>

4.

placeholder属性

autocomplete属性

pattern属性

SelectionDirection属性

复选框 indeterminate属性

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>text</title>
     <style>
         /* 设置placeholder样式 从 Firefox 19 开始将不再支持一个冒号的「:-moz-placeholder」伪元素，改成标准的两个冒号的「::-moz-placeholder」。今后若要兼容，开发者需要在CSS中同时书写两个伪元素。*/

         /* Firefox浏览器 */
         input::-moz-placeholder{
             color :blue;
         }
         /* 更早之前的Firefox浏览器版本 */
         input:-moz-placeholder{
             color :blue;
         }
         /* webkit系列浏览器 */
         input::-webkit-input-placeholder{
             color :blue;
         }
     </style>
 </head>
 <body>
     <p>placeholder属性</p>
     <input type="text" placeholder="input me">
     <p>文本框的list属性,autocomplete属性</p>
     <div class="list">
         text: <input type="text" name="greeting" list="grreetings" autocomplete="on">
         <datalist id="grreetings" style="display: none;">
             <option value="12">12</option>
             <option value="13">13</option>
             <option value="14">14</option>
         </datalist>
     </div>
     <p>pattern属性：设置正则表达式</p>
     <form action="">
         指定格式：<input type="text" pattern="^[0-9]{2,3}$" name=part>
         <input type="submit">
     </form>
     <p>input,textarea的SelectionDirection:获取用户用鼠标选取文字时，该属性可以获取选取的方向</p>
     <form action="">
         <input type="text" name='text'>
         <input type="button" value="click_me" id="SDBtn">
     </form>
     <div class="checkboxDiv">
         <p>复选框具有选取，非选取，不明三种状态</p>
         <input type="checkbox" indeterminate id='cb'>indeterminate Test
     </div>
     <script>
         var page = {
             init : function(){
                 this.bindEvent();
             },
             bindEvent : function(){
                 var SDBtn     = document.getElementById('SDBtn');
                 SDBtn.onclick = function(){
                     var control   = document.forms[1]['text'],
                         Direction = control.selectionDirection;
                     alert(Direction);
                 }

                 var cb = document.getElementById('cb');
                 cb.indeterminate = true;
                 // cd.checked       = true;
                 //检测复选框状态
                 if(cb.indeterminate){
                     alert("不明状态");
                 }
                 else if(cb.checked){
                     alert("选取状态");
                 }
                 else{
                     alert("非选取状态");
                 }

             }
         }
         window.onload = page.init();
     </script>
 </body>
 </html>