Allow for a placeholder when using floating labels

[DaviDevMod]

At the moment, floating labels ignore the placeholder attribute and use the text in the <span> (the floating text) as placeholder.

That means the text displayed as placeholder must be the same as the one labelling the input.
Usually that's also what you want, but not always, e.g.: you may want "Email Address" as label and "[email protected]" as placeholder.

It would be nice not to ignore the placeholder attribute.

PS: I wasn't sure whether the transition between different texts would please my eyes, so I implemented the feature before opening this issue, to avoid asking for a feature I wouldn't even use. So if you don't mind I'm going to send a PR soon.

[DaviDevMod]

I thought I was opening a new issue, the template mislead me 😆
I don't think we need to discuss this.

[saadeghi]

How can we show both placeholder and the floating text at the same time when the placeholder text (inside the input) supposed to fly over the input?

[DaviDevMod]

I implemented it already.
At the moment the placeholder is simply ignored and the label transitions between the inside and the edge of the input.
I just added opacity to this transition, so that the label ends up invisible when inside the input.
Then I applied the same transition to the placeholder, but with the opacity inverted, so that it becomes invisible as it reaches the edge of the input.