在HTML或CSS中單擊按鈕之前，如何隱藏表單？

Question

我想在按鈕內隱藏HTML表單。 我嘗試在窗體的周圍添加類似於父div和子div的按鈕，但這似乎不起作用。 我對如何添加“隱藏”元素感到困惑。 我必須使用javascript還是jQuery？ 還是只有CSS或HTML可以做到這一點的簡單方法？

提前致謝！！

 /*LOGIN*/ html { background: #fff; font-size: 10pt; } .loginform ul { padding: 0; margin: 0; } .loginform il { display: inline; float: top right; } label { display: block; color: #ED4337; } label:hover { background-color: #fff; color: white; border-radius: 8px; } .cf:before .cf:after { content: ""; display: table; } .cf:after { *zoom: 1; } :focus { outline: 0; } .loginform input:not([type=submit]) { padding: 5px; margin-right: 10px; border: 1px solid rgba(0, 0, 0, 0.3); border-radius: 3px; box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, 0.1), 0px 1px 0px 0px rgba(250, 250, 250, 0.5); } .loginform input[type=submit] { border: 1px solid rgba(0, 0, 0, 0.3); background: #64c8ef; /*old browsers*/ background: -moz-linear-gradient(top, #64c8ef 0%, #00a2e2 100%); /*FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(100%, #00a2e2)); background: -webkit-linear-gradient(top, #64c8ef 0%, #00a2e2 100%); background: -o-linear-gradient(top, #64c8ef 0%, #00a2e2 100%); background: -ms-linear-gradient(top, #64c8ef 0%, #00a2e2 100%); background: linear-gradient(to bottom, #64c8ef 0%, #00a2e2); filter: progid:DXImageTransform.Microsoft.gradient ( startColors)='#64c8ef', endColorstr='#00a2e2', GradientType=0); color: #fff; padding: 5px 15px; margin-right: 0; margin-top: 15px; border-radius: 3px; text-shadow: 1px 1px 0px #fff; } /*END LOG IN */ 

 <!--LOG IN INFO--> <button class="log">Log In <section class="loginfrom cf"> <form name="login" action="index_submit" method="get" accept-charset="utf-8"> <ul> <li><label for="username">Email</label> <input type="email" name="usermail" placeholder="yourname@email.com" required></li> <li><label for="password">Password</label> <input type="email" name="password" placeholder="password" required></li> <li> <input type="submit" value="Login"></li> </ul> </form> </section> </button> <!--END LOG IN INFO--> 

Answer 1

首先，關閉按鈕標記<button class="log">Log in</button> 。 然后，使用CSS隱藏表單，例如.loginform { display: none; } .loginform { display: none; }

最后，要在用戶單擊按鈕時顯示表單，可以使用jQuery。

$('.log').click(function() {
    $('.loginform').css('display', 'block');
});

為了進一步了解CSS和Javascript以及它們如何協同工作，我強烈建議您閱讀一些教程並檢查W3Schools中的一些示例。

https://www.w3schools.com/jquery/default.asp

https://www.w3schools.com/css/default.asp