python flask 表单设置输入框大小

原创

mob64ca12ea4e24 2024-08-10 05:06:17 ©著作权

©著作权归作者所有：来自51CTO博客作者mob64ca12ea4e24的原创作品，请联系作者获取转载授权，否则将追究法律责任

使用 Flask 创建表单并设置输入框大小

Flask 是一种轻量级的 Python Web 框架，深受开发者喜爱。其简洁易用的特性使得构建网页应用变得相对简单。在 Flask 中，表单是用户与应用交互的重要部分。本文将重点介绍如何使用 Flask 构建一个基本表单，并设置输入框的大小。

安装 Flask

首先，确保你已经安装了 Flask。如果还没有安装，可以使用 pip 命令进行安装：

pip install Flask

创建基本的 Flask 应用

接下来，我们需要创建一个 Flask 应用。在项目根目录下新建一个 app.py 文件，并添加以下代码：

from flask import Flask, render_template, request

app = Flask(__name__)

@app.route('/', methods=['GET', 'POST'])
def index():
    if request.method == 'POST':
        username = request.form['username']
        return f'Hello, {username}'
    return render_template('index.html')

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

在上面的代码中，我们定义了一个基本的 Flask 应用，并设置了一个根路由。在该路由中，我们处理 GET 和 POST 请求。

创建表单 HTML 页面

在项目根目录下，新建一个 templates 文件夹，并在其中创建 index.html 文件。然后输入以下内容：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flask Form</title>
    <style>
        /* 设置输入框大小 */
        .input-large {
            width: 300px;
            height: 40px;
            font-size: 16px;
        }
    </style>
</head>
<body>
    用户注册表单
    <form method="POST">
        <label for="username">用户名:</label>
        <input type="text" id="username" name="username" class="input-large" required>
        <input type="submit" value="提交">
    </form>
</body>
</html>

在这里，我们通过 CSS 设置了输入框的大小，类名为 input-large。用户在输入框中填写用户名后，点击提交按钮。

运行应用

现在可以运行应用。在终端中执行以下命令：

python app.py

打开浏览器，访问 `

序列图展示用户交互

下面是一个简单的序列图，展示用户与系统的交互过程：

sequenceDiagram
    participant User
    participant Browser
    participant FlaskApp

    User->>Browser: 访问表单页面
    Browser->>FlaskApp: 请求表单数据
    FlaskApp-->>Browser: 返回表单 HTML
    User->>Browser: 填写用户名
    User->>Browser: 提交表单
    Browser->>FlaskApp: 提交 POST 请求
    FlaskApp-->>Browser: 返回问候信息