Flask连接MySQL时表单提交按钮失效排查及HTML按钮标签差异咨询

一、Flask表单提交失效问题修复 #

1. 核心错误（main.py） #

你代码中判断POST请求的逻辑完全错误：if request.form=='POST'里的request.form是存储表单数据的对象，不是请求方法标识，正确判断方式是调用request.method属性。
另外你当前只打印了表单内容，没有执行数据插入、事务提交的逻辑，所以提交后页面不会展示新增的任务数据。

修正后的main.py代码如下：

mysql=MySQL(app)

@app.route("/",methods=["GET","POST"])
def insert():
    cur=mysql.connection.cursor()
    # 修正请求方法判断逻辑
    if request.method == 'POST':
        desc = request.form["description"]
        # 新增插入数据逻辑，字段名可根据你的实际表结构调整
        cur.execute("INSERT INTO test.task (description) VALUES (%s)", (desc,))
        # 提交MySQL事务，否则数据不会真正写入库
        mysql.connection.commit()
        print(desc)
    cur.execute("select * from test.task")
    task=cur.fetchall()
    cur.close()
    return render_template("base.html",task=task)

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

2. 其他小问题 #

base.html中<div class="=Task">多写了一个等号，修正为<div class="Task">即可，属于HTML语法错误，不影响表单提交但会导致样式失效。

二、<button>标签与<input>标签作为按钮的差异 #

• 可扩展性差异：<button>是容器标签，内部可以嵌套文本、图标、图片甚至其他HTML元素，自定义样式、实现复杂按钮效果更灵活；<input>是单标签，按钮显示内容只能通过value属性设置，仅支持纯文本。
• 默认行为兼容性差异：<button>如果不指定type属性，不同浏览器默认行为不同，IE旧版本默认是button（无提交功能），现代浏览器默认是submit（触发表单提交），存在兼容性歧义；<input type="submit">/<input type="button">的行为固定，不存在兼容性问题。
• 表单传值逻辑差异：<button type="submit" name="btn" value="1">提交</button>提交时会传递btn=1，显示内容和传值可以独立设置；<input type="submit" name="btn" value="提交">提交时传递的btn=提交，value值既是显示内容也是传值内容。

内容的提问来源于stack exchange，提问作者Argha Kamal Chakraborty