HTML5表格：標記-js教程-PHP中文網

HTML5表格：標記

鑰匙要點

HTML5引入了一系列新的輸入類型和表格的屬性，包括電子郵件，電話，URL，搜索，數字，範圍，日期，日期，日期，日期，日期，日期，月份，每月，週，週，時間和顏色，可提供本機輸入沒有任何JavaScript代碼的協助和驗證。
> HTML5提供僅讀取的輸出選項，包括輸出（計算或用戶操作的結果），進度（進度欄）和儀表（根據屬性設置的值可以在顏色之間更改顏色之間的比例）。它還可以使用在輸入本身附近或旁邊的標籤元素，並帶有表示輸入ID的屬性。

這是有關HTML5 Web表單的三部分系列中的第一個。在進行樣式和客戶端JavaScript驗證API之前，我們將介紹本文中的基本標記。我建議您閱讀此書，即使您已經熟悉表格 - 有許多新屬性和陷阱！ HTML表格可能是平凡的，但對於大多數網站和應用程序至關重要。在HTML4中，輸入字段僅限於：

輸入type =“ text”

輸入type =“複選框”
>輸入type =“無線電”
>輸入type =“密碼”
>輸入type =“隱藏” - 對於數據，用戶無法查看
>輸入type =“ file” - 用於上傳
textarea-對於更長的文本條目
選擇 - 用於下拉列表
>按鈕 - 通常用於提交表單，儘管輸入類型=“提交”和輸入類型=“ image”。
還：

> CSS樣式的可能性有限，

>客戶端驗證必需的JavaScript。

其他HTML5輸入類型

已經引入了大量新輸入類型。這些提供本機輸入幫助和驗證，沒有任何JavaScript代碼…
> type 描述電子郵件輸入電子郵件地址電話輸入電話號碼 - 沒有執行嚴格的語法，但將刪除線路斷路 URL 輸入URL 搜尋帶有線斷裂的搜索字段自動刪除數字浮點號範圍輸入近似值的控件，通常由滑塊表示日期輸入一天，月和年 DateTime 根據當前的UTC時區輸入日，月，年，小時，分鐘，第二和微秒 DateTime-Local 輸入沒有時區的日期和時間月輸入沒有時區的月份和年度星期輸入沒有時區的一周號碼時間輸入沒有時區的時間顏色指定顏色

>輸入屬性

除非另有說明，否則輸入字段可以具有以下任何特定表格特定屬性。幾個是布爾屬性，也就是說，它們不需要值，例如

<span><span><span><input</span> type<span>="email"</span> name<span>="email"</span> required /></span></span>

登入後複製

雖然可以添加它們，如果您喜歡更嚴格的XHTML式語法，例如

<span><span><span><input</span> type<span>="email"</span> name<span>="email"</span> required<span>="required"</span> /></span></span>

登入後複製

屬性描述姓名輸入字段名稱價值初始值檢查檢查復選框或無線電輸入最大長度輸入字符串的最大長度。這也可以應用於HTML5中的TextArea字段最小長度輸入字符串的最小長度。這是記錄的，但是在撰寫本文時，瀏覽器支持很差，屬性會導致HTML驗證器出錯。替代選項是模式=“。{3，}“這將至少執行三個字符。佔位符輸入框中顯示的微妙文字提示自動對焦當頁面加載時，將重點設置為（非隱藏）字段必需的表示必須輸入值圖案確保價值遵守正則表達式最小允許的最小值（數字和日期類型）最大限度允許的最大值（數字和日期類型）步價值粒度。例如，輸入類型=“ number” min =“ 10” max =“ 19”步驟=“ 2”僅允許值10、12、14、16或18。自動完成為瀏覽器提供了用於自動完成的提示，例如“計費電子郵件”，也可以設置為“ ON”或“ OFF”以相應啟用和禁用輸入模式指定輸入機制。最有用的選項：

逐字 - 非物品內容，例如用戶名

拉丁 - 拉丁腳本（例如搜索字段）

拉丁名稱 - 名稱，即帶有首字母大寫字母

>拉丁文 - 散文內容，例如消息，推文等。

數字 - 數字輸入，其中數字或範圍是不合適的，例如信用卡號

