Flask 表单功能不适用于 Materialize 按钮 class

Question

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

申请代码如下：

@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 %}

Answer 1

第一个问题是一个小错字——link 文本之前多了一个 <。应该是：

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

即便如此，link 也不会做太多事情。 link 需要一个 href 属性才能实际指向某物。例如：

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

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

我建议阅读有关按钮的 Materialise 文档 here:

When you use a button to submit a form, instead of using a input tag, use a button tag with a type submit

因此，当您要提交表单时，您应该使用常规 button 而不是 a (hyperlink) 标签。使用相同的 Materialize 类，按钮和 link 看起来完全相同。

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

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

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

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>

Flask 表单功能不适用于 Materialize 按钮 class

Flask form function doesn't work with Materialize button class

html

css

materialize