Let me start off by saying you really shouldn’t put form labels—or even placeholder text—inside of form fields
I consider place holder text as an example of what the field should contain, not really a label. But if you must use placeholder text as a ‘faux label’ this article does present a great way to handle it. PLUS IT REMINDS YOU TO ALWAYS HAVE A LABEL in your markup , even if you are using place holder text.
I am partial to ‘Labels slide outside of the fields’ and ‘tool tip’ approach, especially because effects liek these could be achieved with CSS and/or minor markup rearrangements.
<!DOCTYPE HTML>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width">
<style type="text/css">
input:focus + label {visibility: visible}
input + label {visibility:hidden }
</style>
</head>
<body>
<form>
<div>
<input placeholder="label" name='x' id='x'> <label for'x'>Label</label><br>
<input placeholder="label" name='x' id='x'> <label for'x'>Label</label><br>
</div>
</form>
</body>
</html>
Just a proof of concept; I am sure it could be done better.