如何在 Flask 中获取 HTML 表单按钮的 value 值

Flask 服务端只能通过 name 属性接收表单中按钮的 value 值，无法直接读取其他 HTML 属性（如 id、class 或自定义属性）；正确做法是为按钮设置 name，并用 request.form.get('name') 获取点击按钮的 value。

flask 服务端只能通过 `name` 属性接收表单中按钮的 `value` 值，无法直接读取其他 html 属性（如 `id`、`class` 或自定义属性）；正确做法是为按钮设置 `name`，并用 `request.form.get('name')` 获取点击按钮的 `value`。

在 Web 开发中，常需将用户点击的图标按钮（如 Font Awesome 图标）所代表的操作或标识持久化到数据库。但需明确一个关键前提：*Flask 作为后端框架，无法直接访问前端 DOM 元素的任意 HTML 属性（如 value、`data-、id等），除非这些值通过标准表单提交机制（

+method="POST"`）以键值对形式发送至服务器**。

因此，原代码中 <button value="fa-solid fa-heart fa-xl"></button> 的 value 属性本身不会被 Flask 自动接收——必须配合 name 属性，并置于 <form></form> 内，才能被 request.form 解析。

✅ 正确实现方式如下：

Doc To HTML

使用 MinerU 文档处理引擎将 Word 文档（.doc、.docx）转换为保留结构和格式的干净 HTML。

下载

HTML 模板中使用语义化表单结构（注意：<button></button> 的 type="submit" 是关键）：

? 提示：value 值建议使用简洁、可读性强的标识符（如 heart），而非完整 CSS 类名。若需在后端还原完整图标类，可通过字典映射：
ICON_MAP = {
    "heart": "fa-solid fa-heart fa-xl",
    "gamepad": "fa-solid fa-gamepad fa-xl",
    # ... 其他映射
}

Flask 路由中安全获取提交值：

from flask import Flask, request, render_template

app = Flask(name)

@app.route('/select-icon', methods=['GET', 'POST']) def select_icon(): if request.method == 'POST': selected_value = request.form.get('icon') # ✅ 获取按钮 value if selected_value:

示例：存入数据库（此处仅打印验证）

        print(f"Received icon identifier: {selected_value}")
        # db.session.add(IconRecord(icon_class=ICON_MAP.get(selected_value)))
        # db.session.commit()
    else:
        print("No icon button was clicked.")
return render_template('select_icon.html')


⚠️ 注意事项：
- 不要尝试 `request.form.get("xxx").getattr("value")` 或类似反射操作——`request.form` 返回的是 `ImmutableMultiDict`，不是 DOM 对象，不支持 `.getAttribute()`。
- 避免在按钮上使用 `type="button"`（非提交型），否则不会触发表单提交；必须用 `type="submit"` 或通过 JavaScript 调用 `form.submit()`。
- 若需同时提交多个字段（如用户 ID + 图标选择），所有字段应同属一个 `

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索前端的入门与实战技巧！