HTML5引入了新的輸入類型，通過改進(jìn)驗證，UI和移動鍵盤布局來增強(qiáng)形式功能和用戶體驗。 1。電子郵件驗證電子郵件地址并支持多個條目。 2。檢查有效的網(wǎng)址和觸發(fā)URL優(yōu)化鍵盤的有效Web地址。 3。數(shù)字允許使用增量/減少控件和范圍限制的數(shù)字輸入。 4。范圍提供了用于在定義范圍內(nèi)選擇值的滑塊。 5。日期，時間和相關(guān)類型提供內(nèi)置的選擇器，以便于日期和時間進(jìn)入。 6。搜索增強(qiáng)了搜索字段，具有自動完成之類的功能。這些輸入簡化了開發(fā)并提高可用性，同時在較舊的瀏覽器中優(yōu)雅地降級，與服務(wù)器端驗證配對時，它們很有價值。

HTML5引入了幾種新的輸入類型，以增強(qiáng)Web表單的功能和用戶體驗。這些輸入類型提供了更好的驗證，改進(jìn)了支持瀏覽器的用戶界面以及移動設(shè)備上更合適的鍵盤布局。

1。 email - 用于電子郵件地址輸入

當(dāng)您希望用戶輸入電子郵件地址時，使用email輸入類型。支持此輸入類型的瀏覽器會自動驗證輸入的文本與基本的電子郵件格式（例如，user@example.com）匹配。

例子：

 <輸入type =“ email” name =“ user_email”占位符=“ you@example.com”>

• 您可以使用multiple屬性來允許由逗號分隔的多個電子郵件地址。
• 它在需要有效的電子郵件地址的注冊或聯(lián)系表中特別有用。

url - 用于網(wǎng)址輸入

url輸入類型期望用戶有有效的URL。瀏覽器檢查值是否以http：//或https：//等有效協(xié)議開頭。

例子：

 <input type =“ url” name =“網(wǎng)站”占位符=“ https://example.com”>

• 在移動設(shè)備上，這通常會觸發(fā)用于輸入URL的鍵盤。
• 確保處理其他驗證服務(wù)器端，因為瀏覽器僅執(zhí)行基本檢查。

3。 number - 數(shù)字輸入

當(dāng)您希望用戶輸入號碼時使用number 。此輸入類型允許向上/向下箭頭增加和減少值的值，并將輸入限制為許多設(shè)備上的數(shù)字。

例子：

 <intup type =“ number” name =“數(shù)量” min =“ 1” max =“ 10” step =“ 1”>

您可以使用屬性控制行為：

• min和max設(shè)置限制
• step定義值增加或減少多少

4。 range - 用于滑塊輸入

range輸入使用戶可以使用滑塊從范圍中選擇一個值。非常適合設(shè)置諸如音量，亮度或評分之類的設(shè)置。

例子：

 <input type =“ range” name =“卷” min =“ 0” max =“ 100” step =“ 5”>

• 用戶并不總是知道他們選擇的確切價值，因此當(dāng)精確度并不關(guān)鍵時，最好使用它。
• 如果顯示當(dāng)前值很重要，則將其與視覺指示器或標(biāo)簽配對。

5。 date ， time ， datetime-local ， month和week - 用于日期和時間輸入

這些輸入通過提供內(nèi)置選擇器來簡化日期和時間進(jìn)入：

• date ：選擇一個全日期（YYYY-MM-DD）
• time ：選擇時間（HH：MM）
• datetime-local ：結(jié)合日期和時間沒有時區(qū)
• month ：選擇一個月和年份
• week ：選擇一周和一年

示例：

 <輸入類型=“ date” name =“生日”>
<input type =“ time” name =“ meeting_time”>

• 瀏覽器支持各不相同，因此始終跨平臺進(jìn)行測試。
• 這些輸入使數(shù)據(jù)輸入更加容易并減少格式化錯誤。

6。 search - 搜索字段輸入

search專為搜索框而設(shè)計，其行為與text相似，但可能具有不同的樣式，或者提供諸如Auto-Complete和某些瀏覽器上的清晰按鈕之類的功能。

例子：

 <input type =“ search” name =“ query”占位符=“ search ...”>

• 它通過利用本機(jī)UI增強(qiáng)功能來提高搜索表中的可用性。
• 在現(xiàn)場導(dǎo)航欄和應(yīng)用程序工具欄中運行良好。

這些輸入類型可幫助開發(fā)人員以更少的JavaScript構(gòu)建更智能，更直觀的形式。雖然并非所有瀏覽器都平等地支持每種類型，但使用它們優(yōu)雅地降低了在較舊環(huán)境中的text 。因此，基本上，他們今天值得使用 - 只需通過服務(wù)器端驗證將它們備份。

以上是HTML5表單中有哪些新輸入類型？的詳細(xì)內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！