Search code examples
htmlformsform-submitmaterialize

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.


Solution

  • 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">send</i>
        </button>
    </div>
    

    Result:

    enter image description here