目录
- 表格标签
- 表单标签
- action标签
- input标签
- select标签
- textarea标签
- form表单提交文件需要注意
- flask框架
1、表格标签
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>表格标签</title><meta name="viewport" content="width=device-width,initial-scale=1">
</head>
<body>
<!-- cellpadding：文字距离边框的距离border：边框厚度--><table border="7" cellpadding="5"><thead>
<!-- 一个tr就是一行--><tr>
<!-- th加粗的表头--><th>username</th><th>password</th><th>hobby</th></tr></thead><tbody><tr>
<!-- td不加粗的文本--><td>jason</td><td>123</td><td>read</td></tr><tr><td>egon</td><td>123</td><td>tea</td></tr><tr>
<!-- colspan占左右两个空格，水平方向--><td colspan="2">tank</td></tr><tr>
<!-- rowspan占上下两个空格，竖直方向--><td rowspan="2">jack</td><td>password</td><td>playing</td></tr><tr><td>test</td><td>test</td></tr></tbody></table>
</body>
</html>"""
@version:3.8
@author:Dinding
@file:01 表格标签.py
"""
2、表单标签
用于获取前端用户输入的数据(用户输入的、上传的、选择的)，基于网络发送给后端服务器。在该form标签内部书写的获取用户的数据都会被form标签提交
1、action标签
action：控制数据提交的后端路径-给哪个服务端提交数据
1、action为空：默认是朝当前页面所在的url提交数据
2、写全路径：https://www.luffycity.com/，朝路飞服务器提交
3、只写路径后缀：action='/index/'，会自动识别出当前页面所在的后端服务器的ip和port并拼接到前面，即host:port/index/-->
2、input标签
获取用户输入的标签，一般input标签要配合label标签一起使用，input不跟label关联也没问题。
第一种方式：将input标签写在label标签内：
<p>
<label for="d1"> <!--for="d1"表示这个label标签下面包的是id=“d1”的标签-->
username:<input type="text" id="d1" name="username">
</label>
</p>
第二种方式：通过input标签的id关联上label标签即可，无需嵌套
<p>
<label for="d2">password:</label>
<input type="password" id="d2" name="password">
</p>
input标签的类型：
text：普通文本
password：密文
date：日期 submit:提交按钮，用来触发form表单提交数据的动作，如果没有指定按钮的文本内容，不同的浏览器打开之后可能渲染的文本内容会不一致，需要指定value button：就是一个普通的按钮，本身没有任何的功能，但是它是最有用的，学完js之后可以给它自定义各种功能。
reset：重置内容
radio：单选
checked：默认选中，checked=“checked” ；当标签属性名和属性值一样时，简写成checked
checkbox：多选
file：获取文件
hidden：隐藏当前框，钓鱼网站就会用到
<p>你看不到我，隐藏了：
<input type="hidden">
</p>
针对用户输入的标签：
1、加上value="defaultvalue"，就是默认值，默认显示成defaultvalue，最终获取到的数据就是这里的defaultvalue。
2、加上disabled属性，就是只能看，不能改了，禁用。例如当我们修改密码的时候，用户名只能看不能改，需要修改的是密码。
3、readonly属性跟disabled差不多，也是只能看不能改。
<p>
<label for="da">
disable:<input type="text" id="da" name="disable" disabled value="disable">
</label>
</p>
3、select标签
默认是单选，加multiple可变成多选
4、textarea标签
用来获取大段文本：
<p>自我介绍：
<textarea name="" id="" cols="30" rows="10"></textarea>
</p>
3、form表单提交文件需要注意：
- method必须是post
如果不写，默认是get，但是我们这里是要提交用户输入或选择的数据给服务器，所以需要指定为post方式
<form action="http://127.0.0.1:5000/index/" method="post" enctype="multipart/form-data"> - enctype="multipart/form-data"
enctype类似于数据提交的编码格式，默认是urlencoded，只能够提交普通的文本数据，formdata就可以支持提交文件数据，这样上传的csv、Excel文件我们就能获取到了。
表单代码总结：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>表单标签</title><meta name="viewport"content="width=device-width,initial-scale=1">
</head>
<body><h1>注册页面</h1><form action="http://127.0.0.1:5000/index/" method="post" enctype="multipart/form-data">
<!-- 一般input要配合label一起使用，不一起使用也可以。有两种写法：一种嵌套，一种不嵌套-->
<!-- label和input标签都是行内标签会出现在一行内，可以用一个p标签包裹一下--><p><label for="d1">username:<input type="text" id="d1" name="username"></label></p><p><!--label标签是为了给input标签加一个标识--><label for="da">disable:<input type="text" id="da" name="disable" value="disableqw"></label></p><p>你看不到我，隐藏了：<input type="hidden"></p><p><label for="d2">password:</label><!--type=password表示输入密码的时候为星号*--><input type="password" id="d2" name="password"></p><p><label for="d3"><!--type=date，输入框内会有日期可供选择-->birth :<input type="date" id="d3" name="birthday"></label></p><p>gender:
<!-- <input type="radio" name="gender" checked="checked">男生当标签的属性名和属性值一样时，可以简写，例如checked--><input type="radio" name="gender" value="male" checked>男生<input type="radio" name="gender" value="female">女生<input type="radio" name="gender" value="other">其他</p><p><input type="submit" value="注册"><input type="button" value="按钮"></p><p>hobby:<input type="checkbox" name="hobby" value="read" checked>read<input type="checkbox" name="hobby" value="BD">BD<input type="checkbox" name="hobby" value="tea">tea<input type="checkbox" name="hobby" value="football">football<input type="checkbox" name="hobby" value="basketball">basketball</p><p>province1：<select name="multipleselect" id=""><option value="sz">深圳</option><option value="gz">广州</option><!--默认选中的是成都--><option value="cd" selected>成都</option><option value="sh">sh</option></select></p><p>province：<!--多选，加一个multiple--><select name="" id="" multiple><option value="">深圳</option><option value="" selected>广州</option><option value="" selected>成都</option><option value="">sh</option></select></p><p>province2：<select name="" id=""><!--双层嵌套--><optgroup label="sh"><option value="">fudong</option><option value="">fudong1</option><option value="">fudong2</option></optgroup><optgroup label="sh1"><option value="">chaoyang</option><option value="">chaoyang1</option><option value="">chaoyang2</option></optgroup><optgroup label="sh2"><option value="">111</option><option value="">222</option><option value="">333</option></optgroup></select></p><p>上传文件：
<!-- multiple支持上传多个文件--><input type="file" name="myfile" multiple></p><p>自我介绍：<textarea name="info" id="123" cols="30" rows="10"></textarea></p><p><input type="submit" value="注册"></input></p><p><input type="button" value="按钮-好玩的普通按钮"></p><p><input type="reset" value="重置"></p><button>提交数据</button></form><!-- 输入框的提示--><input type="text" placeholder="用户名提示"></body>
</html>4、FLASK框架
通过搭建flask框架，可以获取到前端表单中用户输入或者选择的数据。
from flask import Flask,request
app=Flask(__name__)# 当前url既可以支持get请求也可以支持post请求，如果不写默认只能支持get请求。
# 装饰器
@app.route('/index/',methods=['GET','POST'])
def index():print(request.form) # 打印出了form表单提交过来的非文件数据# 前端用户输入内容点击注册后，这里就会获取到键值对数据，如下：# 这里要补充两点# 1、这个地方打印能获取到数据的肯定是标签加上了name属性的，如果说提交的数据在这里没有，那么要检查是否给标签加了name属性# 2、那些用户选择的，不需要用户输入的标签，需要我们给这些值添加一个value值，不然我们获取到的键值对数据无法取到正确的值。# <input type="radio" name="gender" value="male" checked>男生# 获取到的数据：# ImmutableMultiDict([('username', ''), ('password', ''), ('birthday', ''), ('gender', 'male'), ('hobby', 'read'), ('myfile.png', 'Track My Tasks.xlsx')])# POST /index/ HTTP/1.1ImmutableMultiDict([])# 文件数据需要单独获取：print(request.files)# ImmutableMultiDict([('myfile.png', <FileStorage: 'Track My Tasks.xlsx' ('application/octet-stream')>)])file_obj=request.files.get('myfile.png') # 这里的myfile就是我们自己设置的name属性print(file_obj.name)file_obj.save(file_obj.name)return 'OK'app.run()
