對HTML5中表單新增屬性的分析

本文主要針對HTML5表單新增屬性進行詳細介紹，並附上實例解析，簡單易懂。需要的朋友一起來看下吧

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(&#39;text&#39;);
            var btn = document.getElementById(&#39;btn&#39;);
            var form = document.getElementById(&#39;form&#39;);
            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>

當使用者不輸入任何值時，按一下驗證，文字方塊旁邊會動態的新增標籤元素，標籤元素為「請輸入姓名」；當用戶在文字方塊中有輸入時，文字為「請輸入姓名」的標籤將會被刪除。

9. 標籤的control屬性

可以在標籤（label）內部放置一個表單元素，並透過該標籤的control屬性來存取該表單元素。

<script type="text/javascript">
        function setValue() {
         console.log(1);
         var label =document.getElementById("label");
         var textbox = label.control;
         textbox.value = "231456"
        }
         </script>
             <form>
     <label id="label">
      邮编：
      <input id="txt_zip" maxlength="6">
      <small>请输入6位数字</small>
     </label>
     <input type="button" value="设置默认值" onclick="setValue()">
    </form>

在遊覽器中開啟頁面，點選「設定預設值」按鍵，文字方塊中會顯示231456.

10.文字方塊的placeholder屬性

當文字方塊（text或textarea）處於為選擇狀態時輸入提示訊息(灰色)

##

<input type="text" palceholder="hahah">

#11. 文字方塊的list屬性

結合h5新增的datalist元素，製作提示框

text:<input type="text" name="greeting" list="greetings">
    <!-- 使用style="display:none";将datalist元素设置为不显示 -->
    <datalist id="greetings" style="display:none">
     <option value="你是人">你是人</option>
     <option value="你是猪">你是猪</option>
     <option value="你是狗">你是狗</option>
    </datalist>

當你在文字框中輸入“你”時，下面會出現三欄提示“你是人”、“你是豬”、“你是狗”，沒有關鍵字將不出現提示

12. 文本框的autocomplete屬性

autocomplete有三種值"on"、"off"、""（不指定）。不進行指定時，請使用遊覽器的預設值。使用方法如下

<input type="text" name="greeting" list="greetings" autocomplete="on">

當你在文字方塊內輸入如“我是人”點擊提交後，返回前一頁，再在文字方塊中輸入“我” ，就會出線提示「我是人」。

13. 文字方塊的pattern屬性

相當於直接在html部分用正規表示式判斷值輸入是否符合要求。

請輸入內容：

此段程式碼要求輸入一個數字三個大寫字母，如果輸入不正確，則出現“請與所要求的內容保持一致（Google）”的提示。

14. 文字方塊的selectionDirection屬性

針對input的text和textarea元素，當使用者在這兩個元素中用滑鼠選取部分文字時，可以使用此元素來取得選擇方向。

<script type="text/javascript">
        function alertSelectionDirection() {
         var control = document.forms[0][&#39;text&#39;];
         var Direction = control.selectionDirection;
         alert(Direction);
        }
 </script>
 <form>
     <input type="text" name="text">
     <input type="button" value="惦记我" onclick="alertSelectionDirection()" >
        </form>

15. 複選框的indeterminate屬性

對於複選框來說，過去只有選取和與非選取狀態，html5中，可以在js中對該元素使用indeterminate屬性，以說明複選框「尚未明確選取」狀態。

  <script>
        var cb = document.getElementById("cb");
        //将indeterminate的属性设置为true
        cb.indeterminate = true;
        </script>
        <input type="checkbox" indeterminate id="cb">indeterminate属性测试

16.image提交按鈕的height屬性與width屬性

• height:指定圖片按鈕中圖片的高度；

• width:指定圖片按鈕中圖片的寬度；

##

<input type="image" src="img/2.png" width="23" height="23">

17. textarea元素的maxlength屬性與wrap屬性

#maxlength :使用整數值進行設定，用於限定textarea元素中可輸入文字的個數。
wrap:可指定屬性值為soft與hard.當屬性為hard時，在沒有用回車鍵而是文字超出一排規定範圍而自動換行時，提交表單時會在換行處加上一個換行標誌。

• #

以上是對HTML5中表單新增屬性的分析的詳細內容。更多資訊請關注PHP中文網其他相關文章！