Inscription

28 mars 2021, 19:17

Salut, je pense que c'est une erreur bête mais à vrai dire je ne vois pas où se trouve l'erreur. Lorsque je rentre un pseudo il y a ça qui apparaît. Une idée ?

ps: les messages d'erreur ne s'affichent pas :'(

Image:

et voici mon code html et css :

Code : Tout sélectionner

<?php

$bdd = new PDO('mysql:host=127.0.0.1;dbname=espace_membre', 'root', '');

if(isset($_POST['forminscription']))
{
  $pseudo = htmlspecialchars($_POST['pseudo']);
  $mail = htmlspecialchars($_POST['mail']);
  $password = sha1($_POST['password']);
  $password = sha1($_POST['password2']);
  
  if(!empty($_POST['pseudo']) AND !empty($_POST['password'] AND !empty($_POST['email'])))
  {

      $pseudolenght = strlen($pseudo);
      if($pseudolenght <= 21)
      {
        if(filter_var($mail, FILTER_VALIDATE_EMAIL))
        {

          if($password == $password2)
          {

          }
          else
          {
            $erreur = "Votre adresse mail n'est pas valide !";
          }
          
            $erreur = "Vos mots de passes ne correspondent pas !";
            }
          }
          else
      }
      else
      {
         $erreur = "Votre pseudo ne doit pas dépasser 255 caractères !";
      }
  }
  else
  {
    $erreur = "Tous les champs doivent être complétés !";
  }
}

?>

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link rel="stylesheet" href="../css/inscription.css">

    <title>Inscription</title>
</head>

<body>

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<div class="wrapper fadeInDown">
  <div id="formContent">




    <form>
      <input for = "pseudo" type="text" id="pseudo" class="fadeIn second" name="pseudo" value="<?php if (isset($pseudo)) { echo $pseudo; } ?>" placeholder="pseudo">
      <input for = "mail" type="text" id="mail" class="fadeIn second" name="mail" placeholder="email">
      <input for = "password" type="text" id="password" class="fadeIn third" name="password" placeholder="mot de passe">
      <input for = "password2" type="text" id="password2" class="fadeIn third" name="password2" placeholder="confirmer le mot de passe">
      <input for = "log" type="submit" name="forminscription" class="fadeIn fourth" value="S'inscrire">
    </form>

    <?php 
    if(isset($erreur))
    {
      echo $erreur;
    }


    ?>

    <div id="formFooter">
      <a class="underlineHover" href="#">Mot de passe oublié ?</a>
    </div>

  </div>
</div>

</body>

</html>

Code : Tout sélectionner

body, html{
    background-image: url("../images/background.png");
    z-index: 2;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: 100% 100%;
}

body {
  font-family: "Poppins", sans-serif;
  height: 90vh;
}

a {
  color: #92badd;
  display:inline-block;
  text-decoration: none;
  font-weight: 400;
}

h2 {
  text-align: center;
  font-size: 16px;
  font-weight: 600;
  text-transform: uppercase;
  display:inline-block;
  margin: 40px 8px 10px 8px; 
  color: #cccccc;
}



/* STRUCTURE */

.wrapper {
  display: flex;
  align-items: center;
  flex-direction: column; 
  justify-content: center;
  min-height: 100%;
  padding: 20px;
}

#formContent {
  -webkit-border-radius: 10px 10px 10px 10px;
  border-radius: 10px 10px 10px 10px;
  background: #fff;
  padding: 30px;
  width: 90%;
  max-width: 450px;
  position: relative;
  padding: 0px;
  -webkit-box-shadow: 0 30px 60px 0 rgba(0,0,0,0.3);
  box-shadow: 0 30px 60px 0 rgba(0,0,0,0.3);
  text-align: center;
}

#formFooter {
  background-color: #f6f6f6;
  border-top: 1px solid #dce8f1;
  padding: 25px;
  text-align: center;
  -webkit-border-radius: 0 0 10px 10px;
  border-radius: 0 0 10px 10px;
}



/* TABS */

h2.inactive {
  color: #cccccc;
}

h2.active {
  color: #0d0d0d;
  border-bottom: 2px solid #5fbae9;
}



/* FORM TYPOGRAPHY*/

