This is a pattern that’s been going around for a while. This input looks to have placeholder text, but when you click or touch into it, that text moves out of the way and enabling you to type there.
Related
- CSS Star Ratings
- CSS Blob Loader Examples
- CSS Download Buttons
- CSS Neumorphism Login Forms
- CSS Pop Out Effects
- CSS Select Boxes
Brad Frost has an excellent piece on the subject, including the positives and disadvantages. We’ve seen a lot of demonstrations that use JavaScript. We are going to discuss about Floating Input Placeholder in this post.
Login Form with Floating Placeholder and Light Button
If you use the float CSS property, it will position an element to the left or right of its container, allowing text and inline elements to wrap around it. The element is removed from the usual flow of the page, despite the fact that it is still a part of the normal flow (in contrast to absolute positioning).
Input Placeholder Float to Top Example
The placeholder property offers a brief suggestion that communicates the intended value of an input field in a straightforward manner (e.g. a sample value or a short description of the expected format). Before the user puts a value into the input field, a brief suggestion is presented in the field.
Float Labels with Placeholder Shown
The placeholder property offers a brief description of the intended value of an input field / textarea in a single line of code. Immediately before the user inputs a value, a brief suggestion is presented in the field. You may design an input element that is properly accessible by using either a floating label or a static label.
Floating Placeholders Form
A floating label is a text label that shows inside the input field at its full font size, unlike a standard label. When a user interacts with the label, the label “floats” above the text, creating space for the user to enter a value.
Floating Placeholder Text
In computer programming, a placeholder is a letter, word, or string of characters that is used to temporarily replace the final data before it is processed. For example, a programmer may be aware that she need a specific amount of values or variables, but she may not be aware of what values or variables to input.
Conclusion
This is a trend that’s been going on for a long time. When first glance, it appears that this input has placeholder text, however upon clicking or touching it, the text disappears, allowing you to type there. Brad Frost has done an outstanding job of laying out both the benefits and negatives of the topic. JavaScript has been used in many demos.