2、表格、表单标签

一、表格标签

二、form表单标签

能够获取前端用户数据(用户输入、选择、上传的种种行为)，基于网络发送给后端服务器

<form action="" method="post">注意，表单内容放在这里才可以提交</form>
# 在该form标签内部书写的获取用户的数据都会被form标签提交到后端

# form表单的两个属性
action：控制数据提交的后端路径(大白话：给哪个服务端提交数据)
1.如果什么都不写，默认就是朝当前页面所在的url(地址)提交数据
2.写全路径，比如说我们写上 https://www.baidu.com，就是朝百度服务端提交
3.只写路径后缀，例如action='/index/'
	自动识别出当前服务端的ip和port拼接到前面
	host:port/index/
        
method：控制数据提交的传输方式，
1.不写的话是get明文传输，传输的数据会显示在url上
2.写上post就是密文传输

三、input标签

input标签需要卸载form标签内部，作用是获得用户输入信息，type属性值不同，搜集方式不同。最常使用的标签。下面我们就来介绍不同的type值分别的作用

type的属性

# text:普通文本
<input type="text" name="username">

##################################################################

# password:密文
<input type="password" name="password">

##################################################################

# date:日期
<input type="date" name="date">

##################################################################

# submit:提交按钮（提交用户输入的数据给服务端）
<input type="submit" value="提交内容">

##################################################################

# reset:重置按钮（点击之后重置之前输入的内容）
<input type="reset" value="重置内容">

##################################################################

# button:普通按钮（普通按钮，无任何的功能，后面可以用js给它自定义各种功能）
<input type="button" value="普通按钮">

##################################################################

# radio:单选框
<input type="radio" name="性别" checked='checked'>男
<input type="radio" name="性别">女

# checkbox多选
<input type="checkbox" checked>打游戏
<input type="checkbox">打篮球
<input type="checkbox">打雪仗
"""
radio和checkbox的name属性是用作关联的，表示一组内容
如果存在某一个选项较为常用，就可以使用checked='checked'，表示默认选择，
当属性名和属性值一样的时候可以直接简写属性名，如上可以直接简写为checked
"""

##################################################################

# file:获取文件（用户可以选择文件然后上传给服务端）
<input type="file" multiple>
# multiple参数表示可以选择多个文件上传

其他属性

value属性：value 属性的作用是由 input 标签的 type 属性的值决定
（当 type 为 button、reset、submit 中的其中一个时，此时 value 属性的值表示的是按钮上显示的文本
当 type 为 checkbox、radio 中的其中一个时，此时 value 属性的值表示的是提交给服务器的值
当 type 为 text、password 中的其中一个时，此时 value 属性的值表示的是输入框中显示的初始值）

name属性：定义表单元素的名称，此名称是提交数据时的键名，只有设置了name属性的表单元素才能在提交表单时传递它们的值

checked：默认被选中，radio和checkbox可使用
readonly：只读，text和password可使用
disabled：禁用input元素,所用input都可用

四、label标签

<!--label标签可以通过for属性来绑定其他控件的id值，如果点击了label就相当于点击了与其绑定id值的控件-->

<label for="d1">
	用户名：<input type="text" id="d1">
</label>

# 当然，我们也可以不把text包进去，只要for属性的值和绑定标签的id一样即可
<label for="d2">密码</label>
<input type="text" id="d2">

五、textarea标签

<!--可以输入大量文本的控件，cols设置列数，rows设置行数 -->
自我介绍：<textarea name="" id="" cols="30" rows="10"></textarea>

六、select下拉框标签

<!--单选-->
<select name="" id="">
    <option value="beijing">北京</option>
    <option value="shanghai">上海</option>
    <option value="shenzhen">深圳</option>
</select>

<!--多选-->
<select name="" id="" multiple>
    <option value="beijing">北京</option>
    <option value="shanghai">上海</option>
    <option value="shenzhen">深圳</option>
</select>

总结

'''
所有获取用户输入的标签，如果想在后端程序中取，就都应该有name属性，name就类似于字典的key，用户的数据就类似于字典的value

针对用户选择的标签，用户不需要输入内容，但是你需要提前给这些标签添加内容value值供用户选择

针对用户输入的标签。如果你加了value，那就是默认值
'''