【测试全栈化--前端学习】(16)input属性提交和重置

时间:2022-10-25 21:04:29

【测试全栈化--前端学习】(16)input属性提交和重置

在第15课,我们学习了HTML中<form>属性里的input type 里name和value属性。value属性值其实还没有说的特别清楚,再继续说下。

【测试全栈化--前端学习】(16)input属性提交和重置

这里 请输入用户名和密码里的值,就是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

【测试全栈化--前端学习】(16)input属性提交和重置

还是写的不对,提交的参数其实是value的值,所以value不能为空。


好的,今天先到这里了,大家晚安