HTML 中的材料设计表单无法按预期工作？答案

【问题标题】：Material Design Form in HTML not working as expected?HTML 中的材料设计表单无法按预期工作？
【发布时间】：2017-03-12 11:07:54
【问题描述】：

所以我正在创建一个简单的登录页面，并尝试使用 Google 的 Material Design 对其进行样式设置，我遇到了 MUI，它是一个 CSS3 框架，除了一件简单的事情之外，它只是我想要的，当我输入用户名时，浮动label 确实漂浮起来并且看起来很酷，但是一旦我离开该输入字段，浮动标签就会下沉，这看起来非常丑陋，显然不是我想要的。

我创建了一个 jsfiddle 来复制问题here。

<form class="" action="php/process_login.php" method="post">
    <legend>Login</legend>
    <div class="mui-textfield mui-textfield--float-label">
        <input type="text" name="username" id="username" class="">
        <label>Username</label>
    </div>

    <div class="mui-textfield mui-textfield--float-label">
        <input type="password" name="password" id="password" class="">
        <label>Password</label>
    </div>

    <div class="form-group">
        <input type="submit" class="mui-btn mui-btn--raised" value="Login">
    </div>
</form>

我遵循了一个简单的指南，该指南演示了它应该如何工作 here (Floating Labels) 并且效果很好。

谁能建议我如何解决这个问题？

【问题讨论】：

标签： html forms css material-design

【解决方案1】：

您还必须使用

加载 MUI javascript

<script src="//cdn.muicss.com/mui-0.9.3/js/mui.min.js"></script>

工作Demo。

【讨论】：

谢谢 Paolo，我现在觉得有点傻。在没有任何教程的情况下，我已经清醒了两天多从头开始编写一个基本的 CMS，并决定在深度编码上冷静下来，当我遇到这个问题时只做一些前端设计绝对需要睡眠 欢呼

【解决方案2】：

您尚未嵌入 Javascript 文件，请将其粘贴到您页面顶部的 head 部分：

<script src="//cdn.muicss.com/mui-0.9.3/js/mui.min.js"></script>

【讨论】：