HTML5引入了多種新輸入類型以提升表單處理和用戶體驗。 1.type="email"驗證郵箱格式；2.type="url"驗證網(wǎng)址；3.type="number"限制數(shù)值並支持增減操作；4.type="range"提供滑塊選擇範(fàn)圍值；5.type="date"及相關(guān)類型提供日期時間選擇；6.type="search"優(yōu)化搜索輸入；7.type="color"調(diào)用顏色選擇器。這些類型在不支持的瀏覽器中會優(yōu)雅降級為普通文本框，可安全使用。

HTML5 introduced several new input types that enhance form handling and improve user experience by providing better validation and more appropriate interfaces for different kinds of data. These input types help browsers understand what kind of data users should enter, and in some cases, they can even trigger specialized controls (like date pickers or numeric spinners) on certain devices.

Here are the most commonly used new input types in HTML5:

type="email"

This input type is designed for email addresses. It ensures that the entered value matches a basic email format before submitting the form.

• The browser automatically checks if the input contains an “@” symbol and a domain-like structure.
• Example:

   <input type="email" name="user_email" placeholder="you@example.com" required>

• On mobile devices, this often triggers a keyboard optimized for typing emails.

type="url"

Meant for web address inputs, this type validates that the entered value is a properly formatted URL.

• Requires the full URL including the protocol (eg, http:// or https:// ).
• Example:

   <input type="url" name="website" placeholder="https://example.com">

type="number"

Allows only numeric values and usually includes up/down arrows to increase or decrease the number.

• You can set minimum and maximum values using the min and max attributes.
• Also supports a step attribute to control how much the number increases or decreases with each click.
• Example:

   <input type="number" name="quantity" min="1" max="10" step="1">

type="range"

Similar to number , but presents a slider instead of a text box.

• Useful when you want users to pick a value from a range without needing exact precision.
• Often used with min , max , and step .
• Example:

   <input type="range" name="volume" min="0" max="100" step="5">

type="date"

Provides a date picker interface in supporting browsers.

• Allows users to select a date (year, month, and day).
• The value is always in the format YYYY-MM-DD .
• Example:

   <input type="date" name="birthday">

There are also related types like:

• type="datetime-local" – for local dates and times
• type="month" – for selecting a year and month
• type="time" – for selecting a time (hours and minutes)
• type="week" – for selecting a week and year

These behave similarly but are less widely supported than type="date" .

type="search"

Behaves like a regular text input but is styled slightly differently in some browsers and optimized for search queries.

• On mobile devices, it might show a "search" button on the virtual keyboard.
• Example:

   <input type="search" name="query" placeholder="Search...">

type="color"

Displays a color picker dialog so users can choose a color.

• The returned value is a hexadecimal color code.
• Example:

   <input type="color" name="fav_color">

These new input types make HTML forms smarter and more user-friendly. While not all browsers support every type equally, they generally degrade gracefully to a standard text input when unsupported — making them safe to use today.

基本上就這些。

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