如何在Flask中获取HTML按钮的value属性并存入数据库？

核心问题分析 #

你之前的尝试无效，主要有两个原因：

• request.form.get("selected")返回的是对应name属性的值，而非DOM元素对象，所以无法调用.getattr("value")这类方法——它本身就是value的内容。
• 你用的是type="button"按钮，这类按钮默认不会触发表单提交，也不会被自动包含到表单数据中，即便通过JS添加name属性，不主动处理提交逻辑的话，Flask也拿不到数据。

方法1：用单选按钮模拟图标按钮（推荐） #

把图标包装成单选按钮的形式，借助CSS隐藏原生单选框，让图标看起来像按钮，表单提交时会自动把选中项的value传给Flask：

<form method="POST" action="/save-icon">
  <!-- 第一个图标选项 -->
  <label class="icon-option">
    <input type="radio" name="selected_icon" value="fa-solid fa-heart fa-xl" hidden>
    <i class="fa-solid fa-heart fa-2xl icons"></i>
  </label>
  <!-- 第二个图标选项 -->
  <label class="icon-option">
    <input type="radio" name="selected_icon" value="fa-solid fa-gamepad fa-xl" hidden>
    <i class="fa-solid fa-gamepad fa-2xl icons"></i>
  </label>
  <!-- 其余图标按此格式添加 -->
  <button type="submit" class="save-btn">保存选择</button>
</form>

对应的CSS样式（让选项看起来像可点击按钮）：

.icon-option {
  display: inline-block;
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  cursor: pointer;
  margin: 0 6px;
}
.icon-option:hover {
  background-color: #f8f9fa;
}
/* 选中时高亮图标 */
input[type="radio"]:checked + .icons {
  color: #0d6efd;
  border-color: #0d6efd;
}

Flask视图层获取数据：

@app.route('/save-icon', methods=['POST'])
def save_icon():
    selected_icon = request.form.get('selected_icon')
    if selected_icon:
        # 执行存入数据库的逻辑，例如：
        # new_entry = IconChoice(icon_class=selected_icon)
        # db.session.add(new_entry)
        # db.session.commit()
        return "图标选择已保存"
    return "请先选择一个图标"

方法2：保留原按钮结构，直接提交 #

如果一定要保留<button>标签，只需把按钮放到表单里，直接给按钮设置name属性，将按钮类型设为submit：

<form method="POST" action="/save-icon">
  <button id="iconDiv1" class="iconBtn" type="submit" name="selected_icon" value="fa-solid fa-heart fa-xl">
    <i class="fa-solid fa-heart fa-2xl icons"></i>
  </button>
  <button id="iconDiv2" class="iconBtn" type="submit" name="selected_icon" value="fa-solid fa-gamepad fa-xl">
    <i class="fa-solid fa-gamepad fa-2xl icons"></i>
  </button>
  <!-- 其余按钮按此格式添加 -->
</form>

Flask中同样用request.form.get('selected_icon')获取值——点击哪个按钮，它的value就会被自动传入表单数据。

内容的提问来源于stack exchange，提问作者Hassanein ali