尺寸文本或密碼輸入或像素的字符大小，用於電子郵件，TEL，URL或搜索輸入。最好避免使用CSS來樣式場。行文本行的數量（僅限文本）科爾斯文本列的數量（僅限文本）列表指向設置的數據師選項拼寫檢查設置為true或false以啟用或禁用拼寫檢查形式此輸入屬於的形式的ID。通常，輸入應嵌套在表單中，但是此屬性允許在頁面上任何地方定義輸入形式指定URI提交時覆蓋表單操作（僅提交按鈕/圖像） formMethod 提交時指定或發布以覆蓋表單方法（僅提交按鈕/圖像） formenctype 提交時指定內容的類型（文本/平原，多部分/form-data或應用程序/x-www-form-urlCorm-urlCoded僅在提交按鈕/圖像上）格式提交時指定目標窗口/框架以覆蓋表單目標（僅提交按鈕/圖像）可讀儘管將驗證和提交輸入值，但無法更改輸入值禁用禁用輸入 - 不會進行驗證，並且不會提交數據
請注意，日期字段必須始終使用yyyy-mm-dd進行價值，min和max 屬性。
以下示例請求一條強制性電子郵件，該電子郵件在 @mysite.com上結束，並且在頁面加載時重點是：

<span><span><span><input</span> type<span>="email"</span> name<span>="email"</span> required /></span></span>

登入後複製

數據師

數據學家為任何類型的輸入包含一組合適的選項，例如

<span><span><span><input</span> type<span>="email"</span> name<span>="email"</span> required<span>="required"</span> /></span></span>

登入後複製

當支持數據庫時，當您開始鍵入時，瀏覽器會呈現自動完成選項。如果雙擊控件或單擊向下箭頭，通常會顯示整個列表（如果顯示）。與標準選擇的下拉菜單不同，用戶可以自由覆蓋這些選擇並輸入自己的價值。可以設置值和文本，例如標準選擇選項，例如

<span><span><span><input</span>
</span></span><span>  <span>type<span>="email"</span>
</span></span><span>  <span>name<span>="login"</span>
</span></span><span>  <span>pattern<span>="@mysite\.com$"</span>
</span></span><span>  <span>autocomplete<span>="email"</span>
</span></span><span>  <span>autofocus
</span></span><span>  <span>required /></span></span>

登入後複製

但是請注意，實現不同。例如，文本本身（Internet Explorer）上的Firefox自動填充時，Chrome更喜歡該值（IE）並顯示出灰色的文字：
HTML5表格：標記

如果您想通過AJAX檢索選項，則數據師可以由JavaScript填充。

禁用驗證

可以通過在表單元素上設置一個Novalidate屬性來禁用整個表單的驗證。另外，您可以在表單的提交按鈕/圖像上設置formnaloalication屬性。還請記住，設置輸入的殘疾屬性將阻止該字段驗證。

>輸出字段

雖然我們主要討論輸入類型，但HTML5還提供只讀輸出選項：

>輸出 - 計算或用戶操作的結果
進度 - 進度欄（值和最大屬性定義狀態）
米 - 可以根據屬性值設置的值，最小，最大，低，高和最佳

分開和標記輸入

whatwg.org表格指出：

表格的每個部分都被視為段落，通常使用
元素與其他部分分開有趣的。我通常使用DIV，儘管我懷疑從語義的角度重要。 p標籤較短，儘管您可能需要應用課程來修改利潤率。更重要的是，您應該使用輸入本身附近或旁邊的標籤元素，並使用屬性表示輸入的ID，例如

<span><span><span><input</span> type<span>="email"</span> name<span>="email"</span> required /></span></span>

登入後複製

沒有標準控件

沒有供瀏覽器供應商遵循的特定接口準則。這是有意的：典型的桌面鼠標控制的日期選擇器在移動設備上可能太小，因此供應商可以實現基於觸摸的替代方案。

>瀏覽器支持

並非所有瀏覽器中都支持所有輸入類型和屬性。通常，來自IE10的大多數現代瀏覽器都包含電子郵件和編號等基礎知識。但是，僅在撰寫本文時，僅在Webkit和眨眼瀏覽器中支持日期類型。當不支持這些值時，當特定類型並忽略屬性時，瀏覽器將恢復為標准文本輸入。

