Flask 表单功能不适用于 Materialize 按钮类答案

【问题标题】：Flask form function doesn't work with Materialize button classFlask 表单功能不适用于 Materialize 按钮类
【发布时间】：2023-03-21 06:05:01
【问题描述】：

我正在尝试使用 Flask 和 Materialize 创建一个网站。不幸的是，当我尝试使用 Materialize 的按钮类时，表单操作不起作用。我为让它工作所做的所有尝试最终都会改变我想要使用的图像的风格。这是不可能的，还是我错过了什么？

这是应用程序代码：

@application.route("/test",methods=['GET', 'POST'])
def test():
    if request.method =='POST':
        print("It worked")
    return render_template("test.html", the_title="Test")

这是 HTML 页面：

{% extends 'main.html' %}

{% block body %}

<form action="{{ url_for('test') }}" method="post">
    <!--This works-->
    <button name="test1" type="submit">Test1</button>

    <!--This doesn't work-->
    <a class="btn-large light-blue lighten-1"><Test2</a>
</form>

{% endblock %}

【问题讨论】：

标签： html css materialize

【解决方案1】：

第一个问题是一个小错字——链接文本前有一个额外的<。应该是：

<a class="btn-large light-blue lighten-1">Test2</a>

即便如此，链接也不会真正发挥作用。您需要一个href 属性才能使链接实际指向某些东西。例如：

<a href="/test" class="btn-large light-blue lighten-1">Test2</a>

即便如此，这也会向/test 路由发出GET 请求，而不是提交表单。

我建议阅读有关按钮 here 的 Materialize 文档：

当您使用按钮提交表单时，而不是使用输入标签，使用带有提交类型的按钮标签

因此，当您要提交表单时，您应该使用常规的button 而不是a（超链接）标签。使用相同的 Materialize 类，按钮和链接看起来是一样的。

你可以使用a标签来提交表单，如果这是你真正想要的——你只需要添加一些JavaScript来添加event listener，听@987654332 @事件，然后您的处理程序可以提交表单。

这是一个例子，展示了各种可能性。

第一个 button 是一个常规的 HTML 按钮，用于提交表单
第二个 button 也提交表单，但应用 Materialize 样式
第一个链接将发出GET 请求，而不是提交表单
第二个链接将在事件侦听器的帮助下提交表单，该事件侦听器会更改链接在单击时应执行的操作

document.getElementById('link2').addEventListener('click', (e) => {
  e.currentTarget.parentNode.submit();
});

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

<form action="{{ url_for('test') }}" method="POST">

  <!-- This is a plain HTML button -->
  <button type="submit" id="btn1">Test1</button>

  <!-- This is a materialize button -->
  <button class="btn-large light-blue lighten-1" type="submit" id="btn2">Test2</button>

  <!-- These are links with materialize style -->
  <a class="btn-large light-blue lighten-1" id="link1" href="/test">Test3</a>
  <a class="btn-large light-blue lighten-1" id="link2">Test4</a>

</form>

【讨论】：