Material Design Lite 表单按钮不提交任何内容答案

【问题标题】：Material Design Lite form button doesn't submit anythingMaterial Design Lite 表单按钮不提交任何内容
【发布时间】：2016-09-18 18:59:54
【问题描述】：

我对 CSS 比较陌生，可能会错过一些基本的东西。我从 Material Design Lite 的教程站点获得了 HTML 表单的代码，但它没有发送任何 HTTP 请求。

我错过了什么？

<div class="mdl-layout mdl-js-layout mdl-color--grey-100">
    <main class="mdl-layout__content">
        <div class="mdl-card mdl-shadow--6dp">
            <div class="mdl-card__title mdl-color--primary mdl-color-text--white">
                <h2 class="mdl-card__title-text">Acme Co.</h2>
            </div>
        <div class="mdl-card__supporting-text">
                <form action="foo.html">
                    <div class="mdl-textfield mdl-js-textfield">
                        <input class="mdl-textfield__input" type="text" id="username" />
                        <label class="mdl-textfield__label" for="username">Username</label>
                    </div>
                    <div class="mdl-textfield mdl-js-textfield">
                        <input class="mdl-textfield__input" type="password" id="userpass" />
                        <label class="mdl-textfield__label" for="userpass">Password</label>
                    </div>
                </form>
            </div>
            <div class="mdl-card__actions mdl-card--border">
                <button class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">Log in</button>
            </div>
        </div>
    </main>
</div>

【问题讨论】：

<head> 中的链接是否包含在内？
是的，我使用并包含 MDL 的 css 链接。
请在您的示例中包含该内容

标签： html css material-design-lite http-request

【解决方案1】：

将您的<Button> 放入<form></form> 标记内。

像这样：

<div class="mdl-layout mdl-js-layout mdl-color--grey-100">
    <main class="mdl-layout__content">
        <div class="mdl-card mdl-shadow--6dp">
            <div class="mdl-card__title mdl-color--primary mdl-color-text--white">
                <h2 class="mdl-card__title-text">Acme Co.</h2>
            </div>
        <div class="mdl-card__supporting-text">
                <form action="foo.html">
                    <div class="mdl-textfield mdl-js-textfield">
                        <input class="mdl-textfield__input" type="text" id="username" />
                        <label class="mdl-textfield__label" for="username">Username</label>
                    </div>
                    <div class="mdl-textfield mdl-js-textfield">
                        <input class="mdl-textfield__input" type="password" id="userpass" />
                        <label class="mdl-textfield__label" for="userpass">Password</label>
                    </div>
                    <div class="mdl-card__actions mdl-card--border">
                        <button class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect" type="submit" name="login">Log in</button>
                    </div>
                </form>
            </div>
        </div>
    </main>
</div>

【讨论】：

它也完全搞乱了布局。看起来 MDL 更针对您触摸提交按钮的手机，而不是在专注于密码输入字段时点击“输入”，否则会有解决此问题的 css 样式。
那个该死的按钮正是我想要的。谢谢

【解决方案2】：

<button class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect" type="submit" name="action">Submit</button>使用这个，你使用的是一个简单的按钮，但是一个 php 表单接受一个带有操作的提交类型按钮。

【讨论】：

【解决方案3】：

我认为你 100% 错了。

为什么？

HTML、CSS 和 JavaScript 无法发送 HTTP 请求。

您可以使用Ajax、PHP 或任何可以发送您想要的 HTTP 请求的编程语言。

【讨论】：

Ajax 是 javascript
是的，无论如何 Ajax 都可以发送 HTTP 请求。我还是编辑了答案。