Form not displaying on button click-CodePudding

Trying to display a login form which appears after clicking on a button 'Sign In', however the button is not implementing.

Here is what I tried:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
    $(document).ready(function(){
    $("#s1").click(function(){
  $("form").show();
});
});
</script>

<body>
    <form action="f1.py" method="post">
        <button id="s1">Sign In</button>
    <div>
        <label for "lid">ID:</label>
        <input type="text" id="logid" required>
    </div>
    <div>
        <label for "psw">Password:</label>
        <input type="password" id="psw1" required> 
    </div>
    </form>

</div>

CodePudding user response：

You can try this :

$(document).ready(function()
 {
    $("#s1").click(function()
    {
         $("form").toggle(500);
    });
 });

CodePudding user response：

You didn't hide the form to begin with. consider this:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
    $(document).ready(function(){
        $("#s1").click(function(){
            $("form").css('display','block');
        });
    });
</script>
<body>
    <form style="display:none;" action="f1.py" method="post">
        <button id="s1">Sign In</button>
    <div>
        <label for "lid">ID:</label>
        <input type="text" id="logid" required>
    </div>
    <div>
        <label for "psw">Password:</label>
        <input type="password" id="psw1" required> 
    </div>
    </form>
    

</body>

EDIT: also as mrmonsieur mentioned in comments your closing body tag was wrong