如何在输入按钮上使用 Material Design Lite

Question

我有这个 html，它使用 Material Design Lite 1.3:

<div id="submit-gs-req-form">

    <div class="demo-card-wide mdl-card mdl-shadow--2dp">

        <div class="mdl-card__title">
            <h2 class="mdl-card__title-text">Submit Request</h2>
        </div>


        <div class="mdl-card__supporting-text">
            Use this form to submit a google sheets request

            <form action="/gs_2_yaml" method="post">

                <div class="text-field-div">
                    <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
                        <input class="mdl-textfield__input" id="process_sheets_input" name="process_sheets" type="text" pattern=".*">
                        <label class="mdl-textfield__label" for="process_sheets_input">Process Sheets</label>
                        <span class="mdl-textfield__error">Must be comma separated integers</span>
                    </div>
                </div>

                <div class="text-field-div">
                    <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
                        <input class="mdl-textfield__input" type="text" name="process_lines" id="process_lines_input">
                        <label class="mdl-textfield__label" for="process_lines_input">Process Lines</label>
                        <span class="mdl-textfield__error">Mobile must be a number!</span>
                    </div>
                </div>

                <div class="text-field-div">
                    <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
                        <input class="mdl-textfield__input" type="url" name="sheet_url" id="url_input">
                        <label class="mdl-textfield__label" for="url_input">URL</label>
                        <span class="mdl-textfield__error">Enter a valid URL</span>
                    </div>
                </div>

                <input type="submit" value="Submit">

            </form>
        </div>

    </div>


    <div id="next_button">
        <button class="mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect">
            <i class="material-icons">arrow_forward</i>
        </button>
    </div>
</div>

我想做的是

<input type="submit" value="Submit">

并将其替换为：

<div id="next_button">
    <button class="mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect">
        <i class="material-icons">arrow_forward</i>
    </button>
</div>

如何将输入设置为按钮并按照按钮的样式设置样式？换句话说，我希望按钮在表单的框外，并像按钮一样设置样式，但我希望按钮控制表单的提交，尽可能不使用额外的代码。

Answer 1

您可以给您的 <form> 一个 name 属性并向您的按钮添加一个 onclick 属性，如下所示：

<form name="myForm" action="/gs_2_yaml" method="post">...</form>

<button onclick="document.myForm.submit()">
  <i class="material-icons">arrow_forward</i>
</button>

如何在输入按钮上使用 Material Design Lite

How to use Material Design Lite on an input button

html

material-design-lite