使用google material design lite创建类似Gmail的浮动文本框

<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
<script src="https://code.getmdl.io/1.3.0/material.min.js"></script>

<form action="#">
  <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
    <input class="mdl-textfield__input" type="text" id="email">
    <label class="mdl-textfield__label" for="email">Email</label>
  </div>
</form>

<script>
  document.addEventListener("DOMContentLoaded", function() {
    componentHandler.upgradeAllRegistered();
  });
</script>