HTML5新增的輸入類型包括email、number、date等，它們提升了表單交互性和用戶體驗(yàn)，并內(nèi)置驗(yàn)證功能。例如type="email"自動(dòng)驗(yàn)證郵箱格式并觸發(fā)手機(jī)郵件鍵盤；type="number"限制數(shù)字輸入并支持上下調(diào)節(jié)；type="date"提供日歷選擇日期；type="range"用于滑動(dòng)選擇數(shù)值范圍；其他如url、tel、color等也各具特定用途，減少了JavaScript驗(yàn)證需求。

HTML5 introduced a variety of new input types that help developers create more interactive and user-friendly forms. These input types not only improve the user experience but also provide built-in validation, reducing the need for extra JavaScript.

Here are some commonly used HTML5 input types:

type="email"

This input type is used when you want users to enter an email address. The browser automatically checks if the entered value is a valid email format before submitting the form.

• Example usage:

  

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

• You can also add the required attribute to make sure the field isn't left blank.

• On mobile devices, this often brings up a keyboard optimized for email entry.

type="number"

If you're asking for numeric input, like age or quantity, this is the right choice. It restricts input to numbers and usually includes up/down arrows for easy adjustment.

• Example:

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

• You can set minimum and maximum values with min and max.

• Use step to control how much the number increases or decreases with each click.

type="date"

This input lets users pick a date from a calendar-style picker, depending on the browser support.

• Usage example:

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

• Format is typically YYYY-MM-DD.

• Useful in forms where precise date selection matters, like booking systems or registration pages.

type="range"

A slider control that allows users to pick a number from a range — good for things like volume control or rating inputs.

• Basic setup:

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

• Great for visual feedback instead of typing a number.

• Often paired with a <output></output> element to show the current value.

Other useful types

There are several more input types that serve specific purposes:

• type="url" – For web addresses, validates that the input is a properly formatted URL.
• type="tel" – Designed for phone numbers (no automatic validation, but triggers phone keypad on mobile).
• type="color" – Opens a color picker dialog.
• type="search" – Similar to text, but styled differently in some browsers and clears input with an "x".
• type="time" – Lets users select a time value (hours and minutes).

Each of these types helps tailor the input experience to the kind of data expected, making forms easier to use and more reliable without writing custom scripts.

基本上就這些。

以上是HTML5中可用的不同輸入類型是什么？的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！