HTML＆CSS表單指南（無黑客！）-css教學-PHP中文網

HTML＆CSS表單指南（無黑客！）

從歷史上看，HTML的形式非常棘手 - 首先，因為至少需要一點點JavaScript，其次，因為沒有任何數量的CS可以使它們行為。但是，在現代網絡的情況下，這不一定是正確的，所以讓我們學習如何僅使用HTML和CSS標記表單。

鑰匙要點

可以僅使用html和css創建>元素創建的，並且數據是使用操作屬性提交的。可以使用其他屬性（例如enctype和target）來定義數據編碼類型以及顯示輸出的位置。標籤對於可用性和可訪問性至關重要，描述了輸入的目的。有三種聲明標籤的方法：相鄰標籤，ARIA標籤和包裝標籤。最有效的方法是將輸入包裝在標籤中。佔位符也可用於提供輸入字段中預期的示例。

>有多種輸入類型可供選擇，例如按鈕，複選框，顏色，日期，電子郵件，文件等。由於瀏覽器默認值，樣式輸入可能會具有挑戰性，但是外觀屬性可用於覆蓋這些屬性。輸入驗證對於確保用戶輸入符合某些條件至關重要，並且可以使用本機HTML驗證或JavaScript實現。

從元素開始。
>這裡沒有什麼花哨的。只是覆蓋基本結構。

>如果您自然地提交表單數據（也就是說，沒有JavaScript），則需要包含操作屬性，其中值是您將向您發送表單數據的URL。該方法應取決於您要實現的目標（不要用GET發送敏感數據）。。

>此外，還有較少使用的Enctype屬性，該屬性定義了發送的數據的編碼類型。另外，雖然不一定是表單所特有的屬性，但可以用於在新選項卡中顯示輸出。

基於JavaScript的表單不一定需要這些屬性。 HTML＆CSS表單指南（無黑客！） >

>表單由輸入組成，這些輸入期望數據值。

參見筆

<span><span><span><form</span>></span>
</span>    ...
<span><span><span></form</span>></span>
</span>

登入後複製

表單1 by sitepoint（@sitepoint）

在Codepen上。

包括可提供更好可用性和可訪問性的標籤

<span><span><span><form</span> method<span>="POST"</span> action<span>="/subscribe"</span> enctype<span>="application/x-www-form-urlencoded"</span> target<span>="_blank"</span>></span>
</span>    ...
<span><span><span></form</span>></span>
</span>

登入後複製

每個輸入都需要一個標籤。 >

標籤是一個文本描述符，描述了輸入的用途。有三種宣布標籤的方法，但其中一個優於其他兩個標籤。讓我們現在深入研究這些。

相鄰標籤

>相鄰標籤需要最多的代碼，因為我們需要明確聲明標籤所描述的輸入。對於大多數人來說，這是違反直覺的，因為我們可以將輸入包裝在標籤內部以實現相同的效果。

話雖如此，相鄰的方法在延長的情況下可能是必要的，所以這就是外觀：

<span><span><span><form</span>></span>
</span>    ...
<span><span><span></form</span>></span>
</span>

登入後複製

>從上面的示例中可以看到，

>必須匹配輸入的ID屬性，而這是對文本描述符屬於哪個文本描述符的輸入設備的說明輸入。然後，輸入設備將將其傳達給用戶（例如，屏幕讀取器將通過語音決定它。 aria標籤

>語義HTML更好，但ARIA（可訪問的互聯網應用程序）可以在缺席的情況下進行補償。在這種情況下，如果沒有實際的html ：

>，這就是標籤的樣子

不幸的是，這種方法的缺點是缺乏視覺標籤。但是，對於某些標記，這可能很好（例如，帶有標題和占位符的單輸入表格

）：

<span><span><span><form</span> method<span>="POST"</span> action<span>="/subscribe"</span> enctype<span>="application/x-www-form-urlencoded"</span> target<span>="_blank"</span>></span>
</span>    ...
<span><span><span></form</span>></span>
</span>

登入後複製

（我將稍後解釋佔位符。 包裝標籤

標籤內包裝輸入是最乾淨的方法。另外，多虧了CSS的：Focus-Within，我們甚至可以在他們的孩子投入獲得焦點時樣式標籤，但我們稍後會討論。

