從歷史上看，HTML的形式非常棘手 - 首先，因為至少需要一點點JavaScript，其次，因為沒有任何數量的CS可以使它們行為。 但是，在現代網絡的情況下，這不一定是正確的，所以讓我們學習如何僅使用HTML和CSS標記表單。 鑰匙要點 可以僅使用html和css創建>元素創建的，並且數據是使用操作屬性提交的。可以使用其他屬性（例如enctype和target）來定義數據編碼類型以及顯示輸出的位置。 標籤對於可用性和可訪問性至關重要，描述了輸入的目的。有三種聲明標籤的方法：相鄰標籤，ARIA標籤和包裝標籤。最有效的方法是將輸入包裝在標籤中。佔位符也可用於提供輸入字段中預期的示例。 >有多種輸入類型可供選擇，例如按鈕，複選框，顏色，日期，電子郵件，文件等。由於瀏覽器默認值，樣式輸入可能會具有挑戰性，但是外觀屬性可用於覆蓋這些屬性。輸入驗證對於確保用戶輸入符合某些條件至關重要，並且可以使用本機HTML驗證或JavaScript實現。 基本結構 從元素開始。 >這裡沒有什麼花哨的。只是覆蓋基本結構。 >如果您自然地提交表單數據（也就是說，沒有JavaScript），則需要包含操作屬性，其中值是您將向您發送表單數據的URL。該方法應取決於您要實現的目標（不要用GET發送敏感數據）。 。 >此外，還有較少使用的Enctype屬性，該屬性定義了發送的數據的編碼類型。另外，雖然不一定是表單所特有的屬性，但可以用於在新選項卡中顯示輸出。 基於JavaScript的表單不一定需要這些屬性。 > >表單由輸入組成，這些輸入期望數據值。 > 參見筆> ... > 表單1 by sitepoint（@sitepoint） 在Codepen上。 包括可提供更好可用性和可訪問性的標籤 method="POST" action="/subscribe" enctype="application/x-www-form-urlencoded" target="_blank"> ... > 每個輸入都需要一個標籤。 >標籤是一個文本描述符，描述了輸入的用途。有三種宣布標籤的方法，但其中一個優於其他兩個標籤。讓我們現在深入研究這些。 相鄰標籤 >相鄰標籤需要最多的代碼，因為我們需要明確聲明標籤所描述的輸入。對於大多數人來說，這是違反直覺的，因為我們可以將輸入包裝在標籤內部以實現相同的效果。 話雖如此，相鄰的方法在延長的情況下可能是必要的，所以這就是外觀：> > ... > >從上面的示例中可以看到，>必須匹配輸入的ID屬性，而這是對文本描述符屬於哪個文本描述符的輸入設備的說明輸入。然後，輸入設備將將其傳達給用戶（例如，屏幕讀取器將通過語音決定它。 aria標籤 >語義HTML更好，但ARIA（可訪問的互聯網應用程序）可以在缺席的情況下進行補償。在這種情況下，如果沒有實際的html ：>，這就是標籤的樣子 不幸的是，這種方法的缺點是缺乏視覺標籤。但是，對於某些標記，這可能很好（例如，帶有標題和占位符的單輸入表格）： method="POST" action="/subscribe" enctype="application/x-www-form-urlencoded" target="_blank"> ... > （我將稍後解釋佔位符。 包裝標籤 標籤內包裝輸入是最乾淨的方法。另外，多虧了CSS的：Focus-Within，我們甚至可以在他們的孩子投入獲得焦點時樣式標籤，但我們稍後會討論。 > type="text"> type="text" value="Prefilled value"> > > 佔位符與標籤 簡短的比較： for="firstName">First name> id="firstName"> 標籤陳述輸入期望的> 佔位符展示上述期望的例子 佔位符並非被設計為標籤的替代方案，儘管正如我們在上面的Aria示例中看到的那樣，他們可以添加一些在沒有視覺標籤的情況下丟失的某些上下文。 理想情況下，我們應該同時使用兩者：> 參見筆 sitepoint（@sitepoint）的表格2 在Codepen上。 選擇輸入類型 aria-label="First name"> 佔位符僅適用於基於文本的輸入，但實際上有各種不同的輸入類型，其中包括：> 語義輸入類型在表單驗證期間很有用，尤其是在依靠本機驗證時，我們將在不久後查看。首先，讓我們學習如何設置這些輸入。 >>樣式輸入 可以說，編碼表格中最令人髮指的方面是覆蓋瀏覽器的默認樣式。值得慶幸的是，今天，外觀：無；根據Caniuse.com。 >使用以下CSS代碼重置Web瀏覽器的默認樣式後，我們可以按照需要進行樣式輸入，這甚至包括廣播和復選框輸入類型： 但是，其中一些輸入可能帶有難以克服甚至不可能克服的怪癖（取決於Web瀏覽器）。因此，許多開發人員傾向於回到默認類型=“ text”屬性= value如果他們發現這些怪異不希望的話（例如，輸入type =“ number”上的“ caret”）。 但是，是> ... > 一個銀色的襯裡… 指定輸入模式 根據Caniuse.com，新的InputMode屬性指定哪些鍵盤佈局將在手持設備上顯示哪些鍵盤佈局，無論使用的輸入類型如何。 總比沒有好，對嗎？ 驗證用戶輸入 >是否應該在JavaScript解決方案上選擇Native-HTML驗證，請記住，InputMode在這方面什麼都沒有實現。 inputMode =“ email” 不會驗證電子郵件地址，而輸入type =“ email” will will。這就是區別。 method="POST" action="/subscribe" enctype="application/x-www-form-urlencoded" target="_blank"> ... > 擱置一邊，讓我們討論什麼觸發驗證：> 創建自定義規則 >自定義規則需要REGEXP對象使用的JavaScript正則表達式知識（但沒有包裝斜線或引號）。這是一個示例，在一個規則中強制執行小寫字符（A – Z）和最小/最大長度： 更多信息在這裡。 > type="text"> type="text" value="Prefilled value"> > >注意：前端驗證（本機HTML或其他）永遠不應用作服務器端驗證的替代！ >樣式有效/無效狀態 for="firstName">First name> id="firstName"> 為了額外的清晰，這就是我們的樣式有效性：> 休斯頓，我們有問題！ > >輸入試圖立即驗證其值（或缺乏其值），因此以下代碼（僅顯示有效/無效狀態，而輸入保存值則有效）可能會更好：> >這顯示了有效/無效的樣式，但僅在未顯示佔位符>的情況下（因為用戶輸入了某些內容）。 參見筆 aria-label="First name"> sitepoint（@sitepoint）的表格3 在Codepen上。 其他基本事物 發送表單數據 >將表單數據發送到服務器通常要求輸入具有名稱屬性。這也適用於隱藏的輸入： > ... > 接受長形輸入 本質上， 與是同一件事，除了textareas具有多行支持的事實。是的，肯定會更直觀，但是alas 是接受用戶長期輸入的正確方法。另外，它接受輸入所具有的大多數（如果不是全部）屬性。 > >分組輸入以獲得更好的可訪問性 >較短的表格提供了更好的用戶體驗，但有時不可避免地會有更長的用戶體驗。在這種情況下，元素可用於包含相關輸入，而兒童被用作 的標題/標題：： >知道的事物 method="POST" action="/subscribe" enctype="application/x-www-form-urlencoded" target="_blank"> ... > 禁用輸入 添加禁用屬性可以使輸入（或任何焦點元素）已解決，儘管通常會通過JavaScript應用/未應用。但是，它的工作方式是： 和隨附的CSS，如果需要： > type="text"> type="text" value="Prefilled value"> > 但是，如果您要做的就是添加一個額外的視覺提示，暗示用戶的輸入無效，那麼您很可能需要使用一般的同胞組合（〜）。以下代碼基本上是指“遵循任何具有無效輸入的元素的提交按鈕”。這不會改變任何功能，但是當我們利用本機html形式驗證（該驗證會自動處理/啟用提交性）時，這很好：> for="firstName">First name> id="firstName"> 禁用輸入，但無論如何發送數據 和的混合，以下示例將確保無法更改該值。不同之處在於，與殘疾人不同，可讀值作為表單數據發送。與隱藏不同，可見的是：> aria-label="First name"> 更改增量 基於數字的輸入具有“自旋按鈕”來調整數值，並且他們還接受一個步驟屬性，該屬性確定了每種調整的替代增量值：> >樣式表格，標籤和fieldsets集focus >Subscribe> > aria-label="Email address" placeholder="bruce@wayneenterpris.es"> > 我們可以使用focus-within：用於當前接收焦點的輸入的任何父。最有可能的元素將是輸入的，或容器： 發送多個值，一個輸入 > First name> > 倍數對文件和電子郵件輸入類型有效：> 編寫速記表單代碼 >僅由一個單數，或組成，有一種標記html表單的簡寫方法。這是一個示例： > ... > 與此相反：> method="POST" action="/subscribe" enctype="application/x-www-form-urlencoded" target="_blank"> ... > 我錯過了什麼嗎？ HTML的直觀比10年前的直觀要多得多。它一直在不斷發展，毫無疑問，在適當的時候，將增加更多有關HTML/CSS形式的主題。腦海中浮現的一個例子是數據庫元素，目前可能是很大的障礙（尤其是在Firefox中）。但除此之外，我錯過了什麼嗎？ > >我將注意到HTML表格的某些方面我沒有討論，因為不建議使用它們，包括：> >自動對焦（不適合可訪問性） >自動完整（不使用自動完成應該是用戶的選擇，而不是默認的）> AccessKey（不良支持和可訪問性） novalidate（沒有JavaScript的情況下這是無用的） 關於HTML表單的常見問題 什麼是HTML形式？ HTML表單是用於在網頁上收集和收集用戶輸入的關鍵元素。它允許用戶輸入數據，進行選擇並將信息提交給服務器進行處理。 >如何創建基本的HTML表單？ 為創建基本的HTML表單，您可以使用元素，並在其中包含各種輸入元素，例如文本字段，複選框，無線電按鈕和按鈕。表單標籤具有諸如操作和方法之類的屬性，可以指定應發送數據以及如何處理數據。 >常見輸入類型包括文本字段（），複選框（），無線電按鈕（），下拉列表（）和按鈕（）。 >如何處理HTML表單中的用戶輸入？使用服務器端腳本或客戶端腳本（例如JavaScript）處理>用戶輸入。表單的操作屬性指定發送數據的位置，該方法屬性定義用於提交的HTTP方法（GET或POST）。表格？ GET方法將數據附加到URL，在地址欄中可見，適用於較低敏感的數據。郵政方法在請求主體中發送數據，使其對用戶隱藏，從而使其更加安全，以獲取敏感信息。 >如何驗證形式數據？ >表單數據可以使用HTML屬性（例如必需）驗證，也可以使用JavaScript進行更複雜的驗證。 JavaScript允許您執行實時驗證，確保輸入的數據在提交之前符合特定條件。 >我可以樣式的HTML表單嗎？ 是的，您可以使用CSS設計HTML表單。您可以修改表單元素的外觀，調整佈局並應用樣式以改善整體視覺吸引力和用戶體驗。我可以使用HTML表單上傳文件嗎？ 是的，您可以使用元素啟用文件上傳。這使用戶可以通過表格選擇和提交文件。表格的遞觀屬性應設置為文件上傳的“多部分/form-data”。
>