HTML5表格：新控件

HTML5引入了五個新的形式元素：<datalist></datalist>>，<output></output>，<keygen></keygen>，<progress></progress>，<meter></meter>和

，每個都有獨特的目的。 >

> <meter></meter>元素充當量規，以視覺表示指定範圍內的值。 至關重要的是，它缺乏name屬性，並且未與表格提交。 最小值默認值為0或儀表的值（以較低為準），最大默認值為1或儀表的值（以較高為準）。

>

元素使用<progress></progress>>和max>屬性顯示任務完成百分比。 它作為部分填充的棒，從灰色（0％）到藍色（100％）。 省略的value導致不確定的進度指示器（通常是動畫欄或點）。 value>

>

元素顯示計算的結果，當用戶查看但不直接操縱該值時，理想的結果是理想的。 其價值來自其他表單字段，並以表格提交。 JavaScript通常會動態更新此值。 <output></output> （摘自“現實世界的HTML5＆CSS3”，Alexis Goldstein，Louis Lazaris和Estelle Weyl的“ HTML5＆CSS3，第二版”。

我們已經探索了新的

屬性和常見的表單元素屬性。 但是，HTML5提供更多！讓我們回顧一下和，然後檢查

和

。 input type>。 <progress></progress><meter></meter>和<keygen></keygen> elements <output></output>

>創建一個量規，該規格顯示一個範圍內的值（使用<progress></progress>>，<meter></meter>和

）。 與許多數字輸入不同，它沒有

屬性，也沒有提交。最小默認值為0或<meter></meter>>，最大為1或1或min。將其用於波動的值（例如測試分數，燃料水平）。 支持的瀏覽器（Android 4.4，但不是ios7或IE11）顯示一個顏色編碼的量規（基於價值範圍的黃色，綠色，紅色）。 max> valuename不應表明進度；而是使用value。 value>使用

和

顯示任務完成（0-100％）。瀏覽器計算並顯示該百分比為欄。 未指定的<meter></meter>創建一個不確定的進度指標。 與<progress></progress>不同，<progress></progress>僅朝max增加。 它默認為value，允許寬度和高度調整（高度會影響間距，而不是條高）。

<output></output>元素

<output></output>顯示計算結果，用戶可見，但不能直接編輯。 它的值通常通過JavaScript更新，是從其他表單字段得出的，並隨表單提交。 for屬性將其鏈接到相關的輸入字段。

>

<keygen></keygen>>生成公私鑰匙對，提交公鑰。 支持隨瀏覽器（Opera，Chrome，Safari，Android，Firefox支持）而有所不同，但不是IOS7或IE11）。 challenge>和keytype（當前僅rsa）是其屬性。

>

contenteditable屬性

對於標準形式元素不足的情況（例如，wysiwyg編輯器），

>屬性（或contenteditable）使任何元素可編輯。 雖然未自動提交，但JavaScript可以處理服務器端提交。 這通常在可編輯的配置文件中可以看出。 添加contenteditable="true"使一個元素及其後代可編輯（除非明確設置為contenteditable）。 客戶端DOM更新需要JavaScript來保存。 contenteditable="false"

更改現有表單控件

元素<form></form>

> html5用：

增強<form></form>（未經本機驗證的提交），省略novalidate（默認為當前頁面）和action>（特定提交按鈕的Overridesformaction）。 action也可以直接應用於autocomplete元素。 <form></form>>

元素<optgroup></optgroup>

html5允許嵌套

多級選擇菜單的元素。 <optgroup></optgroup>

元素<textarea></textarea> 不再需要

's <textarea></textarea>和rowscols屬性（使用CSS進行尺寸）。 wrap屬性（值：soft或hard）控制線路斷裂。

>

結論

這涵蓋了許多HTML5形式增強功能。 越來越多的瀏覽器支持減少了JavaScript的依賴，以驗證和UI改進。雖然傳統瀏覽器持續存在，但建議使用適當的多填充表格採用HTML5表格。 下一章探討了HTML5的視頻和音頻功能。

>

常見問題（常見問題解答）

（FAQS部分保持不變，因為它準確地反映了原始文本中介紹的信息。都適當地解決並與所提供的文本一致。 因此，在這裡重現它們將是多餘的。

>

以上是HTML5表格：新控件的詳細內容。更多資訊請關注PHP中文網其他相關文章！