今日作业
必做题
1.form表单所有知识点自己敲一遍并截图添加注释保存到手机
2.用html搭建一个注册页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" charset="UTF-8">
<title>用户注册页面</title>
</head>
<body>
<h1 style="color: deeppink">注册功能页面</h1>
<img src="https://p.ssl.qhimg.com/dmfd/260_200_100/t01964e99f039ab4f04.jpg" alt="这是我老婆" title="结衣老师" width="180px"/>
<hr>
<!--
form表单默认提交数据的方式 是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值
-->
<form action="http://182.92.59.34:5000/index/" method="post" enctype="multipart/form-data">
<p>
<label for="username" style="color: red">username: </label>
<input type="text" id="username" name="username" placeholder="请输入用户名~"/>
</p>
<p>
<label for="password" style="color: red">password: </label>
<input type="password" id="password" name="password" placeholder="请输入密码~"/>
</p>
<p>
<label for="birthday" style="color: green">birthday: </label>
<input type="date" id="birthday" name="birthday"/>
</p>
<p>
<label>gender: </label>
<label><input type="radio" name="gender" value="male" checked/></label><span>男 </span>
<label><input type="radio" name="gender" value="female"/></label><span>女 </span>
</p>
<p>
<label>hobby: </label>
<label><input type="checkbox" checked name="hobby" value="read"></label><span>read</span>
<label><input type="checkbox" checked name="hobby" value="sleep"></label><span>sleep</span>
<label><input type="checkbox" name="hobby" value="write"></label><span>write</span>
<label><input type="checkbox" name="hobby" value="cook"></label><span>cook</span>
</p>
<p>
<label for="city">city: </label>
<select name="city" id="city">
<option value="shanghai">上海</option>
<option value="beijing">北京</option>
<option value="hangzhou" selected>杭州</option>
<option value="nanjing">南京</option>
</select>
</p>
<p>
<label for="ogf">OldGirlFriend: </label>
<select name="ogf" id="ogf" multiple>
<option value="jy" selected>结衣老师</option>
<option value="bd" selected>波多老师</option>
<option value="mb">明步老师</option>
<option value="lz">龙泽老师</option>
</select>
</p>
<p>
<label for="file">upload file</label>
<input type="file" id="file" name="file"/>
</p>
<p>
<label for="introduce">introduce: </label>
<textarea name="introduce" id="introduce" cols="30" rows="10" placeholder="这个人很懒，什么都没有留下~"></textarea>
</p>
<p>
<input type="submit" value="提交"/>
<input type="button" value="返回"/>
<input type="reset" value="重置"/>
<button>点我</button>
</p>
<!--
form表单提交文件需要注意
1.method必须是post
2.enctype="multipart/form-data"
enctype类似于数据提交的编码格式
默认是urlencoded 只能够提交普通的文本数据
formdata 就可以支持提交文件数据
-->
</form>
</body>
</html>
使用flask框架验证form表单
"""
环境准备：pip install FLASK
"""
# 所有获取用户输入的标签 都应该有name属性
"""
后端会通过name来获取前端表单提交的数据
name就类似于字典的key
用户的数据就类似于字典的value
<p>gender:
<input type="radio" name="gender" value="male">男
<input type="radio" name="gender" value="female">女
</p>
"""
from flask import Flask, request
app = Flask(__name__)
# 设置路由,methods不设置则默认只能支持get请求
@app.route('/index/', methods=['GET', 'POST']) #
def index():
print(request.form) # 获取form表单提交过来的非文件数据
print(request.files) # 获取文件数据
file_obj = request.files.get('file') # 获取对应文件数据
file_obj.save("text.jpeg") # 保存文件数据
return 'it is ok'
app.run(host='0.0.0.0',port=5000,debug=True)
3.自己演示操作css各种选择器
选做题
1.用web框架体验一下form表单提交数据，完成前后端数据交互