Answer
This is known as Float (or Floating) Label or Adaptive Placeholder and it is a well known and extended UX pattern that solves the usability problems of not having a label (a very common design error) while maintaining a cleaner and more compact appearance.
Although it may not be the best option from UX’s point of view, usability metrics have shown consistent reports that this pattern is easily recognizable by users
Also, from Placeholders in Form Fields Are Harmful
Floating Labels
Rooted in minimalist web design, the floating-label pattern is a
modified approach to placeholders that mitigates some of the
disadvantages of traditional placeholders. This pattern has been
around for years, but it has finally made way onto mainstream
websites, and it has even been officially embraced by Google’s
Material Design.In this pattern, labels are placed within the form field as
placeholders until the field becomes active and the user moves the
input focus into the field. At that point, the placeholder label moves
to the top of the field. As a result, the floating label (also known
as an adaptive placeholder) is always visible, either in the center of
the form field, or above the text that the user entered
Attribution
Source : Link , Question Author : distalx , Answer Author : Devin