HTML5 引入了许多新的 <input> 类型，这些新的输入类型增强了表单的功能，并且使得用户体验更加友好。以下是 HTML5 中新增的常用 <input> 类型及其功能：

1. <input type="email">

• 用于输入电子邮件地址。
• 浏览器会验证输入的内容是否为有效的电子邮件格式。

示例：

<form>
  <label for="email">Email:</label>
  <input type="email" id="email" name="email" required>
  <button type="submit">Submit</button>
</form>

• 验证：浏览器会自动检查是否为有效的电子邮件地址（例如 name@domain.com）。

2. <input type="url">

• 用于输入网址（URL）。
• 会验证输入的内容是否为有效的 URL 格式。

示例：

<form>
  <label for="website">Website:</label>
  <input type="url" id="website" name="website" required>
  <button type="submit">Submit</button>
</form>

• 验证：浏览器会检查输入是否符合 URL 格式（例如 https://www.example.com）。

3. <input type="tel">

• 用于输入电话号码。
• 浏览器不会验证电话号码的格式，但它会提供合适的虚拟键盘以方便用户输入。

示例：

<form>
  <label for="phone">Phone:</label>
  <input type="tel" id="phone" name="phone">
  <button type="submit">Submit</button>
</form>

4. <input type="number">

• 用于输入数字。
• 提供增加和减少的按钮，并允许输入的值限制为数字。

示例：

<form>
  <label for="quantity">Quantity:</label>
  <input type="number" id="quantity" name="quantity" min="1" max="100" required>
  <button type="submit">Submit</button>
</form>

• 属性：
• min：设置最小值。
• max：设置最大值。
• step：设置增量步长（例如 step="5"，则数字只能是 5 的倍数）。

5. <input type="range">

• 用于选择一个值的范围。它通过滑块来选择数值。

示例：

<form>
  <label for="volume">Volume:</label>
  <input type="range" id="volume" name="volume" min="0" max="100" step="1">
  <button type="submit">Submit</button>
</form>

• 属性：
• min：设置最小值。
• max：设置最大值。
• step：设置步长（选择值的间隔）。

6. <input type="date">

• 用于输入日期。
• 浏览器会提供一个日期选择器，允许用户选择日期。

示例：

<form>
  <label for="birthday">Birthday:</label>
  <input type="date" id="birthday" name="birthday" required>
  <button type="submit">Submit</button>
</form>

• 验证：浏览器会自动验证日期的有效性（如 2025-02-23）。

7. <input type="time">

• 用于输入时间。
• 提供一个时间选择器，用户可以选择时间（不包含日期）。

示例：

<form>
  <label for="appt">Appointment time:</label>
  <input type="time" id="appt" name="appt" required>
  <button type="submit">Submit</button>
</form>

• 验证：浏览器会验证输入的时间格式（如 14:30）。

8. <input type="datetime-local">

• 用于输入本地日期和时间。
• 提供日期和时间的输入框，用户可以选择本地日期和时间。

示例：

<form>
  <label for="meeting">Meeting:</label>
  <input type="datetime-local" id="meeting" name="meeting" required>
  <button type="submit">Submit</button>
</form>

• 验证：浏览器会检查输入的日期和时间是否符合本地格式（如 2025-02-23T14:30）。

9. <input type="month">

• 用于输入月份。
• 用户可以选择某年某月的日期。

示例：

<form>
  <label for="month">Month:</label>
  <input type="month" id="month" name="month" required>
  <button type="submit">Submit</button>
</form>

• 验证：浏览器会检查输入的年月格式（如 2025-02）。

10. <input type="week">

• 用于输入周数。
• 用户可以选择某一年的某一周。

示例：

<form>
  <label for="week">Week:</label>
  <input type="week" id="week" name="week" required>
  <button type="submit">Submit</button>
</form>

• 验证：浏览器会检查输入的周数格式（如 2025-W08）。

11. <input type="color">

• 用于选择颜色。
• 浏览器会显示颜色选择器，用户可以选择一个颜色。

示例：

<form>
  <label for="favcolor">Favorite color:</label>
  <input type="color" id="favcolor" name="favcolor" value="#ff0000">
  <button type="submit">Submit</button>
</form>

• 默认值：可以设置一个初始颜色。

12. <input type="file">

• 用于文件上传。
• 允许用户从本地选择文件上传。

示例：

<form>
  <label for="file">Choose a file:</label>
  <input type="file" id="file" name="file" accept="image/*">
  <button type="submit">Submit</button>
</form>

• accept：可以限制文件类型（如 accept="image/*" 限制为图片文件）。

13. <input type="search">

• 用于输入搜索查询。
• 提供一种更适合搜索框的输入方式。

示例：

<form>
  <label for="search">Search:</label>
  <input type="search" id="search" name="search" placeholder="Search...">
  <button type="submit">Search</button>
</form>

• placeholder：可以提供搜索框的提示文本。

总结

HTML5 引入的新输入类型大大提升了表单的功能性和用户体验，减少了开发者编写验证代码的需求，也提高了表单提交的数据准确性。不同类型的输入有助于提供不同的用户交互方式，使得表单更加智能和便捷。