1.
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>
2.
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>
3.
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>
4.
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>