Нечто типа этого, зачем тут что-то скрывать?
Или так, для доступности, с label:
Нужна анимация? JS в помощь для надёжности. Можно написать обработчики полей и анимацию кастомного placeholder на смене классов, а можно использовать плагин для автоматической генерации оных:
https://speckyboy.com/floating-form-label-plugins/
В будущем можно будет это всё делать с помощью только CSS.
Но пока что не используйте CSS-метод а-ля этого, ибо не все браузеры нормально не работают с этим
input:placeholder-shown. Или вообще не работают. Ну а так, через пару лет можно везде спокойно использовать CSS, чтобы делать так:
