HTML 表單控制項

HTML 是用來建立網頁的標記語言。它定義了網頁結構和行為。 HTML 由有助於建立網頁的標籤和元素組成。這些元素可以在表單內分組在一起，以使用者友好的方式從使用者收集資料。但請注意，HTML 是一種無狀態協議，這意味著它無法儲存任何內容，並且您將在頁面刷新時丟失資料。

HTML 表單控制項

HTML 中定義了多種類型的表單控制項；這些控制項負責以指定方式接受使用者輸入。讓我們看看 HTML 中可用的各種類型的表單控制項。

1) 輸入文字控制

輸入文字控制項用於以自由文字形式收集使用者資料。在網頁上，它會形成一個矩形框，使用者可以在其中輸入資料。

可以在 HTML 表單中使用不同類型的輸入文字控制項。讓我們看看不同類型的輸入文字控制項。

• 單行輸入文字控制

這允許使用者僅輸入一行資料。此類輸入文字控制項的典型範例是用於輸入名稱、搜尋框、城市等。

• 多行輸入文字控制

此輸入控制項類型允許使用者輸入多行資料。此類輸入控制項的典型用途是用於評論、地址、描述等。

 

這裡的rows表示文字區域的行數，col表示列數。

• 密碼輸入控制

顧名思義，這通常用於密碼欄位。這與輸入文字欄位的工作方式相同，但出於安全目的，文字被屏蔽。

2) 輸入類型提交

當輸入類型為提交時，它執行表單操作中定義的操作，並將表單資料傳送到伺服器。

這裡的使用者名稱和密碼值將在「提交」按鈕的按鈕點擊事件上提交到伺服器。表單中的操作是接受輸入的伺服器方法。

3) 輸入型收音機

當您希望使用者將資料填入布林值，或您希望多個選項中只有一個輸入為 true 時，請使用單選按鈕。單選按鈕的一些常見用例是性別決定、員工類型（常規/臨時）等。

4) 輸入型別複選框

複選框允許使用者選擇適合其情況的任何資訊。當可能的輸入已知時，這是一種非常方便的接受資料的方式。

例如，如果您想收集個人持有的保險類型，您可以透過複選框輕鬆實現，因為選項會受到限制。

5) 輸入型別下拉清單

下拉清單使用戶能夠從多個可能的選項中選擇一個選項。這是一種非常用戶友好的方式，可以從用戶那裡獲取詳細信息，因為它提供了可能選項的詳盡列表，可以幫助用戶確定最適合他的選項。

例如，下拉清單可列出員工所屬的城市

6) 輸入型別選項組

Optgroup 的工作方式與下拉清單類似；唯一的區別是 optgroup 允許您將某些選項邏輯地分組到一個保護傘下。它可以幫助使用者使用 optgroup 標籤快速識別相關選項。

例如，下拉清單可列出按州分組的印度不同州的城市。

7) 字段集

Fieldset 是 Html 表單中的另一個有用的標籤，它允許開發人員將某些控制項邏輯地分組到一個圖例下；這有助於開發人員向使用者提供有關本節內容的清晰說明。

例如登入頁面的欄位集。

8) HTML 輸出標籤

此輸出標籤是在 HTML5 中引入的。它可以讓您立即顯示計算的輸出。當用戶需要立即進行計算並查看結果時，這非常有用。這種情況的典型例子是當使用者想要檢查購物車中所有商品的總和時。

在上面的範例中，我們將商品價格範圍定義為0 到100，並且可以在運行時更改，另一個文字方塊的值為12，是對該商品徵收的稅費；它也可以在運行時更改，另一個文字方塊的值為12，是對該商品徵收的稅費；它也可以在運行時更改。輸出結果 58 是兩個值的總和。

注意： Edge 12 或早期版本的 Internet Explorer 不支援此標籤。

9) 輸入型別顏色

表單中通常需要僅顯示顏色而不是任何文字。 HTML 5 中的輸入類型顏色可讓您做到這一點。它顯示您想要在表單中顯示的顏色。使用它的典型場景是顯示專案或階段的狀態。

注意：某些版本的 Internet Explorer 和 Edge 不支援顏色。

10) 輸入型別日期

輸入類型日期通常用於使用者期望日期類型欄位作為輸入的情況；它可以是出生日期、僱用日期、終止日期等任何內容。它是在 HTML 5 中引入的，日期格式隨著瀏覽器的變化而略有不同。

結論

• 隨著 HTML 5 的引入，支援的 HTML 控制項數量大幅增加。這些 HTML 表單控制項可以藉助 CSS 3 和 JavaScript / jQuery / Angular JS 來賦予各種效果和顏色。
• 在本文中，我們介紹了所有常用的 HTML 表單控制項。還有許多控件，例如隱藏、重置、星期、URL、時間、電子郵件、文件、DateTime-local、圖像、電話，本文未涉及。在專案中實現此功能之前，檢查這些控制項的瀏覽器相容性非常重要，因為許多瀏覽器版本不支援 HTML 5 表單控制項。

以上是HTML 表單控制項的詳細內容。更多資訊請關注PHP中文網其他相關文章！