Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

jaojpaulo

Como faço para trocar de visível para invisível entre dois formulários

Por , em Javascript

Recommended Posts

jaojpaulo    0

jaojpaulo
Postado

HTML:

<!DOCTYPE html>
<html>
  <head>
    <title>Login</title>
    <link rel="stylesheet" type="text/css" href="estilo.css"/>
    <script type="text/javascript" src="script.js"></script>
  </head>
  <body>
    <section id="box">
 
      <form id="form1">
        <h1>Login</h1>
        <input type="text" placeholder="Username"/>
        <input type="password" placeholder="Password"/>
        <div>
            <button id="btns">Signup</button>
            <input type="submit" value="Login"/>
        </div>
      </form>
        
      <form id="form2">
        <h1>Signup</h1>
        <input type="text" placeholder="Name"/>
        <input type="email" placeholder="Email"/>
        <input type="text" placeholder="Username"/>
        <input type="password" placeholder="Password"/>
        <input type="password" placeholder="Confirm Password"/>
        <div>
            <button id="btnl">Back</button>
            <input type="submit" value="Signup"/>
        </div>
      </form>
        
    </section>
  </body>
</html>
CSS:

@import url('[url=https://fonts.googleapis.com/css?family=Roboto');]https://fonts.googleapis.com/css?family=Roboto');[/url]
 
html, body{
    font-family: 'Roboto', sans-serif;
    width:100%;
    background-image:-webkit-linear-gradient(#5b82c1,#74a6f7);
    margin:0;
    padding:0;
}
 
body{
    display: flex;
    justify-content: center;
    align-items: center;
}
 
#box{
    display:flex;
    align-items: center;
    flex-flow: column wrap;
    width: 30%;
    background-color:#fff;
    padding:18px;
}
 
h1{
    color:#5b82c1;
    font-size:2em;
    ;
}
 
form{
    width:90%;
}
 
form input{
    border:none;
}
 
form input[type="text"],
form input[type="email"],
form input[type="password"]{
    width:100%;
    height:35px;
    font-size:20px;
    margin-bottom:8%;
}
 
form input[type="submit"]{
    background-color:#5b82c1;
    width:95px;
    height:45px;
    font-size:1.5em;
    color:#fff;
    margin-left:46%;
}
 
button{
    border:none;
    background-color:#5b82c1;
    width:95px;
    height:45px;
    font-size:1.5em;
    color:#fff;
}
 
.hiddenclass{
    display:none;
}
 
.showclass{
    display:block;
}

o código que em javascript que tentei: 

var form1, form2, btns, btnl;
 
window.onload = function () {
    form1 = document.getElementById("form1");
    form2 = document.getElementById("form2");
    btns = document.getElementById("btns");
    btnl = document.getElementById("btnl");
 
form2.className = "hiddenclass";
 
btns.addEventListener("click", function(){
    form1.className = "hiddenclass";
    form2.className = "shownclass";
});
 
btnl.addEventListener("click", function(){
    form1.className = "shownclass";
    form2.className = "hiddenclass";
});
};

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito