html - MaterializeCss 表单输入(提交)按钮

Question

我问这个问题是因为我遇到了这个问题，发现很少(不简洁)甚至没有关于此事的信息，这里是:

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

如果你尝试常规的方式，那就是:

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

这就是您将获得的:

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

---

我正在寻找的是提供替代方案的答案(没有 javascript，只有 html)。我将发布我自己的答案并希望有有趣的替代方案。

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>

结果: