联系人表单工作不正确-HTML/CSS

我曾经让它按我想要的方式工作过，但似乎不能再让它工作了。这张图显示了我想要的结果，然后是发生了什么

为什么会这样

这是为我工作的代码：

<div class="form">
  <input type="name" name="name" autocomplete="off" required />
  <label for="name" class="label-name"> 
      <span class="content-name"> Name </span>  

不起作用的代码：

<div class="form"> 
    <input type="email" name="email" autocomplete="off" required />
    <label for="name" class="label-email">
        <span class="content-email"> Email </span>
</div>

---

我不知道为什么会这样，我在div中将“email”改为“emailaddress”，现在工作正常。

当输入中有文本时，需要在顶部保留占位符。使用javascript尝试此解决方案-

<div class="form"> 
    <input type="email" name="email" autocomplete="off" required />
    <label for="name" class="label-email">
        <span class="content-email"> Email </span>
</div>

.content-email {
  position: absolute;
  bottom: 5px;
  left: 0px;
  transition: all 0.3s ease;
}

.form input:focus + .label-email .content-email,
.form input:valid + .label-email .content-email {
  transform: translateY(-150%);
  color: #5fa8d3;
}

.form input:focus + .label-email::after,
.form input:valid + .label-email::after {
  transform: translateX(0%);
}