How to create textbox with fixed label in Material Design Lite?

问题

When I was reading the documentation in Material Design Lite's official page, no class name is mentioned for the fixed label with a textbox. In case of textarea they have a solution. But same code like the following one is creating only placeholder instead of a label for input type = "text".

<div class="mdl-textfield mdl-js-textfield">
    <input class="mdl-textfield__input" type="text" id="sample5">
    <label class="mdl-textfield__label" for="sample5">Text lines...</label>
  </div>

回答1:

I haven't seen this documented anywhere but it was annoying me so I delved into the SCSS to see what I could do. No changes to CSS are required. I managed to solve it by doing the following:

1. Add the mdl-textfield--floating-label has-placeholder classes to the outer <div> element.
2. Add a placeholder attribute to the <input> element, it can contain a value or remain empty; either way it will still work.

This will force the label to float above the input, instead of acting as a placeholder.

<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label has-placeholder">
  <input class="mdl-textfield__input" type="text" id="sample5" placeholder="">
  <label class="mdl-textfield__label" for="sample5">Text lines...</label>
</div>

来源：https://stackoverflow.com/questions/48647278/how-to-create-textbox-with-fixed-label-in-material-design-lite