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

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

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

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

例子：

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

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

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

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

例子：

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

• 在移動(dòng)設(shè)備上，這通常會(huì)觸髮用於輸入U(xiǎn)RL的鍵盤(pán)。
• 確保處理其他驗(yàn)證服務(wù)器端，因?yàn)闉g覽器僅執(zhí)行基本檢查。

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

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

例子：

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

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

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

4。 range - 用於滑塊輸入

range輸入使用戶(hù)可以使用滑塊從範(fàn)圍中選擇一個(gè)值。非常適合設(shè)置諸如音量，亮度或評(píng)分之類(lèi)的設(shè)置。

例子：

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

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

5。 date ， time ， datetime-local ， month和week - 用於日期和時(shí)間輸入

這些輸入通過(guò)提供內(nèi)置選擇器來(lái)簡(jiǎn)化日期和時(shí)間進(jìn)入：

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

示例：

 <輸入類(lèi)型=“ date” name =“生日”>
<input type =“ time” name =“ meeting_time”>

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

6。 search - 搜索字段輸入

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

例子：

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

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

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

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