How is this type of input label accomplished? : <p>I'm trying to figure out how these HTML inputs are achieved:</p>

<p><a href="https://i.stack.imgur.com/9kDa3.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/9kDa3.png" alt="enter image description here"></a></p>

<p>Google uses these inputs where the placeholder transitions up into the corner and becomes the label once the input is clicked. I thought they were somehow using the <code>&lt;fieldset&gt;</code> with the <code>&lt;legend&gt;</code> to accomplish this, but inspecting the code shows they are using an input with a div.. Is there a native way to do this I haven't heard of, or does anyone know how this is accomplished? </p>

<p><a href="https://accounts.google.com/signin/v2/identifier?continue=https%3A%2F%2Fmail.google.com%2Fmail%2F&amp;service=mail&amp;sacu=1&amp;rip=1&amp;flowName=GlifWebSignIn&amp;flowEntry=ServiceLogin" rel="nofollow noreferrer">example link</a></p>