<span><span><span><form</span>></span>
</span>    <span><span><span><input</span> type<span>="text"</span>></span><!-- text input -->
</span>    <span><span><span><input</span> type<span>="text"</span> value<span>="Prefilled value"</span>></span>
</span><span><span><span></form</span>></span>
</span>

登入後複製

佔位符與標籤

簡短的比較：

<span><span><span><label</span> for<span>="firstName"</span>></span>First name<span><span></label</span>></span>
</span><span><span><span><input</span> id<span>="firstName"</span>></span>
</span>

登入後複製

標籤陳述輸入期望的

佔位符展示上述期望的例子 HTML＆CSS表單指南（無黑客！）

佔位符並非被設計為標籤的替代方案，儘管正如我們在上面的Aria示例中看到的那樣，他們可以添加一些在沒有視覺標籤的情況下丟失的某些上下文。

理想情況下，我們應該同時使用兩者：

sitepoint（@sitepoint）的表格2

選擇輸入類型

<span><span><span><input</span> aria-label<span>="First name"</span>></span>
</span>

登入後複製

佔位符僅適用於基於文本的輸入，但實際上有各種不同的輸入類型，其中包括：

>

語義輸入類型在表單驗證期間很有用，尤其是在依靠本機驗證時，我們將在不久後查看。首先，讓我們學習如何設置這些輸入。

>樣式輸入

可以說，編碼表格中最令人髮指的方面是覆蓋瀏覽器的默認樣式。值得慶幸的是，今天，外觀：無；根據Caniuse.com。

>使用以下CSS代碼重置Web瀏覽器的默認樣式後，我們可以按照需要進行樣式輸入，這甚至包括廣播和復選框輸入類型：但是，其中一些輸入可能帶有難以克服甚至不可能克服的怪癖（取決於Web瀏覽器）。因此，許多開發人員傾向於回到默認類型=“ text”屬性= value如果他們發現這些怪異不希望的話（例如，輸入type =“ number”上的“ caret”）。

但是，

是

<span><span><span><form</span>></span>
</span>    ...
<span><span><span></form</span>></span>
</span>

登入後複製

一個銀色的襯裡…

指定輸入模式

根據Caniuse.com，新的InputMode屬性指定哪些鍵盤佈局將在手持設備上顯示哪些鍵盤佈局，無論使用的輸入類型如何。 總比沒有好，對嗎？

驗證用戶輸入

>是否應該在JavaScript解決方案上選擇Native-HTML驗證，請記住，InputMode在這方面什麼都沒有實現。 inputMode =“ email”

不會

驗證電子郵件地址，而輸入type =“ email” will will。這就是區別。

<span><span><span><form</span> method<span>="POST"</span> action<span>="/subscribe"</span> enctype<span>="application/x-www-form-urlencoded"</span> target<span>="_blank"</span>></span>
</span>    ...
<span><span><span></form</span>></span>
</span>

登入後複製

擱置一邊，讓我們討論什麼觸發驗證：>

創建自定義規則

>自定義規則需要REGEXP對象使用的JavaScript正則表達式知識（但沒有包裝斜線或引號）。這是一個示例，在一個規則中強制執行小寫字符（A – Z）和最小/最大長度：

更多信息在這裡。

<span><span><span><form</span>></span>
</span>    <span><span><span><input</span> type<span>="text"</span>></span><!-- text input -->
</span>    <span><span><span><input</span> type<span>="text"</span> value<span>="Prefilled value"</span>></span>
</span><span><span><span></form</span>></span>
</span>

登入後複製

注意：前端驗證（本機HTML或其他）永遠不應用作服務器端驗證的替代！

>樣式有效/無效狀態

<span><span><span><label</span> for<span>="firstName"</span>></span>First name<span><span></label</span>></span>
</span><span><span><span><input</span> id<span>="firstName"</span>></span>
</span>

登入後複製

為了額外的清晰，這就是我們的樣式有效性：>

休斯頓，我們有問題！

>

>輸入試圖立即驗證其值（或缺乏其值），因此以下代碼（僅顯示有效/無效狀態，而輸入保存值則有效）可能會更好：>

