在第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不能为空。
好的,今天先到这里了,大家晚安