HTML/CSS开发的联系表单交互异常，无法复现预期浮动标签效果

• DOM结构不规范导致的交互异常
  1. 当前代码内的<label>元素没有添加闭合标签，浏览器解析时可能出现DOM层级错位，导致CSS中依赖相邻兄弟关系的选择器（如.form input + .label-email）无法准确匹配目标元素，绑定的上浮、下划线滑动样式自然无法生效。
  2. label的绑定属性值错误：当前邮箱输入框对应的label设置为for="name"，和输入框的标识完全不匹配。正常逻辑需要把这个值修改为for="email"，同时给对应的输入框补上id="email"属性，才能实现“点击label聚焦输入框”的基础交互，否则用户点击标签区域时根本无法触发输入框聚焦，自然也不会触发对应的浮动动画。
• 输入框校验规则变化导致的触发逻辑偏差
  此前可正常运行的代码中，输入框使用了无效的type="name"取值，浏览器会自动将其回退为普通文本输入框，搭配required属性时，只要输入框内存在任意非空内容，就会被判定为有效输入，触发:valid伪类，让标签保持上浮状态，和用户预期的交互逻辑完全匹配。
  替换为type="email"类型后，输入框会启用严格的邮箱格式校验规则：只有输入内容符合标准邮箱结构（包含@及有效域名后缀）时，才会被判定为有效输入，触发:valid伪类。如果仅输入普通文本、未达到邮箱格式要求，哪怕输入框有内容，只要焦点移开，就会因为输入框处于无效状态，导致标签从浮动位置落回原位，视觉表现和之前的正常效果差异极大，很容易被判定为交互失效。
• 样式片段不完整导致的动画偏差
  你提供的CSS片段仅定义了输入框聚焦、有效状态下的::after下划线滑动效果，没有补充该伪元素的初始状态（比如初始偏移位置、初始透明度、默认隐藏规则等），如果缺少这部分基础样式，下划线的动画表现会和预期参考效果存在明显偏差。

内容的提问来源于stack exchange，提问作者caden