2023.4.30学习

蹦蹦炸弹

已于 2023-05-01 16:57:36 修改

阅读量30

点赞数

文章标签：学习前端 html

于 2023-05-01 10:36:49 首次发布

本文链接：https://blog.csdn.net/KLKLKLKKK/article/details/130449569

版权

简单注册页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>用户注册</h1>
<div>
    用户名：<input type="text"/>
</div>

<div>
    密码:<input type="password"/>
</div>

<div>
    性别:
    <input type="radio">男
    <input type="radio">女
</div>

<div>
    爱好:
    <input type="checkbox">唱
    <input type="checkbox">跳
    <input type="checkbox">rap
    <input type="checkbox">篮球
</div>

<div>
    城市:
    <select>
        <option>北京</option>
        <option>上海</option>
        <option>深圳</option>
    </select>
</div>

<div>
    擅长领域:
    <select multiple>
        <option>吃</option>
        <option>喝</option>
        <option>玩</option>
        <option>乐</option>
    </select>
</div>

<div>
    备注：
    <textarea></textarea>
</div>
<div>
    <input type="button" value="提交">
    <input type="submit" value="提交">
</div>
</body>
</html>

浏览器向后端发送请求

get请求（url方法/表单提交）

现象：get请求、跳转、向后台传入数据数据会拼接在url上

（注意;get请求数据会在url中体现）

post请求（表单提交）

现象：提交数据不在url中而是在请求中

案例：用户注册

新创建项目

创建Flask代码

from flask import Flask,render_template,request

app = Flask(__name__)


@app.route('/register',methods=['GET','POST'])
def register():
    if request.method == "GET":
        return render_template('register.html')
    
    else:
        user = request.form.get("user")
        pwd = request.form.get("pwd")
        gender = request.form.get("gender")
        hobby_list = request.form.getlist("hobby")
        city = request.form.get("city")
        skill_list = request.form.getlist("skill")
        more = request.form.get("more")
        print(user, pwd, gender, hobby_list, city, skill_list, more)
        # 将用户信息写入文件中实现注册、写到exccel中实现注册、写入数据库中实现注册
        # 2.给用户返回结果
        return "注册成功"


if __name__ == '__main__':
    app.run()

html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h1>用户注册</h1>
    <form method="get" action="/register">
        <div>
        用户名: <input type="text" name="user"/>
        </div>
        <div>
        密码: <input type="password" name="pwd"/>
        </div>
        <div>
            性别:
            <input type="radio" name="gender" value="1">男
            <input type="radio" name="gender" value="2">女
        </div>
        <div>
            爱好：
            <input type="checkbox" name="hobby" value="10">唱
            <input type="checkbox" name="hobby" value="20">跳
            <input type="checkbox" name="hobby" value="30">rap
            <input type="checkbox" name="hobby" value="40">篮球
        </div>

        <div>
            城市:
            <select name="city">
                <option value="bj">北京</option>
                <option value="sh">上海</option>
                <option value="sz">深圳</option>
            </select>
        </div>

        <div>
            擅长领域:
            <select name="skill">
                <option value="100">吃饭</option>
                <option value="101">睡觉</option>
                <option value="102">打豆豆</option>
            </select>
        </div>

        <div>
            备注:
            <textarea name="more" cols="30" rows="10"></textarea>
        </div>
        <input type="submit" value="submit按钮">
    </form>
</body>
</html>

案例：登录

见代码示例

页面上的数据，想要提交到后台：

form标签包裹要提交的数据的标签

提交方式：method=“get”

提交的地址：action=“/xxx/xxx/xx”

在form标签里面必须有一个submit标签

在form里面的一些标签：input/select/textarea

一定要写name属性 <input type="text" name="uu"/>