Bonjour,

Je vous contact aujourd'hui car j'ai un soucis. J'ai actuellement ce code sur mon site :

PHP: 

  <div class="form">   <!-- celui la -->

    <form class="register-form" method="POST" action="">                                  <!-- register -->
      <input type="text" name="pseudo" id="pseudo" placeholder="Pseudo"/>
      <input type="password" name="mdp" id="mdp" placeholder="Mot de passe"/>
      <input type="password" name="mdp2" id="mdp2" placeholder="Confirmez votre mdp" />
      <input type="email" name="mail" id="mail" placeholder="Votre mail" value="<?php if (isset($mail)){echo $mail;} ?>"/>
      <input type="email" name="mail2" id="mail2" placeholder="Confirmez votre mail" value="<?php if (isset($mail2)){echo $mail2;} ?>"/>
      <input type="submit" name="forminscription" value="S'inscrire" />
      <p class="message">Déjà inscrit ? <a href="#">Connexion</a></p>
    </form>
    <form class="login-form" method="POST" action="">                                      <!-- login -->
      <input type="text" name="mailconnect" placeholder="Email"/>
      <input type="password" name="mdpconnect" placeholder="Mot de passe"/>
      <input type="submit" name="formconnection" value="S'inscrire" />
      <p class="message">Pas encore inscrit ? <a href="#">Créer un compte</a></p>
    </form>
</div>
</body>
</html>
	<script type="text/javascript">
		$('.message a').click(function() {
		  $('form')
		  .animate({
		    height: "toggle",
		    opacity: "toggle"
		  }, "slow");
		});
	</script>

CSS :

.form {
  position: relative;
  z-index: 1;
  background: #FFFFFF;
  max-width: 360px;
  margin: 0 auto 10px;
  padding: 45px;
  text-align: center;
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 20px 20px 20px rgba(0, 0, 0, 0.30);
}
.form input {
  font-family: "Roboto", sans-serif;
  outline: 0;
  background: #EFEFEF;
  width: 100%;
  border: 0;
  margin: 0 0 15px;
  padding: 15px;
  box-sizing: border-box;
  font-size: 14px;
}
.form input[type=submit] {
  font-family: "Roboto", sans-serif;
  text-transform: uppercase;
  outline: 0;
  background: #0000EE;
  width: 100%;
  border: 0;
  padding: 15px;
  color: #FFFFFF;
  font-size: 14px;
  -webkit-transition: all 0.3 ease;
  transition: all 0.3 ease;
  cursor: pointer;
}
.form button:hover,.form button:active,.form button:focus {
  background: #DCDCDC;
}
.form .message {
  margin: 15px 0 0;
  color: #A9A9A9;
  font-size: 12px;
}

.form .message a {
  color: #0000EE;
  text-decoration: none;
}
.form .register-form {
  display: none;
}
.form .recup-form {
  display: none;
}

Ce marche parfaitement et permet de faire une petite animation entre 2 form. j'aurais voulu savoir comment faire pour que, avec 2 boutons sur le form "login-form" on puisse soit afficher le form "register-form" soit un autre form appelé "recup-form" (non present dans ce code).

Merci de votre aide

Cordialement,

Benjamin

-
Edité par benbouil 25 juillet 2016 à 13:00:39

Salut, ben en gros c'est pareil mais il faut que tu utilises des ID sur tes balises <a> et <form> pour savoir sur laquelle tu viens de cliquer et afficher le bon form. Le mieux pour cela serait de faire une fonction JS

Je t'ai fait un petit fiddle que tu peux voir ici : https://jsfiddle.net/fm8a7wa6/

Ensuite pour faire les animations que tu veux je t'invite à regarder la doc show() et hide() que tu as ici et ici :

http://api.jquery.com/hide/

http://api.jquery.com/show/