为尽可能提供最佳用户体验，请务必使用最适合用户输入的数据的元素和元素 type。
帮助用户填写文字
使用 <input> 元素提供表单字段。<input> 最适合单个字词、短语和简短条目。对于较长的文本，请使用 <textarea> 元素。这样一来，用户可以输入多行文字，并且由于该元素可滚动和调整大小，因此用户可以更轻松地查看自己输入的文字。
确保用户以正确的格式输入数据
您是否希望帮助用户填写电话号码？
将 <input> 的 type 属性更改为 type="tel"。
移动设备上的用户会看到经过调整的屏幕键盘，从而确保他们可以更快地输入电话号码。
对于电子邮件地址，请使用 type="email"。
再次显示自适应屏幕键盘。
使用 required 属性将表单字段设为必填字段。
当表单提交时，浏览器会检查输入内容是否具有值以及是否有效：在本例中，浏览器会检查输入内容是否为格式正确的电子邮件地址。
帮助用户填写日期
您想何时开始下一次旅行？
如需帮助用户填写日期，请使用 type="date"。某些浏览器会将格式显示为占位符（例如 yyyy-mm-dd），以演示如何输入日期。
所有现代浏览器都提供自定义界面，用于以日期选择器的形式选择日期。
帮助用户选择选项
为确保用户可以选择或取消选择一个可能的选项，请使用 type="checkbox"。
您是否想提供多个选项？
根据您的使用场景，有多种替代方案。
首先，我们来看看如果用户只能选择一个选项，该如何解决。
您可以搭配使用多个 <input> 元素、type="radio" 元素和相同的 name 值。用户可以同时看到所有选项，但只能选择一个。
另一种方法是使用 <select> 元素。用户可以滚动浏览可用选项列表，然后选择一个选项。
对于某些使用情形（例如选择一系列数字），range 类型的 <input> 可能是个不错的选择。
您是否需要提供选择多个选项的功能？
使用带有 multiple 属性的 <select> 元素或多个 checkbox 类型的 <input> 元素。
您还可以将 <input> 与 <datalist> 元素结合使用。这样一来，您就可以同时获得一个文本字段和一个 <option> 元素列表。
确保用户可以填写不同类型的数据
还有更多输入类型可用于特定使用场景。
<input> 的类型为 color，可在支持的浏览器中为用户提供颜色选择器，此外还有各种其他类型。为确保用户可以输入密码，请将 <input> 与 type="password" 搭配使用。输入的每个字符都会被星号 (“*”) 或圆点 (“•”) 遮盖，以确保密码无法被读取。
您是否要在表单数据中添加唯一的安全令牌？
将 <input> 与 type="hidden" 搭配使用。
用户无法查看或修改类型为 hidden 的 <input> 的值。
如需允许用户上传和提交文件，请将 <input> 与 type="file" 搭配使用。
如果您有特殊的使用情形，而没有合适的内置元素或类型，也可以定义自定义元素。
帮助用户填写表单
表单元素和类型有很多，但您应该选择哪一个？
在某些使用情形下，选择合适的元素和类型非常简单，例如 <input type="date">。对于其他国家/地区，则要视情况而定。
例如，您可以将多个 <input> 元素与 type="checkbox" 或 <select> 元素搭配使用。详细了解在列表框和下拉列表之间进行选择。
一般来说，请务必通过真实用户测试表单，以找到最佳的表单元素和类型。
检验您的掌握情况
测试您对表单字段的了解程度
是否可以使用表单控件上传多个文件？
<input type="files">。<input type="file" multiple>。<input type="multiple-files">。type="text" 和 type="password" 有什么区别？
type="password" 显示一个适合输入密码的自适应屏幕键盘。type="password" 时，输入的每个字符都会被星号 (*) 或点 (•) 遮盖。type="password" 显示用于输入密码的自定义界面。