始終使用正確的類型！

> 使用正確的輸入類型來進行您要求的數據很重要。這似乎很明顯，但是當您想使用標准文本輸入時，您會遇到情況。考慮日期。支持是零散的，這導致了實施問題：

簡單的解決方案是放棄HTML5日期輸入，恢復文本並實現您自己的日期控件。不。您將永遠不會創建一個自定義日期選擇器，該選擇器在所有屏幕分辨率的所有設備中都可以使用，支持鍵盤，鼠標和触摸輸入，並在禁用JavaScript時繼續操作。特別是，移動瀏覽器通常位於其桌面表親之前，並實施良好的觸摸屏控件。 HTML5輸入類型是未來。使用它們，如有必要，在需要良好的跨瀏覽器支持的情況下添加JavaScript polyfills。但是記得……

>驗證服務器端

不能保證瀏覽器驗證。即使您強迫所有人使用最新版本的Chrome訪問您也永遠無法阻止：

>瀏覽器錯誤或JavaScript失敗允許無效數據
用戶使用瀏覽器工具更改HTML或腳本
>

客戶端驗證永遠不會和永遠不會代替服務器端驗證。驗證服務器上的用戶數據至關重要。在客戶端上，它是一個不錯的經常詢問有關HTML5表格標記的問題（常見問題解答）

>在表單標記中使用HTML5的重要性是什麼？這些新功能允許更具體的輸入類型，例如電子郵件，日期和時間，可以通過瀏覽器本身驗證，從而減少了對其他JavaScript的需求。這會導致更清潔，更有效的代碼和更順暢的用戶體驗。 > html5如何改善表單標記的可訪問性？

HTML5提供了一些增強可訪問性的功能。例如，可以使用“必需”屬性來確保填寫基本字段。 “佔位符”屬性可以向用戶提供有關在字段中預期的信息類型的提示。此外，當頁面加載時，“自動對焦”屬性可以自動將光標聚焦在特定的輸入字段上，從而指導用戶與表單的互動。

使用HTML5進行表單標記？

>一個常見的錯誤是沒有正確使用HTML5中引入的新輸入類型和屬性的一個常見錯誤。例如，使用錯誤的輸入類型可能會導致提交錯誤的數據。另一個錯誤不是為不支持HTML5的較舊瀏覽器提供足夠的後備。對於使用較舊技術的人來說，這可能會導致差的用戶體驗。

>我如何使用HTML5創建更多的交互式形式？

html5引入了幾種可用於創建更多的新形式元素交互式形式。例如，“數據級”元素可用於創建輸入字段選項的下拉列表，而“進度”和“儀表”元素可用於視覺上表示任務的進度或在一個內部的當前值已知範圍分別。

html5如何處理形式驗證？

html5通過使用某些屬性引入內置的形式驗證。例如，可以使用“必需”屬性來確保字段不會空，而“模式”屬性可用於指定輸入字段值必須匹配的正則表達式。如果輸入不符合這些條件，則將不提交表格，並提示用戶糾正其輸入。

>

>在HTML5中使用語義元素有什麼好處HTML5中的元素清楚地表明了其中包含哪種類型的內容，使開發人員和機器（如搜索引擎）都更容易理解一個的結構和內容網頁。這可以改善搜索引擎的優化和可訪問性。

>如何確保我的HTML5表格與較舊的瀏覽器兼容？

，而HTML5得到了現代瀏覽器的廣泛支持，很重要的是，為較舊的倒退提供的倒退很重要可能不支持所有HTML5功能的瀏覽器。這可以通過使用JavaScript檢測瀏覽器是否支持特定功能並提供替代實現。 🎜> HTML5引入了幾個可以改善表單移動體驗的功能。例如，“自動對焦”屬性可用於在頁面加載時自動將光標聚焦在特定的輸入字段上，從而減少了用戶手動點擊字段的需求。此外，“電子郵件”和“ tel”等新輸入類型在移動設備上提出了專門的鍵盤，從而使用戶更容易輸入正確的數據類型。