你必須知道的 5 個最有用的輸入元素屬性

在構建網站時，您必須優先考慮的是用戶體驗。 輸入元素屬性 如果您從事 Web 開發，您必須熟悉術語輸入元素屬性。

在這個博客中，我們將討論這個問題。 我將向您解釋輸入標籤和 5 個必須知道的用於 Web 開發的輸入屬性。

輸入標籤

輸入 HTML 元素是一個方便的標籤，用於創建基於 Web 的交互式表單以從用戶那裡獲取數據。 根據設備和用戶代理，可以使用多種輸入數據控件小部件。

輸入標籤對輸入類型和屬性的大量組合非常強大和復雜。

讓我們以輸入標籤為例。 這裡我們使用輸入標籤來輸入姓名，用戶可以在其中填寫他/她的姓名的最少 4 個字符，最多 8 個字符。

下圖顯示了 HTML 代碼將如何在編輯器中顯示。

下圖顯示了上面的輸出將如何在瀏覽器中顯示。

所以這是您可以接受來自用戶的數據的方式。 有許多類型的輸入標籤。 其中一些是文本、按鈕、複選框、單選、本地日期時間、範圍、搜索。 您應該注意 type 屬性的默認值是“text”。

重要的是要注意 <input> 的行為會根據其 type 屬性的值而發生顯著變化。 因此，各種類型都在各自的參考頁面中進行了描述。 如果未提供此屬性，則文本類型將用作默認值。

輸入屬性

<Input> 元素因其屬性而非常強大。 type 屬性由此非常重要。 由於每個 <input> 元素，無論類型如何，都基於 HTMLInputElement 接口，這是因為它們幾乎共享完全相同的一組屬性。 然而，實際上，它對輸入類型的特定類型的子集有影響。 此外，某些屬性會影響輸入類型，但會因不同的屬性而有所不同。

在這裡，我們列出了一些開發人員應該非常了解的基本輸入類型屬性：

• 最小長度
• 最長長度
• 已禁用
• 自動對焦
• 佔位符

迷你長度

此屬性僅適用於輸入元素中的文本、搜索、電話、URL、電子郵件或密碼類型。 minlength 屬性指定要在輸入框中輸入的最小字符，如 UTF-16 代碼單元。

這必須是小於或等於 maxlength 中指定的值的非負整數值。 如果沒有為 minlength 指定值或指定了無效值，則 input 沒有最小長度。 如果輸入框中輸入的字符數少於最小長度，則表單提交將失敗。

下圖顯示了 HTML 代碼將如何在編輯器中顯示。

下圖顯示了上面的輸出將如何在瀏覽器中顯示。

最長長度

此屬性也僅適用於輸入元素中的文本、搜索、電話、URL、電子郵件或密碼類型，例如 minilength。 maxlength 屬性指定要在輸入框中輸入的最大字符，如 UTF-16 代碼單元。

這必須是大於或等於 minlength 中指定的值的非負整數值。 如果沒有為 maxlength 指定值或指定了無效值，則輸入沒有最大長度。

默認情況下，如果超過指定的最大長度，瀏覽器會阻止用戶在輸入框中輸入字符數。

下圖顯示了 HTML 代碼將如何在編輯器中顯示。

下圖顯示了上面的輸出將如何在瀏覽器中顯示。

已禁用

這是一個布爾屬性。 此屬性指示用戶不應與輸入交互。

禁用的輸入特別以較暗的顏色顯示使用某種其他形式的指示，表明它不可用。 disabled 屬性不接收點擊事件，disabled 表單的值不會隨著表單的提交而提交。

下圖顯示了 HTML 代碼將如何在編輯器中顯示。

下圖顯示了上面的輸出將如何在瀏覽器中顯示。

自動對焦

這也是一個類似於 disabled 屬性的布爾屬性。 這表明當頁面完成加載過程時，輸入框將成為焦點。 或者當顯示包含 autofocus 屬性的輸入元素時。

不超過一個元素獲得了自動對焦屬性。 如果放置多個元素，則第一個具有該屬性的元素將獲得焦點，因為隱藏的輸入無法獲得焦點。 因此 autofocus 屬性可以與隱藏的輸入類型一起使用。

下圖顯示了 HTML 代碼將如何在編輯器中顯示。

下圖顯示了上面的輸出將如何在瀏覽器中顯示。

佔位符

佔位符是一個字符串屬性。 它是一個屬性，提供了應在輸入字段中輸入的數據的概念。

它應該是一個詞或一個短語來暗示要輸入到輸入字段中的數據類型，而不是解釋。 因此，例如，如果希望某個字段捕獲用戶的名字，並且其標籤是“名字”，則合適的佔位符可能是“例如 Bruce”。

下圖顯示了 HTML 代碼將如何在編輯器中顯示。

下圖顯示了上面的輸出將如何在瀏覽器中顯示。

包起來

在這篇博客中，我向您介紹了一些您應該知道的輸入元素屬性，尤其是如果您是 Web 開發人員。 使用這些屬性，您可以在 HTML 表單或網頁中以不同方式控制輸入元素。

儘管每天都在添加許多新屬性，包括在 HTML 中，但這些是一些必須知道的屬性。

我希望這個博客對你有幫助！ 需要網頁開發或網頁設計服務？ 歡迎與我們聯繫！

編輯：阿姆魯塔