MaterializeCss 表单输入（提交）按钮

Question

我问这个问题是因为我遇到了这个问题，发现很少（不简洁）到 none 关于此事的信息，这里是：

有了 html 表单，如何使用 materializecss 正确设置提交按钮？

如果你尝试常规方式，即：

<form>
    <div class="file-field input-field">
        ...
        <input type ="submit" class ="btn waves-effect waves-light" value = "Submit"/>
    </div>
</form>

这就是您将获得的：

可以看到，可点击的部分只有按钮中间部分，其余不会触发表单提交。

我正在寻找的是提供替代方案的答案（没有 javascript，只有 html）。我会 post 我自己的答案，并希望有有趣的选择。

Answer 1

效果很好，可以包含图像：

<div class="row">
    <button class="btn waves-effect waves-light" type="submit" name="action">Submit
        <i class="material-icons right">send</i>
    </button>
</div>

结果：

Answer 2

 <script>
    Waves.attach('.YOUR-Button-Class', ['waves-button', 'waves-float']);
</script>

MaterializeCss 表单输入（提交）按钮

MaterializeCss Form input (submit) button

html

forms

form-submit

materialize