這篇“對HTML5中表單新增屬性的示例分析”文章，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要參考一下，對于“對HTML5中表單新增屬性的示例分析”，小編整理了以下知識點，請大家跟著小編的步伐一步一步的慢慢理解，接下來就讓我們進入主題吧。

遠安網(wǎng)站建設(shè)公司創(chuàng)新互聯(lián)公司,遠安網(wǎng)站設(shè)計制作，有大型網(wǎng)站制作公司豐富經(jīng)驗。已為遠安成百上千家提供企業(yè)網(wǎng)站建設(shè)服務。企業(yè)網(wǎng)站搭建\成都外貿(mào)網(wǎng)站制作要多少錢，請找那個售后服務好的遠安做網(wǎng)站的公司定做！

html有什么特點

1、簡易性：超級文本標記語言版本升級采用超集方式，從而更加靈活方便，適合初學前端開發(fā)者使用。 2、可擴展性：超級文本標記語言的廣泛應用帶來了加強功能，增加標識符等要求，超級文本標記語言采取子類元素的方式，為系統(tǒng)擴展帶來保證。  3、平臺無關(guān)性：超級文本標記語言能夠在廣泛的平臺上使用，這也是萬維網(wǎng)盛行的一個原因。 4、通用性：HTML是網(wǎng)絡的通用語言，它允許網(wǎng)頁制作人建立文本與圖片相結(jié)合的復雜頁面，這些頁面可以被網(wǎng)上任何其他人瀏覽到，無論使用的是什么類型的電腦或瀏覽器。

1. 表單內(nèi)元素的form屬性

在H5中可以把form放到頁面的任何地方，然后為該元素指定一個form屬性，屬性值為該表單的id,這樣就可以聲明該元素從屬于指定表單了

2. 表單內(nèi)元素的formaction屬性

在H4中，表單的提交方式

提交整個表單

在H5中，可以為表單的每一個屬性添加提交到的jsp頁面

     提交到1頁面
     提交到2頁面
     提交到3頁面
    

3. 表單內(nèi)元素的formmethod屬性

可以對表單的每一個元素指定提交方法

     提交到1頁面,post提交方法
     提交到2頁面，get提交方法
    

4. 表單內(nèi)元素的formenctype屬性

同上，作用與每一個元素，代碼略

5. 表單的formtarget屬性

同上，作用與每一個元素，代碼略

6.元素的autofocus屬性

為文本框、選擇框和按鈕控件等加上autofocus屬性，畫面打開時，將自動獲得焦點。

提交到3頁面

一個頁面上只能有一個控件具有autofocus屬性，不能濫用

7. required屬性

可以用在大多數(shù)輸入用的元素，若輸入的值為空則不允許提交，游覽器顯示文字信息提示用戶必須輸入內(nèi)容。

8. labels屬性

可為表單所有元素添加一個lables屬性，屬性值為一個NodeList對象，代表該元素所綁定的標簽元素所構(gòu)成的集合。

        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]);
                }
        }
 
     
     姓名：
     
     
    

當用戶不輸入任何值時，單擊驗證，文本框旁邊會動態(tài)的添加一個標簽元素，標簽元素為“請輸入姓名”；當用戶在文本框中有輸入時，文字為“請輸入姓名”的標簽將被刪除。

9. 標簽的control屬性

可以在標簽（label）內(nèi)部放置一個表單元素，并通過該標簽的control屬性來訪問該表單元素。

        function setValue() {
         console.log(1);
         var label =document.getElementById("label");
         var textbox = label.control;
         textbox.value = "231456"
        }
         
             

     
      郵編：
      
      請輸入6位數(shù)字
     
     
    

在游覽器中打開頁面，單擊“設(shè)置默認值”按鍵，文本框中會顯示231456.

10. 文本框的placeholder屬性

當文本框（text或者textarea）處于為選擇狀態(tài)時輸入提示信息(灰色)

11. 文本框的list屬性

結(jié)合h6新增的datalist元素，制作提示框

text:
    
    
     你是人
     你是豬
     你是狗
    

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

12. 文本框的autocomplete屬性

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

當你在文本框內(nèi)輸入如“我是人”點擊提交后，返回前一頁，再在文本框中輸入“我”，就會出線提示“我是人”。

13. 文本框的pattern屬性

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

請輸入內(nèi)容：

此段代碼要求輸入一個數(shù)字三個大寫字母，如果輸入不正確，則出現(xiàn)“請與所要求的內(nèi)容保持一致（谷歌）”的提示。

14. 文本框的selectionDirection屬性

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

        function alertSelectionDirection() {
         var control = document.forms[0]['text'];
         var Direction = control.selectionDirection;
         alert(Direction);
        }
 
 

     
     
        

15. 復選框的indeterminate屬性

對于復選框來說，過去只有選取和與非選取狀態(tài)，html5中，可以在js中對該元素使用indeterminate屬性，以說明復選框“尚未明確選取”狀態(tài)。

  
        indeterminate屬性測試

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

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

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

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

• maxlength :使用整數(shù)值進行設(shè)定，用于限定textarea元素中可輸入文字的個數(shù)。

• wrap:可指定屬性值為soft與hard.當屬性為hard時，在沒有用回車鍵而是文字超出一排規(guī)定范圍而自動換行時，提交表單時會在換行處添加一個換行標志。

以上是“對HTML5中表單新增屬性的示例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學習更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！