HTML5 form 元素 新增屬性


1.表單內元素的form 屬性

   在Html4中,表單內的從屬元素必須寫在表單內部,而在HTML5中,可以把它們書寫在頁面的任何地方,然后為該元素指定一個form屬性,屬性值為該表單的id。這樣九可以聲明該元素從屬於指定表單了。 

<form id="myform">
</form>
<input type="text" form="myform"/>

2.表單內元素的formaction屬性

   在HTML4中,一個表單內的所有元素只能通過表單的action屬性統一提交到另一個頁面,而在HTML5中可以為所有的提交按鈕。

<form id="myform" action="Index.aspx">
<input type="submit" value="提交到Index2" formaction="Index2.aspx"/>
<input type="submit" value="提交到Index3" formaction="Index3.aspx"/>
</form>

3.表單內元素的formmethod屬性

 在HTML4中,一個表單內只有一個action屬性用來對表單內所有元素統一指定提交頁面,所以每個表單內也只有一個method屬性來統一指定提交方法。在HTML5中,可以使用formmethod屬性來對每個表單元素分別指定不同的提交方法。

<form id="myform" action="Index.aspx">
 <input type="submit" value="Post提交" formmethod="POST"/>
<input type="submit" value="GET提交" formmethod="GET"/>
</form>

4.表單內元素的formenctype屬性

   在HTML4中,表單元素具有一個enctype屬性,該屬性用於指定在表單發送到服務器之前應該如何對表單內的數據進行編碼。

application/x-www-from-urlencoded:編碼方式把表單數據轉換成一個字符串形式?a=value1&b=value2&c=value3,然后把這個字符串價到提交的目標URL地址后面。該屬性為表單enctype屬性的默認屬性值。

multipart/form-data:不對字符編碼,在使用包含文件上傳控件的表單時,必須使用該值。

text/plain:對表單數據中的空格被轉換為"+",但不對表單數據中的特殊字符進行編碼。

    在HTML5中,可以使用formenctype屬性對表單元素分別指定不同的編碼方式。

<form id="myform" action="Index.aspx" method="Post">
 文件:<input type="file" name="files"/>
<input type="submit" value="上傳" formenctype="multipart/form-data" formaction="uploadFile.aspx"/>
</form>

5.表單內元素的formtarget屬性

 在HTML4中,表單元素具有一個target屬性,該屬性用於指定在何處打開表單提交后,所需要加載的頁面。

_blank:在新的瀏覽器窗口中打開。

_self:默認值,在相同的框架中打開。

_parent:在當前框架的父框架中打開。

_top:在當前瀏覽器窗口中打開。

framename:在指定的框架中打開。

  在HTML5中,可以對多個提交按鈕分別使用formtarget屬性來指定提交后在何處打開所需要加載的頁面。

<form id="myform" action="Index.aspx">
<input type="submit" name="s1" value="1" formtarget="_bank" formaction="Index2.aspx"/>
<input type="submit" name="s2" value="2" formtarget="_top"/>
</form>

6.表單內元素的autofocus屬性

  文本框、選擇框或按鈕加上autofocus屬性,當頁面打開時,該控件自動獲取光標焦點。

<input type="text" autofocus />

一個頁面上只能有一個控件具有autofocus屬性。

7.表單內元素的required屬性

   HTML5中新增的required屬性可以應用在大多數輸入元素上,在提交時,將驗證輸入內容是否合法,如果不合法則不允許提交,同時在瀏覽器顯示相應的提示信息。

8.表單內元素的labels屬性

   在HTML5中,為所有可使用label的表單元素,定義一個labels屬性,屬性值為一個NodeList對象,代表該元素所綁定的標簽元素構成的集合。

<script type="text/javascript">
var TxtName=document.getElementById("txt_name");
alert(TxtName.labels.length);
</script>
<
form id="myform" action="Index.aspx"> <label id="label1" for="txt_name">名字:</label> <input id="txt_name"> </form>

9.文本框的placeholder屬性

   placeholder是指當文本框處於微輸入狀態時顯示的輸入提示。

<input type="text" placeholder="提示輸入"/>

10.文本框的List屬性

     HTML5中,為<input type="text">增加了一個list屬性,該屬性的值為某個datalist的id。

datalist元素也是HTML5中新增的元素,該元素類似於選擇框(Select元素),但是當用戶想要設定的值不在選擇列表之內時,允許自行輸入。datalist元素本身並不顯示,而是當文本框獲取焦點時以提示輸入的方式顯示。

<input type="text" name="seach" list="dataList1"/>
<datalist id="dataList1" style="display:none;">
<option value="你好">你好</option>
<option value="早上">早上</option>
</datalist>

11.文本框的autocomplete屬性

    輔助輸入所用的自動完成功能,時一個即節省輸入時間又十分方便的功能。在HTML5之前,因為誰都可以看見輸入的值,所以在安全方面存在缺陷。對於autocomplete屬性,可以指定"on"、"off"與""(不指定)這三種值。在不進行指定時,使用瀏覽器的默認值。把該屬性設為on時,可以顯示指定候補輸入的數據列表。使用datalist元素與list屬性提供候補輸入的數據列表,在執行自動完成時,可以將該datalist元素中的數據作為候補輸入的數據在文本框中自動顯示。

<input type="text" autocomplete="on" list="greetings"/>

12.文本框的pattern屬性

    在HTML5中,對input元素使用pattern屬性,並且將屬性值設置某個格式的正則表達式時,在提交時會對這些進行檢查,檢查其內容是否符合給定格式。

<input type="text" pattern="[0-9][a-z]{3}" required="格式不符合"/>

13.文本框的selectionDirection屬性

    對input 元素和textarea 元素,HTML5增加了SelectionDirection屬性。當用戶在這兩個元素中用戶鼠標選取部分文字時,可以使用屬性來獲取選取方向。正向選取:forward,反向選取為:backward。

14.復選框的indeterminate屬性

    對復選框checkbox元素來說,過去只有選取與非選取兩種狀態。在HTML5中,可以在Javascript腳本代碼中對該元素使用indeterminate屬性,以說明復選框處於"尚未明確是否選取的狀態"。indeterminate屬性為boolean 類型 當為true 時,瀏覽器中的復選框將顯示為不明狀態。需要注意的時,indeterminate屬性與checked屬性時兩種不同的屬性。因此,在判斷復選框時,應該現判斷indeterminate屬性值,然后在判斷checked屬性值。

15.textarea元素的maxlength屬性與warp屬性

    maxlength屬性:使用整型數值進行設置,用於限定textarea元素中可輸入文字的個數。

    wrap屬性:可指定屬性值為soft與hard。當屬性值為hard時,如果向textarea元素中輸入文字個數超過使用textarea元素的cols屬性所限定的每行中可顯示文字個數導致文字換行,提交表單時會在換行處加入一個換行標志。當屬性值為soft時不加入換行標志。當設置wrap屬性值為hard時,必須指定cols屬性值。

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM