在之前的模块中,您学习了如何使用
如果您想避免在用户提交表单时重新加载网页,仍然可以使用
注意: 虽然可以使用 JavaScript 复制表单功能,但纯粹基于脚本的方法不太可能像内置
您已了解,
您现在可能想知道,表单是如何运作的?
表单提交的运作方式
当您提交
您可以如何访问和处理表单数据?提交的数据可由前端的 JavaScript 通过 GET 请求处理,也可由后端的代码通过 GET 或 POST 请求处理。详细了解请求类型和表单数据转移。
注意: 提交按钮可能具有 formmethod 属性。如果是这种情况,系统会使用其中定义的值。
提交表单后,浏览器会向 action 属性的值所对应的网址发出请求。此外,浏览器还会检查提交按钮是否具有 formaction 属性。如果属于这种情况,系统会使用其中定义的网址。
此外,浏览器还会查找
尝试构建一个表单,让用户可以在其中提交自己喜欢的颜色。
数据应以 POST 请求的形式发送,处理数据的网址应为 /color。
显示表单
一种可能的解决方案是使用此表单:
确保用户可以提交您的表单
您可以通过两种方式提交表单。您可以在使用任何表单控件时点击提交按钮或按 Enter。
创建提交按钮时,请务必使用可操作的语言。例如,继续付款或保存更改。这有助于用户了解表单的后续步骤。
注意: 请避免在等待有效输入时停用提交功能,因为您可以分享错误消息。提交表单后,请考虑停用此功能,以避免多次请求。详细了解“提交”按钮最佳实践。
您可以通过多种方式添加提交按钮。
一种方法是在表单中使用
另一种方法是使用 。
提示: 您可以使用 enterkeyhint 属性更改屏幕键盘的输入键的标签。这有助于用户更清楚地了解提交当前表单后会发生什么。
第三种方法是使用 创建图形化的提交按钮。不过,现在您可以使用 CSS 创建图形按钮,因此不建议使用 type="image"。
最后,避免添加超时。让用户有充足的时间来提交表单。超时会导致数据丢失,并让用户感到沮丧。请参阅 W3C 表单超时指南。
允许用户提交文件
使用 可让用户根据需要上传和提交文件。
首先,向表单添加一个包含 type="file" 的 元素。如果用户应能够上传多个文件,请添加 multiple 属性。
还需要进行一项更改,以确保用户可以上传文件,即在表单上设置 enctype 属性。默认值为 application/x-www-form-urlencoded。
...
为确保可以提交文件,请将其更改为 multipart/form-data。
如果没有此编码,则无法通过 POST 请求发送文件。
检验您的掌握情况
测试您对表单元素的了解程度
提交文件需要什么 enctype 值?
multipart/form-data
🎉
multipart/form-files
再试一次!
form-data
再试一次!
form-files
再试一次!
是否可以在不发送
否
再试一次!
可以,使用 JavaScript 即可。
🎉
可以,使用 Flash。
再试一次!
可以,使用 HTML5。
再试一次!
如何提交
点击
再试一次!
按 Enter 键。
再试一次!
点击 。
再试一次!
所有答案均正确。
🎉
资源
表单 HTML 元素
“提交”按钮最佳实践