1. 表單內元素的form屬性
在H5中可以把form放到頁面的任何地方,然后為該元素指定一個form屬性,屬性值為該表單的id,這樣就可以聲明該元素從屬于指定表單了
<form id="testform"> <input type="text"> </form> <textarea form="testform"></textarea> |
2. 表單內元素的formaction屬性
在H4中,表單的提交方式
<form action="1.jsp"></form> |
提交整個表單
在H5中,可以為表單的每一個屬性添加提交到的jsp頁面
<form action="1.jsp"> <input type="submit" action="1-1.jsp">提交到1頁面</form> <input type="submit" action="1-2.jsp">提交到2頁面</form> <input type="submit" action="1-3.jsp">提交到3頁面</form> </form> |
3. 表單內元素的formmethod屬性
可以對表單的每一個元素指定提交方法
<form action="1.jsp"> <input type="submit" action="1-1.jsp" formmethod="post">提交到1頁面,post提交方法</form> <input type="submit" action="1-2.jsp" formmethod="get">提交到2頁面,get提交方法</form> </form> |
4. 表單內元素的formenctype屬性
同上,作用與每一個元素,代碼略
5. 表單的formtarget屬性
同上,作用與每一個元素,代碼略
6.元素的autofocus屬性
為文本框、選擇框和按鈕控件等加上autofocus屬性,畫面打開時,將自動獲得焦點。
<input type="text" action="1-3.jsp" autofocus>提交到3頁面</form> |
一個頁面上只能有一個控件具有autofocus屬性,不能濫用
7. required屬性
可以用在大多數輸入用的元素,若輸入的值為空則不允許提交,游覽器顯示文字信息提示用戶必須輸入內容。
8. labels屬性
可為表單所有元素添加一個lables屬性,屬性值為一個NodeList對象,代表該元素所綁定的標簽元素所構成的集合。
<script type="text/javascript"> window.onload = function () { var text = document.getElementById('text'); var btn = document.getElementById('btn'); var form = document.getElementById('form'); btn.onclick = function() { if (text.value.trim() =="") { //alert(text.labels.length) if(text.labels.length==1) { var label = document.createElement("label"); label.setAttribute("for","text"); form.insertBefore(label,btn); text.labels[1].innerHTML = "請輸入姓名"; text.labels[1].setAttribute( "style","font-size:9px;color:red"); } } else if(text.labels.length>1) form.removeChild(text.labels[1]); } } </script> <form id="form"> <label id="label" for="text">姓名:</label> <input id="text"> <input id="btn" type="button" value="驗證"> </form> |