HTML5 Input Element: Attributes for the Input TagHTML5 输入元素：输入标签属性

---

学习目标

观看本视频后，您将能够：

• 描述 HTML5 输入元素的属性。
• 解释不同的输入类型属性，如 tel、email、datetime、number、range 和 color。
• 理解实现验证回退的重要性。
  

---

HTML5 输入元素属性

1.<input type="color">

• 允许用户选择颜色。
• 浏览器对话框展示方式有所不同，一些浏览器不支持该输入类型。
• 在不支持的浏览器中，会显示为普通文本输入框，用户可以输入有效的颜色名称或颜色代码。
  

2.<input type="date">

• 提供无时区的日期控制（年、月、日）。
• 该输入框在不同浏览器中展示不同，以下是 Google Chrome 中的展示效果：
  • 输入框显示为日期选择器。
    

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

• 提供无时区的日期和时间（年、月、日、小时、分钟、AM/PM）输入。
• 在 Google Chrome 中，输入框显示为下拉日历，用户可以选择日期和时间。
  

4.<input type="email">

• 显示为普通文本输入框。
• 当输入不符合电子邮件格式时，浏览器会提供反馈。
  

5.<input type="number">

• 接受数值输入。
• 可以指定 最小值、最大值 和 步长 等属性。
• 例如，在 Chrome 浏览器中，用户只能选择 5 到 10 之间的数字。
  

6.<input type="range">

• 接受数字范围作为输入。
• 该输入框显示为滑块，用户可以选择 最小值 和 最大值 范围内的数字。
• 需要额外的 JavaScript 代码来显示滑块的值。
  

7.<input type="search">

• 与 <input type="text"> 的主要区别在于样式。
• WebKit 浏览器会显示最近搜索的历史记录。
• Safari 浏览器中的搜索框有 圆角 样式。
  

8.<input type="tel">

• 用于输入电话号码。
• tel 输入框本身不强制用户只能输入数字，可以包含符号如加号（+）和破折号（-）。
• 如果需要验证电话号码，您需要提供自定义的 pattern 匹配器。
  

9.<input type="url">

• 用于验证用户输入的 URL 或网页地址是否符合正确的格式。
  

10.<input list="some_list">

• 使用 datalist 功能提供自动完成功能。
• datalist 选项只是建议，用户可以选择其中的一项。
• 可通过在 <datalist> 标签内嵌套 <option> 元素来填充列表。
  

---

其他常见属性

• placeholder: 用于显示输入框的提示文本，通常为浅色文本，提供输入格式的提示。用户开始输入时，提示文本会消失。如果用户没有覆盖该提示文本，表单将不会提交该值。
  
• required: 标明该字段为必填项，即使字段包含占位符文本，也必须输入有效内容才能提交表单。
  

---

验证回退的重要性

当浏览器不支持某些输入类型时，如何处理？

1. JavaScript 和 JQuery:
   • 可以使用 JavaScript 或 JQuery 库在客户端进行验证。
2. 服务器端验证:
   • 假设更多浏览器未来会支持这些功能，但最终的验证应该由服务器端处理。
3. 客户端验证:
   • 可以将客户端验证绑定到 表单提交事件，确保所有表单字段在提交时得到验证。

---

总结

在本视频中，您学习了：

• 常见的 HTML5 输入标签 属性，如 color、date、email 等。
• 如何在不支持某些输入类型的浏览器中实现 验证回退。
• 使用 JavaScript 和 JQuery 实现客户端验证，并将最终验证交给服务器端处理。