1.表格标签
数据展示:
jason 123 read
egon 123 dbj
tank 123 hecha
...
<table> <thead><tr> 一个tr就表示一行<th>username</th> 加粗文本<td>username</td> 正常文本</tr></thead> 表头(字段信息)<tbody><tr><td>jason</td><td>123</td><td>read</td></tr><tr><td>egon</td><td rowspan="2">egon</td><td>DBJ</td></tr></tbody> 表单(数据信息)
</table><table border="1"> 加外边宽
<td colspan="2">egon</td> 水平方向占多行
<td rowspan="2">DBJ</td> 垂直方向占多行# 原生的表格标签很丑 后续一般都是使用框架封装好的 很好看
2.表单标签
"""
能够获取前端用户数据(用户输入的、用户选择、用户上传...)基于网络发送给后端服务器
"""
# 写一个注册功能
<form action=""></form> 在该form标签内部书写的获取用户的数据都会被form标签提交到后端action:控制数据提交的后端路径(给哪个服务端提交数据)1.什么都不写 默认就是朝当前页面所在的url提交数据2.写全路径:https://www.baidu.com 朝百度服务端提交3.只写路径后缀action='/index/' 自动识别出当前服务端的ip和port拼接到前面host:port/index/<label for="d1"> 第一种 直接讲input框写在label内username:<input type="text" id="d1">
</label> 第二种 通过id链接即可 无需嵌套
<label for="d2">password:</label>
<input type="text" id="d2">
ps:input不跟label关联也没有问题"""
label 和 input都是行内标签
"""input标签 就类似于前端的变形金刚 通过type属性变形text:普通文本password:密文date:日期 submit:用来触发form表单提交数据的动作button:就是一个普普通通的按钮 本身没有任何的功能 但是它是最有用的，学完js之后可以给它自定义各种功能reset:重置内容radio:单选默认选中要加checked='checked'<input type="radio" name="gender" checked='checked'>男当标签的属性名和属性值一样的时候可以简写<input type="radio" name="gender" checked>女checkbox:多选<input type="checkbox" checked>DBJfile:获取文件 也可以一次性获取多个<input type="file" multiple>hidden:隐藏当前input框钓鱼网站select标签 默认是单选 可以加mutiple参数变多选 默认选中selected<select name="" id="" multiple><option value="" selected>新垣结衣</option><option value="" selected>斯佳丽</option><option value="">明老师</option></select>textarea标签 获取大段文本<textarea name="" id="" cols="30" rows="10"></textarea># 能够触发form表单提交数据的按钮有哪些(一定要记住)1、<input type="submit" value="注册">2、<button>点我</button># 所有获取用户输入的标签 都应该有name属性name就类似于字典的key用户的数据就类似于字典的value<p>gender:<input type="radio" name="gender">男<input type="radio" name="gender">女<input type="radio" name="gender">其他</p>
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>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"><p><label for="d1">username:<input type="text" id="d1" name="username" value="默认值" readonly></label></p><p><label for="d2">password:<input type="password" id="d2" name="password"></label></p><input type="hidden" name="usernamename" value="骗子账户"><p>birthday:<input type="date"></p><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>
<p>文件:<input type="file" multiple name="myfile"></p><p>自我介绍:<textarea name="info" id="" cols="30" rows="10"></textarea></p><input type="submit" value="注册">
<input type="button" value="按钮"><input type="reset" value="重置"><button>点我</button></form>
</body>
</html>
2.1 验证form表单提交数据
# 接下来的框架代码无需掌握 看一下效果即可
pip3 install FLASKform表单默认提交数据的方式 是get请求 数据是直接放在url后面的http://127.0.0.1:5000/index/?username=sdadasdsda&gender=on
你可以通过method指定提交方式<form action="http://127.0.0.1:5000/index/" method="post">针对用户选择的标签 用户不需要输入内容 但是你需要提前给这些标签添加内容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表单提交文件需要注意1.method必须是post2.enctype="multipart/form-data"enctype类似于数据提交的编码格式默认是urlencoded 只能够提交普通的文本数据formdata 就可以支持提交文件数据
"""
<form action="http://127.0.0.1:5000/index/" method="post" enctype="multipart/form-data">"""下面的代码无需掌握 你只需要关心form表单即可"""
from flask import Flask, requestapp = Flask(__name__)# 当前url既可以支持get请求也可以支持post请求 如果不写默认只能支持get请求
@app.route('/index/',methods=['GET','POST'])
def index():print(request.form) # 获取form表单提交过来的非文件数据# ImmutableMultiDict([('username', 'jason'), ('password', '123132131231233'), ('gender', 'on')])print(request.files) # 获取文件数据file_obj = request.files.get('myfile.png')file_obj.save(file_obj.name)return 'OK'app.run()# 针对用户输入的标签。如果你加了value 那就是默认值
<label for="d1">username:<input type="text" id="d1" name="username" value="默认值"></label>
disable 禁用
readonly只读
