我可以使用哪些表单字段？
为了尽可能提供最佳用户体验，请务必使用最适合用户输入的数据的元素和元素 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" 显示用于输入密码的自定义界面。