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

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

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

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

例子：

 <輸入type =“ email” name =“ user_email”佔(zhàn)位符=“ you@example.com”>

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

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

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

例子：

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

• 在移動設(shè)備上，這通常會觸髮用於輸入URL的鍵盤。
• 確保處理其他驗(yàn)證服務(wù)器端，因?yàn)闉g覽器僅執(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輸入使用戶可以使用滑塊從範(fàn)圍中選擇一個值。非常適合設(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è)計(jì)，其行為與text相似，但可能具有不同的樣式，或者提供諸如Auto-Complete和某些瀏覽器上的清晰按鈕之類的功能。

例子：

 <input type =“ search” name =“ query”佔(zhàn)位符=“ search ...”>

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

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

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