表单元素之搭车系
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了表单元素之搭车系相关的知识，希望对你有一定的参考价值。
对于表单元素，除了reset元素，只要有name与value都能提交
因为在我们印象中，只有能选择的，能填空的，就是我们要提交的。但浏览器还提供一种机制，让我们能让除了用户自己添加的东西外，还能偷偷地提交“额外”的东西。 这些搭顺风车的东西，目前有三种，input[type=hidden],input[type=submit],input[type=image]
偷偷加的东西，目的是不让用户填这么东西。比如某些报表，它是由多个表单组成，上一页用户提交的东西，下一页还要用户提交，此外还有验证用户合法性的令牌(token),也需要我们偷偷塞到表单里面。
我们可以看一下下表。
<!DOCTYPE html> <html> <head> <title>by 司徒正美</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <form url="/"> <fieldset><legend>hidden+submit</legend> <input type="hidden" name="aaa" value="eee"/> <input type="reset" name="test" value="ooo" > <input type="submit" name="submit" value="xxx"/> </fieldset> </form> <form url="/"> <fieldset><legend>hidden+image</legend> <input type="hidden" name="bbb" value="eee"/> <input type="reset" name="test" value="ooo" > <button type="button" name="ccc" value="ddd">btn</button> <input type="image" name="submit" value="yyy"/> </fieldset> </form> <form url="/"> <fieldset><legend>hidden+button</legend> <input type="hidden" name="ccc" value="eee"/> <input type="reset" name="test" value="ooo" > <button name="submit" value="zzz" >xxx</button> </fieldset> </form> <form url="/"> <fieldset><legend>hidden+reset</legend> <input type="hidden" name="ccc" value="eee"/> <input type="reset" name="submit" value="ooo" > </fieldset> </form> </body> </html>
我们一一点击，就知道发现什么回事了。
隐藏域就不用说了，它肯定会提交。
submit按扭会携带其自身的name,value提交到后台，这样我们就可以少写一个隐藏域。
image按钮这里写不怎么规范，它其实还要一个src属性，指定一个图片，提交时，地址变成这样的：
http://localhost:8383/avalon/newhtml.html?bbb=eee&submit.x=7&submit.y=8&submit=yyy
image能提交你当时的点击位置，因此在早些年，可以防止机器人刷单刷评论！
如果button标签不指定type值，那么它会默认是submit，其效果与input[type=submit]相同！
reset按钮不会提交，因此没有反应。
此外，总结一下各种提交表单的方式：
- 点击input[type=submit]
- 点击input[type=image]
- 点击button[type=submit]
- 在文本域或密码域等可以填空的表单元素内回车！
以上是关于表单元素之搭车系的主要内容，如果未能解决你的问题，请参考以下文章
如何在 Android Material Stepper 中验证表单？