测试全栈化--前端学习(16)input属性提交和重置
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了测试全栈化--前端学习(16)input属性提交和重置相关的知识，希望对你有一定的参考价值。
在第15课，我们学习了html中<form>属性里的input type 里name和value属性。value属性值其实还没有说的特别清楚，再继续说下。
这里 请输入用户名和密码里的值，就是value值，可以在网页中删除掉。页面中的表单元素很多，如何区别不同的表单元素？
使用name属性，当前input表单的名字，后台可以通过这个name属性找到这个表单，页面中的表单很多，name的主要作用就是用于区别不同的表单。
如果页面一打开，就让某个单选按钮或者复选框是选中状态？
使用checked属性，表示默认选中状态，用于单选按钮和复选框。
如何让input表单展示不同的属性，比如单选按钮或者文本框?
使用input表单里的type属性标签，可以使input表单展示不同的属性。
接下来我们说下属性 提交和重置(越来越和后端有交集了，需要仔细听)
submit(定义提交按钮) 提交按钮会把表单数据提交给服务端
reset(定义重置按钮) 重置按钮会清楚表单中所有数据
对于submit,查看页面效果:
点击提交后，结果如下:
对应的代码如下:
<body>
<form action="https://www.baidu.com" method="GET">
用户名: <input type="text" maxlength="2" name="username" value="请输入用户名"> <br>
密码: <input type="password" name="password" value="请输入密码"> <br>
性别: 男<input type="radio" name="sex">
女<input type="radio" name="sex" checked> 人妖<input type="radio" name="sex"> <br>
爱好: 学习<input type="checkbox" name="happy" checked> 游戏<input type="checkbox" name="happy">
吃饭<input type="checkbox" name="happy"> <br>
提交: <input type="submit" name="提交" value="提交">
</form>
</body>
在性别那块展示不对，显示了很多happy=on
我们再调试下试试:
仔细看了下代码，没有错呢，happy=on，主要是复选框处全部进行了选择，所以会出现那么多的on
还是写的不对，提交的参数其实是value的值，所以value不能为空。
好的，今天先到这里了，大家晚安
以上是关于测试全栈化--前端学习(16)input属性提交和重置的主要内容，如果未能解决你的问题，请参考以下文章