input[type=button], input[type=submit], input[type=reset]  {
  background-color: #56baed;
  border: none;
  color: white;
  padding: 15px 80px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  text-transform: uppercase;
  font-size: 13px;
  -webkit-box-shadow: 0 10px 30px 0 rgba(95,186,233,0.4);
  box-shadow: 0 10px 30px 0 rgba(95,186,233,0.4);
  -webkit-border-radius: 5px 5px 5px 5px;
  border-radius: 5px 5px 5px 5px;
  margin: 5px 20px 40px 20px;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

input[type=button]:hover, input[type=submit]:hover, input[type=reset]:hover  {
  background-color: #39ace7;
}

input[type=button]:active, input[type=submit]:active, input[type=reset]:active  {
  -moz-transform: scale(0.95);
  -webkit-transform: scale(0.95);
  -o-transform: scale(0.95);
  -ms-transform: scale(0.95);
  transform: scale(0.95);
}

input[type=text] {
  background-color: #f6f6f6;
  border: none;
  color: #0d0d0d;
  padding: 15px 23px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 5px;
  width: 85%;
  border: 2px solid #f6f6f6;
  -webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  -ms-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
  -webkit-border-radius: 5px 5px 5px 5px;
  border-radius: 5px 5px 5px 5px;
}

input[type=text]:focus {
  background-color: #fff;
  border-bottom: 2px solid #5fbae9;
}

input[type=text]:placeholder {
  color: #cccccc;
}



/* ANIMATIONS */

/* Simple CSS3 Fade-in-down Animation */
.fadeInDown {
  -webkit-animation-name: fadeInDown;
  animation-name: fadeInDown;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

@-webkit-keyframes fadeInDown {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes fadeInDown {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

/* Simple CSS3 Fade-in Animation */
@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }

.fadeIn {
  opacity:0;
  -webkit-animation:fadeIn ease-in 1;
  -moz-animation:fadeIn ease-in 1;
  animation:fadeIn ease-in 1;

  -webkit-animation-fill-mode:forwards;
  -moz-animation-fill-mode:forwards;
  animation-fill-mode:forwards;

  -webkit-animation-duration:1s;
  -moz-animation-duration:1s;
  animation-duration:1s;
}

.fadeIn.first {
  -webkit-animation-delay: 0.4s;
  -moz-animation-delay: 0.4s;
  animation-delay: 0.4s;
}

.fadeIn.second {
  -webkit-animation-delay: 0.6s;
  -moz-animation-delay: 0.6s;
  animation-delay: 0.6s;
}

.fadeIn.third {
  -webkit-animation-delay: 0.8s;
  -moz-animation-delay: 0.8s;
  animation-delay: 0.8s;
}

.fadeIn.fourth {
  -webkit-animation-delay: 1s;
  -moz-animation-delay: 1s;
  animation-delay: 1s;
}

/* Simple CSS3 Fade-in Animation */
.underlineHover:after {
  display: block;
  left: 0;
  bottom: -10px;
  width: 0;
  height: 2px;
  background-color: #56baed;
  content: "";
  transition: width 0.2s;
}

.underlineHover:hover {
  color: #0d0d0d;
}

.underlineHover:hover:after{
  width: 100%;
}



/* OTHERS */

*:focus {
    outline: none;
}

Merci d'avance !!

28 mars 2021, 19:23

en remplaçant tout par
<?php
echo "test";
?>
cela fonctionne ?

28 mars 2021, 19:30

en remplaçant tout par
<?php
echo "test";
?>
cela fonctionne ?

ça n'affiche pas le ok mais je crois que c'est à cause du background. je ne sais pas.

29 mars 2021, 10:35

Salutations !

Il semblerait que ton code php ne soit simplement pas interprété côté serveur et soit restitué comme une chaine de caractère en html. (Tu peux regarder le code source de ta page, si tout le code php du début est présent)

Dès lors les questions de base : est-ce que ton script a bien une extension .php (et pas .html ou autre) ? Est-ce que tu l'exécutes bien à partir d'un serveur local ou distant gérant le php via une adresse de type http:// et pas file:/// ?

Ça n'a rien à voir, mais à noter, les balises html de type input n'ont pas d'attribut "for". Celles-ci sont réservées aux labels et output pour indiquer à quel inpu elles sont associées. Tu peux donc supprimer les for="pseudo", for="mail", etc. de tes inputs. Ça ne changera rien au problème, mais ton code sera plus léger et plus lisible, donc plus facile à comprendre et à maintenir

Inscription

Qui est en ligne