带动画的登录表单input重叠、按钮与checkbox不显示问题

• 表单属性冲突：两个输入框未配置唯一id，且name属性均为name，两个label的for属性都指向name，导致CSS聚焦选择器匹配异常，动画无法正常触发。
• 布局分层缺失：所有输入框、label直接放在.inputs容器下，若原CSS中label使用了绝对定位，没有对应独立的相对定位父容器，所有元素都会堆叠在同一位置，出现重叠问题。
• 容器高度限制：.inputs容器设置了仅适配单个输入框的固定高度，新增元素后超出部分被overflow: hidden隐藏，导致checkbox、提交按钮不可见。

1. 修正语义属性：给每个input添加唯一id，同步修正name属性和对应label的for属性，保证一一绑定
2. 调整布局结构：每一组输入框+label用独立的.input-group容器包裹，给容器设置position: relative，作为内部绝对定位元素的基准
3. 调整容器样式：移除.inputs的固定高度配置，改为自适应高度，或设置足够容纳所有元素的高度，避免内容被截断

<div class="form">
        <div class="inputs">
            <!-- 用户名输入组 -->
            <div class="input-group" style="position: relative;margin-bottom: 24px;">
                <input type="text" autocomplete="off" id="username" name="username" placeholder=" " required>
                <label for="username" class="label-name">
                    <span class="content-name">username</span>
                </label>
            </div>
            <!-- 密码输入组 -->
            <div class="input-group" style="position: relative;margin-bottom: 16px;">
                <input type="password" id="password" name="password" placeholder=" " required>
                <label for="password" class="label-name">
                    <span class="content-name">password</span>
                </label>
            </div>
            <div class="hide">
                <input type="checkbox" onclick="myFunction()">Show Password
            </div>
            <button style="margin-top: 16px;">Login</button>
        </div>
</div>

如果原CSS是直接针对.inputs下的input、label设置定位，同步将选择器调整为.input-group input、.input-group label即可。

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