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

　form属性

formaction属性

formmethod属性

formenctype属性

formtarget属性

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>H5form</title>
 6 </head>
 7 <body>
 8     <div class="content">
 9         <form action="" id="testfrom">
10             <input type="text">
11         </form>
12         <textarea name="" id="" cols="30" rows="10" form="textarea">表单内元素的form属性</textarea>
13 
14         <p>formaction属性：将表单提交到不同的页面</p>
15         <form action="server.jsp">
16             <input type="submit" name="s1" value="v1" formaction="s1.jsp">提交到s1
17             <input type="submit" name="s2" value="v2" formaction="s2.jsp">提交到s2
18         </form>
19 
20         <p>formmethod属性：对每个表单元素指定不同的提交方法</p>
21         <form action="">
22             姓名：<input type="text" name="name" formmethod="post" value="post提交方式"><br>
23             <input type="submit" value="get提交方式" frommethod="get">
24         </form>
25 
26         <p>formenctype属性对表单元素分别指定不同的编码方式</p>
27         <input type="text" formenctype="multipart/form-data">
28 
29         <p>formtarget属性指定提交后在何处打开所需要加载的页面</p>
30         <p>autofocus属性：页面打开后，控件自动获取光标焦点（注意：一个页面只能有一个控件具有autofocus属性）</p>
31         <input type="text" autofocus>
32     </div>
33     <script>
34         
35     </script>
36 </body>
37 </html>

labels属性

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>labels属性</title>
 6 </head>
 7 <body>
 8    <form action="" id="testfrom">
 9        <label for="txt_name" id="label">姓名：</label>
10        <input type="text" id="txt_name">
11        <input type="button" id="btnValidate" value="验证">
12    </form>
13    <script>
14        var page = {
15             init : function(){
16                 this.bindEvent();
17             },
18             bindEvent : function(){
19                 var _this = this,
20                     button  = document.getElementById('btnValidate');
21                 button.onclick = function(){
22                     _this.validate();
23                 }
24             },
25             validate : function(){
26                 var txtName = document.getElementById('txt_name'),
27                     button  = document.getElementById('btnValidate'),
28                     form    = document.getElementById('testfrom');
29                 if(txtName.value.trim() === ''){
30                     if(txtName.labels.length === 1){
31                         var label=document.createElement('label');
32                         label.setAttribute('for', 'txt_name');
33                         form.insertBefore(label,button);
34                         txtName.labels[1].innerHTML='请输入姓名';
35                         txtName.labels[1].setAttribute(
36                             "style","font-size:9px; color:red"
37                         );
38                         txtName.setAttribute(
39                             "style","border:1px solid red"
40                         )
41                     }
42                 }
43                 else if(txtName.labels.length>1){
44                     form.removeChild(txtName.labels[1]);
45                      txtName.setAttribute(
46                             "style","border:1px solid #ccc"
47                         )
48                 }
49             }
50        }
51        window.onload = page.init();
52    </script>
53 </body>
54 </html>

label标签的control属性

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>label标签的control属性</title>
 6 </head>
 7 <body>
 8     <p>
 9         H5中,可以再标签label元素内部放置表单元素，并且通过该标签的control属性来访问该表单元素。
10         eg：通过label的control属性设置input的value
11     </p>
12     <form action="">
13         <label for="txt_zip" id="label">
14             邮编：
15             <input type="text" id="txt_zip" maxlength="6">
16             <small>请输入六位数字</small>
17         </label>
18         <input type="button" value="设置默认值" id="setValue">
19     </form>
20     <script>
21         var page = {
22             init : function(){
23                 this.bindEvent();
24             },
25             bindEvent : function(){
26                 var _this   = this,
27                     btn     = document.getElementById('setValue');
28                 btn.onclick = function(){
29                     _this.setValue();
30                 }
31             },
32             setValue : function(){
33                 var label     = document.getElementById('label'),
34                     textbox   = label.control;
35                 textbox.value = '123456';
36             },
37             //这里直接通过获取input id设置value值。
38             // setValue : function(){
39             //     var ipt = document.getElementById('txt_zip');
40             //     ipt.value = '123456';
41             // }
42         }
43         window.onload = page.init();
44     </script>
45 </body>
46 </html>

placeholder属性

autocomplete属性

pattern属性

SelectionDirection属性

复选框 indeterminate属性

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>text</title>
 6     <style>
 7         /* 设置placeholder样式 从 Firefox 19 开始将不再支持一个冒号的「:-moz-placeholder」伪元素，改成标准的两个冒号的「::-moz-placeholder」。今后若要兼容，开发者需要在CSS中同时书写两个伪元素。*/
 8 
 9         /* Firefox浏览器 */
10         input::-moz-placeholder{
11             color :blue;
12         }
13         /* 更早之前的Firefox浏览器版本 */
14         input:-moz-placeholder{
15             color :blue;
16         }
17         /* webkit系列浏览器 */
18         input::-webkit-input-placeholder{
19             color :blue;
20         }
21     </style>
22 </head>
23 <body>
24     <p>placeholder属性</p>
25     <input type="text" placeholder="input me">
26     <p>文本框的list属性,autocomplete属性</p>
27     <div class="list">
28         text: <input type="text" name="greeting" list="grreetings" autocomplete="on">
29         <datalist id="grreetings" style="display: none;">
30             <option value="12">12</option>
31             <option value="13">13</option>
32             <option value="14">14</option>
33         </datalist>
34     </div>
35     <p>pattern属性：设置正则表达式</p>
36     <form action="">
37         指定格式：<input type="text" pattern="^[0-9]{2,3}$" name=part>
38         <input type="submit">
39     </form>
40     <p>input,textarea的SelectionDirection:获取用户用鼠标选取文字时，该属性可以获取选取的方向</p>
41     <form action="">
42         <input type="text" name='text'>
43         <input type="button" value="click_me" id="SDBtn">
44     </form>
45     <div class="checkboxDiv">
46         <p>复选框具有选取，非选取，不明三种状态</p>
47         <input type="checkbox" indeterminate id='cb'>indeterminate Test
48     </div>
49     <script>
50         var page = {
51             init : function(){
52                 this.bindEvent();
53             },
54             bindEvent : function(){
55                 var SDBtn     = document.getElementById('SDBtn');
56                 SDBtn.onclick = function(){
57                     var control   = document.forms[1]['text'],
58                         Direction = control.selectionDirection;
59                     alert(Direction);
60                 }
61 
62                 var cb = document.getElementById('cb');
63                 cb.indeterminate = true;
64                 // cd.checked       = true;
65                 //检测复选框状态
66                 if(cb.indeterminate){
67                     alert("不明状态");
68                 }
69                 else if(cb.checked){
70                     alert("选取状态");
71                 }
72                 else{
73                     alert("非选取状态");
74                 }
75 
76             }
77         }
78         window.onload = page.init();
79     </script>
80 </body>
81 </html>