html标签之表单标签

form表单标签

input表单标签的功能，采集前端用户的数据，通过网络通信交给后端服务器。

<form action=""></form>  # 在该form标签内部书写的获取用户的数据都会被form标签提交到后端
参数
	action：控制数据提交的后端路径(给哪个服务端提交数据)
        1.什么都不写，默认就是朝当前页面所在的url提交数据
        2.写全路径:https://www.baidu.com ，朝百度服务端提交
        3.只写路径后缀action='/index/'，自动识别出当前服务端的ip和port拼接到前面host:port/index/

input标签

在form表单标签里面书写input标签用来具体采集用户的数据。

<form action="">
    <input type="text" id="d1">
</form>

input标签的类型

input标签的功能有很多，不同type的表单负责不同的功能。

<input type="text">		# 普通文本
<input type="password">		# 密码文本，密码密文现实
<input type="date">		# 日期，固定日期提交格式
<input type="submit">		# 提交，用来触发form表单提交数据的动作
<input type="button">		# 按钮，普通按钮，本身没有功能，但是结合js可以绑定事件
<input type="reset">		# 重置
<input type="radio">		# 单选，	
<input type="checkbox">		# 多选
<input type="file">		# 文件，上传文件
<input type="hidden">		# 隐藏，隐藏当前输入框，钓鱼网站

#补充
<textarea name="" id="" cols="30" rows="10"></textarea>	# 文本域，支持大段文本

input标签的参数

<input type="text" name='username'>	# 设置上传数据的键
<input type="password" value=''>        # 获取上传数据的值 		 
<input type="date">			 
<input type="submit">		 
<input type="button">		 
<input type="reset">		 
<input type="radio" checked>		                    # 默认选中：checked='checked'，可简写为checked
<input type="checkbox">	
<input type="file" multiple>			            # 多文件：multiple
<input type="hidden">	

# 补充：
	- 当标签的属性名和属性值一样的时候可以简写，只写标签属性名即可
	- 所有获取用户输入的标签 都应该有name属性, name就类似于字典的key
	- 用户的数据就类似于字典的value，会提交给后台。value可以有初始默认值，会显示在输入框内

label标签

label标签一般和input标签配合使用。两种配合方式。

# 方式1：直接将input嵌套在在label内
<label for="d1">
	username:<input type="text" id="d1">
</label>					

# 方式2：直接id关联，不嵌套
<label for="d2">password:</label>
<input type="text" id="d2">
ps:input不跟label关联也没有问题

select下拉框标签

select标签也要写在form表单里面才能向后提交数据。

select标签默认是单选，加mutiple参数变多选，默认选中selected

<select name="" id="" multiple>
    <option value="" selected>新垣结衣</option>
    <option value="" selected>斯佳丽</option>
    <option value="">明老师</option>
</select>

button按钮

能够触发form表单提交数据的有2个标签：

<input type="submit" value="注册">
<button>点我</button>

补充!!!

label标签、input标签、select标签、button标签都是行内标签。
form表单默认请求方式是get请求，数据直接放在url后面，可以通过method参数修改提交方式。
```
<form action="http://127.0.0.1:5000/index/" method="post">
```
input中用户的输入和选择项，都必须要有name属性，才能提交给后台。name和value构成数据键值对。

对于是用户选择而不是输入的标签，需要提前给这些标签添加内容value值。

<p>gender:
    <input type="radio" name="gender" value="male">男
    <input type="radio" name="gender" checked value="female">女
    <input type="radio" name="gender" value="others">其他
</p>
<p>hobby:
    <input type="checkbox" name="hobby" value="basketball">篮球
    <input type="checkbox" checked name="hobby" value="football">足球
    <input type="checkbox" checked name="hobby" value="doublecolorball">双色球
</p>
<p>province：
    <select name="province" id="">
        <option value="sh">上海</option>
        <option value="bj" selected>北京</option>
        <option value="sz">深圳</option>
    </select>
</p>

form表单提交文件时，提交方式method必须是post，且enctype必须是"multipart/form-data"

<form action="" method="post" enctype="multipart/form-data">

# enctype类似于数据提交的编码格式
- 默认是urlencoded 只能够提交普通的文本数据
- formdata 不仅支持文本数据还支持提交文件数据

posted @ 2020-05-12 15:33 the3times 阅读(231) 评论(1) 编辑收藏举报

刷新页面返回顶部

the3times