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