M.M M.M - 4 months ago 30
HTML Question

MaterializeCss Form input (submit) button

I am asking this question because I was faced we this very problem and found little (unconcise) to none information on the matter, here goes:

Having an html form, how to properly set up a submit button with materializecss?

If you try the conventional way, that is:

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


This is what you'll get:
enter image description here

As you can see the clickable part is only the middle of the button, and the rest won't trigger the form submition.




What i am looking for are answers (no javascript, just html) that offer alternatives. I'll post my own answer and hope for interesting alternatives.

M.M M.M
Answer Source

This worked out great and allows for image inclusion:

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

Result:

enter image description here