点击Sign In按钮无法显示登录表单的问题如何解决？

• 按钮默认行为冲突：放在form内部的<button>默认类型为submit，点击后会直接提交表单刷新页面，JS绑定的点击事件还未生效页面就已重置，无法触发显隐逻辑
• 显隐逻辑错误：当前代码设置点击后显示form元素，但初始状态下form本身就是可见的，即使事件成功触发也看不到视觉变化
• 标签结构错误：代码末尾存在多余的无对应开标签的</div>，可能导致DOM解析异常
• 辅助属性不匹配：label的for属性值与对应input的id不一致，点击label无法自动聚焦到输入框

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    // 初始隐藏登录输入区域
    $(".login-input-group").hide();
    $("#s1").click(function(e){
        // 阻止按钮默认提交表单的行为
        e.preventDefault();
        // 显示登录输入区域
        $(".login-input-group").show();
        // 若需要点击后隐藏Sign In按钮，可解除下一行注释
        // $(this).hide();
    });
});
</script>
<body>
    <form action="f1.py" method="post">
        <button id="s1">Sign In</button>
        <div class="login-input-group">
            <div>
                <label for="logid">ID:</label>
                <input type="text" id="logid" required>
            </div>
            <div>
                <label for="psw1">Password:</label>
                <input type="password" id="psw1" required> 
            </div>
            <button type="submit">确认登录</button>
        </div>
    </form>
</body>

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