我可以使用哪些表单字段？
为了提供最佳的用户体验，请务必使用最适合用户输入的数据的元素和元素 type。
帮助用户填写文本
如需为用户提供用于插入文本的表单字段，请使用 <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> 元素列表。
确保用户可以填写不同类型的数据
还可针对特定用例提供更多输入类型。
有一个类型为 color 的 <input>，可在受支持的浏览器中为用户提供颜色选择器，还有各种其他类型。为了确保用户可以输入密码，请将 <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" 显示了用于输入密码的自定义界面。