Jackherer Jackherer - 1 month ago 12
HTML Question

Material Design Form in HTML not working as expected?

So I am creating a simple login page and I am trying to style it using Googles Material Design, I came across MUI which a CSS3 framework that does just what I want except one simple thing, when I type in the username the floating label does float up and looks cool, but as soon as I move away from that input field the floating label sinks back down which looks incredibly ugly and obviously is not what I want.

I have created a jsfiddle to replicate the problem 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>


I have followed a simple guide that demonstrates how this should work here (Floating Labels) and it works well.

Could anyone suggest how I can fix this please?

Answer

You have to load also MUI javascript with

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

Working Demo.

Comments