23智科+23数科12.11实验课作业

注意

首先你需要安装好flask的环境，然后pip install flask-wtf
新建项目后，创建templates文件夹，把register.html放在这个文件夹里
注释部分不需要敲
app.py和forms.py放在根目录即可
点击代码块，可使用方向键左右移动查看代码
提交运行后截图

1.register.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <title>简单表单示例（Flask-WTF）</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      max-width: 600px;
      margin: 20px auto;
      line-height: 1.6;
    }
    label {
      display: block;
      margin-top: 10px;
    }
    input, select, textarea, button {
      margin-top: 4px;
    }
    input[type="text"],
    input[type="password"],
    input[type="email"],
    input[type="number"],
    input[type="date"],
    input[type="color"],
    input[type="url"],
    textarea,
    select {
      width: 100%;
      box-sizing: border-box;
      padding: 4px;
    }
  </style>
</head>
<body>
  <h1>简单表单示例（Flask-WTF）</h1>

  <form method="post" enctype="multipart/form-data">
    {{ form.hidden_tag() }}  {# CSRF 等隐藏字段 #}

    <!-- 文本类（用 WTForms 字段） -->
    <label>
      用户名（text）:
      {{ form.username(placeholder="请输入用户名") }}
    </label>

    <label>
      密码（password）:
      {{ form.password(placeholder="请输入密码") }}
    </label>

    <label>
      邮箱（email）:
      {{ form.email(placeholder="you@example.com") }}
    </label>

    <label>
      年龄（number）:
      {{ form.age(min="0", max="120") }}
    </label>

    <!-- 日期 / 颜色（简单起见，用原生 input，先不走 WTForms） -->
    <label>
      出生日期（date）:
      <input type="date" name="birthday">
    </label>

    <label>
      喜欢的颜色（color）:
      <input type="color" name="fav_color">
    </label>

    <!-- URL -->
    <label>
      个人主页（url）:
      <input type="url" name="website" placeholder="https://example.com">
    </label>

    <!-- 文件上传 -->
    <label>
      头像（file）:
      <input type="file" name="avatar">
    </label>

   <label>性别（radio）:</label>

   {% for subfield in form.gender %}
  <label>
    {{ subfield() }} {{ subfield.label.text }}
  </label>
{% endfor %}


    <label>
      {{ form.agree() }} 我同意协议（checkbox）
    </label>

    <!-- 下拉框 / 文本域 -->
    <label>
      国家（select）:
      {{ form.country() }}
    </label>

    <label>
      自我介绍（textarea）:
      {{ form.bio(rows=4, placeholder="简单介绍一下自己") }}
    </label>

    <!-- 隐藏字段（如果想和纯 HTML 一样也写一个） -->
    <input type="hidden" name="token" value="abc123">

    <div style="margin-top: 15px;">
      {{ form.submit(value="提交") }}
      <button type="reset">重置</button>
    </div>
  </form>
</body>
</html>

2.app.py

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
from flask import Flask, render_template, redirect, url_for
from forms import SimpleForm

app = Flask(__name__)
app.config["SECRET_KEY"] = "c12312"  # 实际项目请用随机值

@app.route("/", methods=["GET", "POST"])
def index():
    form = SimpleForm()
    if form.validate_on_submit():
        # 这里简单返回一个字符串，证明数据收到了
        username = form.username.data
        return f"表单提交成功，欢迎你，{username}！"
    return render_template("register.html", form=form)

if __name__ == "__main__":
    app.run(debug=True)

3.forms.py

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
from flask_wtf import FlaskForm
from wtforms import (
    StringField, PasswordField, IntegerField,
    BooleanField, RadioField, SelectField,
    TextAreaField, SubmitField
)
from wtforms.validators import DataRequired, Email, NumberRange, Length

class SimpleForm(FlaskForm):
    # 字段名 = 字段类型("标签", validators=[...])
    username = StringField("用户名", validators=[DataRequired()])
    password = PasswordField("密码", validators=[DataRequired(), Length(min=6)])
    email = StringField("邮箱", validators=[DataRequired(), Email()])
    age = IntegerField("年龄", validators=[NumberRange(min=0, max=120, message="年龄要在 0~120 之间")])

    gender = RadioField(
        "性别",
        choices=[("male", "男"), ("female", "女")],
        validators=[DataRequired(message="请选择性别")]
    )

    country = SelectField(
        "国家",
        choices=[("", "请选择"), ("cn", "中国"), ("us", "美国"), ("other", "其他")],
        validators=[DataRequired(message="请选择国家")]
    )

    bio = TextAreaField("自我介绍")
    agree = BooleanField("我同意协议", validators=[DataRequired(message="必须勾选同意协议")])

    submit = SubmitField("提交")