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