HTML＆CSS表單指南（無黑客！） >這顯示了有效/無效的樣式，但僅在未顯示

佔位符

>的情況下（因為用戶輸入了某些內容）。

參見筆

<span><span><span><input</span> aria-label<span>="First name"</span>></span>
</span>

登入後複製

sitepoint（@sitepoint）

的表格3 在Codepen上。

其他基本事物

發送表單數據

>將表單數據發送到服務器通常要求輸入具有名稱屬性。這也適用於隱藏的輸入：

<span><span><span><form</span>></span>
</span>    ...
<span><span><span></form</span>></span>
</span>

登入後複製

接受長形輸入

本質上，與是同一件事，除了textareas具有多行支持的事實。是的，肯定會更直觀，但是alas 是接受用戶長期輸入的正確方法。另外，它接受輸入所具有的大多數（如果不是全部）屬性。 >

>分組輸入以獲得更好的可訪問性

>較短的表格提供了更好的用戶體驗，但有時不可避免地會有更長的用戶體驗。在這種情況下，

元素可用於包含相關輸入，而兒童被用作

的標題/標題：：

>知道的事物

<span><span><span><form</span> method<span>="POST"</span> action<span>="/subscribe"</span> enctype<span>="application/x-www-form-urlencoded"</span> target<span>="_blank"</span>></span>
</span>    ...
<span><span><span></form</span>></span>
</span>

登入後複製

禁用輸入

添加禁用屬性可以使輸入（或任何焦點元素）已解決，儘管通常會通過JavaScript應用/未應用。但是，它的工作方式是：

和隨附的CSS，如果需要：

<span><span><span><form</span>></span>
</span>    <span><span><span><input</span> type<span>="text"</span>></span><!-- text input -->
</span>    <span><span><span><input</span> type<span>="text"</span> value<span>="Prefilled value"</span>></span>
</span><span><span><span></form</span>></span>
</span>

登入後複製

但是，如果您要做的就是添加一個額外的視覺提示，暗示用戶的輸入無效，那麼您很可能需要使用一般的同胞組合

（〜）。以下代碼基本上是指“遵循任何具有無效輸入的元素的提交按鈕”。這不會改變任何功能，但是當我們利用本機html形式驗證（該驗證會自動處理/啟用提交性）時，這很好：

<span><span><span><label</span> for<span>="firstName"</span>></span>First name<span><span></label</span>></span>
</span><span><span><span><input</span> id<span>="firstName"</span>></span>
</span>

登入後複製

禁用輸入，但無論如何發送數據 和的混合，以下示例將確保無法更改該值。不同之處在於，與殘疾人不同，可讀值作為表單數據發送。與隱藏不同，可見的是：>

<span><span><span><input</span> aria-label<span>="First name"</span>></span>
</span>

登入後複製

更改增量

基於數字的輸入具有“自旋按鈕”來調整數值，並且他們還接受一個步驟屬性，該屬性確定了每種調整的替代增量值：>

>樣式表格，標籤和fieldsets集focus

<span><span><span><h1</span>></span>Subscribe<span><span></h1</span>></span>
</span><span><span><span><form</span>></span>
</span>    <span><span><span><input</span> aria-label<span>="Email address"</span> placeholder<span>="bruce@wayneenterpris.es"</span>></span>
</span><span><span><span></form</span>></span>
</span>

登入後複製

我們可以使用focus-within：用於當前接收焦點的輸入的任何父

。最有可能的元素將是輸入的，或

容器：

發送多個值，一個輸入

<span><span><span><label</span>></span>
</span>    First name<span><span><span><input</span>></span>
</span><span><span><span></label</span>></span>
</span>

登入後複製

倍數對文件和電子郵件輸入類型有效：>

編寫速記表單代碼

>僅由一個單數

<span><span><span><form</span>></span>
</span>    ...
<span><span><span></form</span>></span>
</span>

登入後複製

與此相反：

<span><span><span><form</span> method<span>="POST"</span> action<span>="/subscribe"</span> enctype<span>="application/x-www-form-urlencoded"</span> target<span>="_blank"</span>></span>
</span>    ...
<span><span><span></form</span>></span>
</span>

登入後複製