Javascript 文本格式的幻灯片

我希望我能得到一些关于如何实现这个功能的建议。我有一个表单，其中的函数应该是，当一个人在表单内部单击时，文本应该在表单的上边框上向上滑动

文本向上滑动时，上边框应为文本留出空间。我在这里举例说明：

我很不确定我怎么能做到这一点。我知道我需要使用JQuery。所以我试着在上面做一个原型，但我不知道该去哪里。我希望有人能指引我正确的方向

<form action="/getdata.php">
  <input type="text" value="Firstname">
  <br><br>
  <input type="submit" value="Submit">
</form>



$('form').click(function(){
$(this).hide();
    $('div').animate({marginLeft:"0"},1500);
}); 

现在，您可以操纵标签，使用jQuery，推荐的方式是焦点事件，然后只需更改标签的左侧和顶部道具

<div class="inputContainer">
   <input type="text">
   <label>FirstName</label>
</div>

.inputContainer {
    position: relative;
}

inputContainer label {
    position: absolute;
    left: 5px;
    top: 20px; (relative to your input)
}