從歷史上看,HTML的形式非常棘手 - 首先,因為至少需要一點點JavaScript,其次,因為沒有任何數量的CS可以使它們行為。
但是,在現代網絡的情況下,這不一定是正確的,所以讓我們學習如何僅使用HTML和CSS標記表單。
鑰匙要點
可以僅使用html和css創建>元素創建的,並且數據是使用操作屬性提交的。可以使用其他屬性(例如enctype和target)來定義數據編碼類型以及顯示輸出的位置。
標籤對於可用性和可訪問性至關重要,描述了輸入的目的。有三種聲明標籤的方法:相鄰標籤,ARIA標籤和包裝標籤。最有效的方法是將輸入包裝在標籤中。佔位符也可用於提供輸入字段中預期的示例。
>有多種輸入類型可供選擇,例如按鈕,複選框,顏色,日期,電子郵件,文件等。由於瀏覽器默認值,樣式輸入可能會具有挑戰性,但是外觀屬性可用於覆蓋這些屬性。輸入驗證對於確保用戶輸入符合某些條件至關重要,並且可以使用本機HTML驗證或JavaScript實現。
基本結構-
- 從元素開始。
- >這裡沒有什麼花哨的。只是覆蓋基本結構。
>如果您自然地提交表單數據(也就是說,沒有JavaScript),則需要包含操作屬性,其中值是您將向您發送表單數據的URL。該方法應取決於您要實現的目標(不要用GET發送敏感數據)。 。
>此外,還有較少使用的Enctype屬性,該屬性定義了發送的數據的編碼類型。另外,雖然不一定是表單所特有的屬性,但可以用於在新選項卡中顯示輸出。
基於JavaScript的表單不一定需要這些屬性。
>
>表單由輸入組成,這些輸入期望數據值。
>
參見筆<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>
登入後複製
登入後複製
登入後複製
登入後複製
登入後複製
>從上面的示例中可以看到,
以上是HTML&CSS表單指南(無黑客!)的詳細內容。更多資訊請關注PHP中文網其他相關文章!