input属性提交和重置(重置input输入框的内容)

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

input属性提交和重置(重置input输入框的内容)

这里 请输入用户名和密码里的值,就是value值,可以在网页中删除掉。页面中的表单元素很多,如何区别不同的表单元素?

使用name属性,当前input表单的名字,后台可以通过这个name属性找到这个表单,页面中的表单很多,name的主要作用就是用于区别不同的表单。

如果页面一打开,就让某个单选按钮或者复选框是选中状态?

使用checked属性,表示默认选中状态,用于单选按钮和复选框。

如何让input表单展示不同的属性,比如单选按钮或者文本框?

使用input表单里的type属性标签,可以使input表单展示不同的属性。

 

接下来我们说下属性 提交和重置(越来越和后端有交集了,需要仔细听)

submit(定义提交按钮) 提交按钮会把表单数据提交给服务端

reset(定义重置按钮) 重置按钮会清楚表单中所有数据

对于submit,查看页面效果:

input属性提交和重置(重置input输入框的内容)

点击提交后,结果如下:

input属性提交和重置(重置input输入框的内容)

对应的代码如下:

<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

input属性提交和重置(重置input输入框的内容)

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

版权声明:本文内容由互联网用户投稿发布,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 2211788188@qq.com 举报,一经查实,本站将立刻删除。如需转载请注明出处:https://www.wptmall.com/a/article/17587

为您推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注