day14-Html的body内标签之input序列
一、引子
我们在页面的使用中经常会遇到登录界面，今天我们就来看看登录界面需要哪些标签，这些标签该如何使用，使用最多的是input标签
二、开搞 input 标签
2.1、input 标签类型
说明：input 标签自闭合标签，
标签，type有很多属性，例如文本框：“text" 文本框加 * "password"
按钮：button , 提交按钮：submit，
1 <input type="text" /> 2 <input type="password" /> 3 <input type="button" value="确定"/> 4 <input type="submit" value="取消" />
效果如下：
2.2、form表单提交
作用：作用：form标签配合action属性，告诉你提交的数据到哪里。
<form action="http://10.10.10.75:8888/index" method="POST"> <!-- method 有两种方式 POST,GET--> <input type="text" name="user" /> <input type="text" name="email" /> <input type="password" name="pwd" /> <!--以字典的形式提交数据到后台--> <input type="button" value="登陆1"> <input type="submit" value="登陆2"> </form>
input 类型只有是submit 点击之后才会提交，button 不行
form表单中属性的功能：
- action：指定你需要发送的后台的url
- method：你提交的表单需要用到什么方法，这边有POST和GET，如果不写method方法，默认请求是get请求
注意：
对于一个input标签，如果想向后台提交数据的时候，input标签一定要加上name这个属性，当你点击submit哪个登录按钮的时候，在html里面就会把你输入的数据做一个打包，把包打成一个类似于字典类型的数据类型，{"user_name":"zhangsan","pwd":"laoniubila"}，然后再提交到后台，我就能拿到这个数据，然后做出相应响应。
问：post和get方法有什么区别？
答：post方法请求的参数是在body中，而get方法的请求参数是在head中
三、input 标签其他类型
3.1、text类型设置默认值
<input type="text" value="老牛逼啦" />
效果如下：
3.2、单选框radio
1 <div> 2 <p>请选择性别</p> 3 <span>男</span> <input type="radio" /> 4 <span>女</span> <input type="radio" /> 5 6 </div>
效果如下：
这不是我们想要的结果，我们要的是只能选中其中一个。
显示方式，在代码中设置同一个 name 属性，
1 <div> 2 <p>请选择性别</p> 3 <span>男</span> <input type="radio" name="grander"/> 4 <span>女</span> <input type="radio" name="grander"/> 5 6 </div>
那么后台需要通过什么方式来获取选中的值呢，否则又迷糊了，再加一个 value 属性
<div> <p>请选择性别</p> <span>男</span> <input type="radio" name="grander" value="1"/> <span>女</span> <input type="radio" name="grander" value="2"/> </div>
还需要来个默认选中的效果， checked
1 <div> 2 <p>请选择性别</p> 3 <span>男</span> <input type="radio" name="grander" value="1" checked='checded'/> 4 <span>女</span> <input type="radio" name="grander" value="2"/> 5 6 </div>
3.3、多选框 checkbox
<form action="10.10.10.75" method="GET">
<div>
<p>爱好选择</p>
<span>足球</span><input type="checkbox" name="1">
<span>篮球</span><input type="checkbox" name="2">
<span>乒乓球</span><input type="checkbox" name="3">
<span>AV</span><input type="checkbox" name="4">
</div>
<input type="submit" value="提交">
method 方式用get 选中的结果会在 URL 中显示，post 则不会，之前有介绍过，默认用GET
效果如下
ps:加name 属性，是为了后台获取数据时，或获取到一个列表，用来区别选中哪些选项
如下图：
3.4、上传文件 按钮
在很多网页中，都能看到上传文件的按钮，一点弹出选择文件的对话框。
1 <body> 2 <form enctype="multipart/form-data" action="10.10.10.75" method="POST"> 3 4 <input type="file" name="fname"> 5 </form> 6 7 </body>
enctype="multipart/form-data" 一定要加这个属性设置，才能把文件上传。
这个属性表示你本地的文件需要一点一点的发送给服务器，服务器接收到，然后写到服务器的磁盘上。
效果如下：
3.5、重置
作用:把当前表单中，所有文本框，选项恢复默认值
1 <form action="10.10.10.75" method="GET"> 2 <div> 3 <p>爱好选择</p> 4 <span>足球</span><input type="checkbox" name="1" > 5 <span>篮球</span><input type="checkbox" name="2"> 6 <span>乒乓球</span><input type="checkbox" name="3"> 7 <span>AV</span><input type="checkbox" name="4" checked="checked"> 8 </div> 9 <input type="submit" value="提交"> 10 <input type="reset" value="重置" /> 11 </form>
效果如下
选中，足球，点击重置后，足球选项就取消了
四、总结
input:序列，要点
1、input type="text" -name属性，value="默认显示值"
2、input type="password" -name属性，value="默认显示值" 输入显示星号，不显示
3、input type="submit" value="提交” 配合 form 标签，只有这个才会提交后台
4、input type="button" value="按钮“ 跟submit长的很像，普通按钮
5、input type="radio" 需要设置name 属性一样，才能互斥 效果 后台用value 来区分
6、input type="checkbox” 多选框，后台获取一个列表， value 来区分选项。
7、input type="file" 依赖 form 表单的 enctype="multipart/form-data" 属性，才能上传，name 属性，获取句柄
8、input type="reset" 重置 效果，这个很好理解。
浙公网安备 33010602011771号