Formuliare d'inscription php html

Résolu

Jwandle Messages postés 52 Date d'inscription Statut Membre Dernière intervention -
Jwandle Messages postés 52 Date d'inscription Statut Membre Dernière intervention - 23 août 2020 à 08:28

Bonjour, je souhaite faire un formulaire d'inscription en php/html mais je n'y arrive pas...
mon code: (il c'est que la forme de mon formulaire d'inscription)

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Animated Login Form</title>
    <link rel="stylesheet" href="s'inscrire.css">
    <script src="https://kit.fontawesome.com/a076d05399.js"></script>
  </head>
  <body>
    <div class="container">
      <header>Se Connecter</header>
      <form>
        <div class="input-field">
          <input type="text" required>
          <label>Email or Username</label>
        </div>
<div class="input-field">
          <input class="pswrd" type="password" required>
          <span class="show">SHOW</span>
          <label>Password</label>
        </div>
<div class="button">
          <div class="inner">
</div>
<button>LOGIN</button>
        </div>
</form>
<div class="auth">
Or login with</div>
<div class="links">
        <div class="facebook">
          <i class="fab fa-facebook-square"><span>Facebook</span></i>
        </div>
<div class="google">
          <i class="fab fa-google-plus-square"><span>Google</span></i>
        </div>
</div>
<div class="signup">
        Not a member? <a href="s'inscrire2.html">Signup now</a>
        <br><a href="Bonjour a tous!.html">Home</a>      
    </div>
</div>
<script>
      var input = document.querySelector('.pswrd');
      var show = document.querySelector('.show');
      show.addEventListener('click', active);
      function active(){
        if(input.type === "password"){
          input.type = "text";
          show.style.color = "#1DA1F2";
          show.textContent = "HIDE";
        }else{
          input.type = "password";
          show.textContent = "SHOW";
          show.style.color = "#111";
        }
      }
    </script>

  </body>
</html>

le 2

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Responsive Contact us Form | CodingNepal</title>
    <link rel="stylesheet" href="s'inscrire2.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  </head>
  <body>
    <div class="container">
      <div class="text">
S'inscrire</div>
<form action="#">
        <div class="form-row">
          <div class="input-data">
            <input type="text" required>
            <div class="underline">
</div>
<label for="">First Name</label>
          </div>
<div class="input-data">
            <input type="text" required>
            <div class="underline">
</div>
<label for="">Last Name</label>
          </div>
</div>
<div class="form-row">
          <div class="input-data">
            <input type="text" required>
            <div class="underline">
</div>
<label for="">Email Address</label>
          </div>
<div class="input-data">
            <input type="text" required>
            <div class="underline">
</div>
<label for="">Website Name</label>
          </div>
</div>
<div class="form-row">
          <div class="input-data textarea">
            <changeit rows="8" cols="80" required></changeit> 
            <br />
<div class="underline">
</div>
<label></label>

       <br />
<div class="form-row submit-btn">
          <div class="input-data">
            <div class="inner"></div>
            <input type="submit" value="submit">
          </div>
        </div>
      </form>
    </div>

  </body>
</html>

les fichiers css:

@import url('https://fonts.googleapis.com/css?family=Montserrat:600|Noto+Sans|Open+Sans:400,700&display=swap');


*{  margin: 0;  padding: 0;  border-radius: 5px;  box-sizing: border-box;}body{  height: 100vh;  display: flex;  align-items: center;  text-align: center;  font-family: sans-serif;  justify-content: center;  background: url(bg.jpg);  background-size: cover;  background-position: center;}.container{  position: relative;  width: 400px;  background: #fff;  padding: 60px 40px;}header{  font-size: 40px;  margin-bottom: 60px;  font-family: 'Montserrat', sans-serif;}.input-field, form .button{  margin: 25px 0;  position: relative;  height: 50px;  width: 100%;}.input-field input{  height: 100%;  width: 100%;  border: 1px solid silver;  padding-left: 15px;  outline: none;  font-size: 19px;  transition: .4s;}input:focus{  border: 1px solid #1DA1F2;}.input-field label, span.show{  position: absolute;  top: 50%;  transform: translateY(-50%);}.input-field label{  left: 15px;  pointer-events: none;  color: grey;  font-size: 18px;  transition: .4s;}span.show{  right: 20px;  color: #111;  font-size: 14px;  font-weight: bold;  cursor: pointer;  user-select: none;  visibility: hidden;  font-family: 'Open Sans', sans-serif;}input:valid ~ span.show{  visibility: visible;}input:focus ~ label,input:valid ~ label{  transform: translateY(-33px);  background: white;  font-size: 16px;  color: #1DA1F2;}form .button{  margin-top: 30px;  overflow: hidden;  z-index: 111;}.button .inner{  position: absolute;  height: 100%;  width: 300%;  left: -100%;  z-index: -1;  transition: all .4s;  background: -webkit-linear-gradient(right,#00dbde,#fc00ff,#00dbde,#fc00ff);}.button:hover .inner{  left: 0;}.button button{  width: 100%;  height: 100%;  border: none;  background: none;  outline: none;  color: white;  font-size: 20px;  cursor: pointer;  font-family: 'Montserrat', sans-serif;}.container .auth{  margin: 35px 0 20px 0;  font-size: 19px;  color: grey;}.links{  display: flex;  cursor: pointer;}.facebook, .google{  height: 40px;  width: 100%;  border: 1px solid silver;  border-radius: 3px;  margin: 0 10px;  transition: .4s;}.facebook:hover{  border: 1px solid #4267B2;}.google:hover{  border: 1px solid #dd4b39;}.facebook i, .facebook span{  color: #4267B2;}.google i, .google span{  color: #dd4b39;}.links i{  font-size: 23px;  line-height: 40px;  margin-left: -90px;}.links span{  position: absolute;  font-size: 17px;  font-weight: bold;  padding-left: 8px;  font-family: 'Open Sans', sans-serif;}.signup{  margin-top: 50px;  font-family: 'Noto Sans', sans-serif;}.signup a{  color: #3498db;  text-decoration: none;}.signup a:hover{  text-decoration: underline;}2emefichiercss<code>@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');*{  margin: 0;  padding: 0;  outline: none;  box-sizing: border-box;  font-family: 'Poppins', sans-serif;}body{  display: flex;  align-items: center;  justify-content: center;  min-height: 100vh;  padding: 40px;  background: linear-gradient(115deg, #56d8e4 10%, #9f01ea 90%);}.container{  max-width: 800px;  background: #fff;  width: 800px;  padding: 25px 40px 10px 40px;  box-shadow: 0px 0px 10px rgba(0,0,0,0.1);}.container .text{  text-align: center;  font-size: 35px;  font-weight: 600;  background: -webkit-linear-gradient(right, #56d8e4, #9f01ea, #56d8e4, #9f01ea);  -webkit-background-clip: text;  -webkit-text-fill-color: transparent;}.container form{  padding: 30px 0 0 0;}.container form .form-row{  display: flex;  margin: 32px 0;}form .form-row .input-data{  width: 100%;  height: 40px;  margin: 0 20px;  position: relative;}form .form-row .textarea{  height: 70px;}.input-data input,.textarea textarea{  display: block;  width: 100%;  height: 100%;  border: none;  font-size: 17px;  border-bottom: 2px solid rgba(0,0,0, 0.12);}.input-data input:focus ~ label, .textarea textarea:focus ~ label,.input-data input:valid ~ label, .textarea textarea:valid ~ label{  transform: translateY(-20px);  font-size: 14px;  color: #3498db;}.textarea textarea{  resize: none;  padding-top: 10px;}.input-data label{  position: absolute;  pointer-events: none;  bottom: 10px;  font-size: 16px;  transition: all 0.3s ease;}.textarea label{  width: 100%;  bottom: 40px;  background: #fff;}.input-data .underline{  position: absolute;  bottom: 0;  height: 2px;  width: 100%;}.input-data .underline:before{  position: absolute;  content: "";  height: 2px;  width: 100%;  background: #3498db;  transform: scaleX(0);  transform-origin: center;  transition: transform 0.3s ease;}.input-data input:focus ~ .underline:before,.input-data input:valid ~ .underline:before,.textarea textarea:focus ~ .underline:before,.textarea textarea:valid ~ .underline:before{  transform: scale(1);}.submit-btn .input-data{  overflow: hidden;  height: 45px!important;  width: 25%!important;}.submit-btn .input-data .inner{  height: 100%;  width: 300%;  position: absolute;  left: -100%;  background: -webkit-linear-gradient(right, #56d8e4, #9f01ea, #56d8e4, #9f01ea);  transition: all 0.4s;}.submit-btn .input-data:hover .inner{  left: 0;}.submit-btn .input-data input{  background: none;  border: none;  color: #fff;  font-size: 17px;  font-weight: 500;  text-transform: uppercase;  letter-spacing: 1px;  cursor: pointer;  position: relative;  z-index: 2;}@media (max-width: 700px) {  .container .text{    font-size: 30px;  }  .container form{    padding: 10px 0 0 0;  }  .container form .form-row{    display: block;  }  form .form-row .input-data{    margin: 35px 0!important;  }  .submit-btn .input-data{    width: 40%!important;  }}

voila... Merci beaucoup pour toute réponse!

Afficher la suite

A voir également:

Formuliare d'inscription php html
Wetransfer gratuit sans inscription - Guide
Twitter inscription - Guide
Editeur html - Télécharger - HTML
Vinted inscription - Guide
Tchat gratuit sans inscription - Accueil - Réseaux sociaux

8 réponses

Réponse 1 / 8

jordane45 Messages postés 38486 Date d'inscription Statut Modérateur Dernière intervention 4 752

Bonjour

Il manque les attributs method et action à ton premier form.

Il manque le code php...

Réponse 2 / 8

Jwandle Messages postés 52 Date d'inscription Statut Membre Dernière intervention 6

Salut jordane!
Oui, je sais c'est normal, c'est que la forme... c'était pour avoir le code php les attributs etc... merci!

jordane45 Messages postés 38486 Date d'inscription Statut Modérateur Dernière intervention 4 752

Tu ne crois quand même pas qu'on va écrire le code (si facile à faire...) à ta place... ??

Réponse 3 / 8

Jwandle Messages postés 52 Date d'inscription Statut Membre Dernière intervention 6

non, des sites propose des codes, c'était que pour le trouver et le copier pas le recoller

Réponse 4 / 8

Jwandle Messages postés 52 Date d'inscription Statut Membre Dernière intervention 6

pourquoi, c'est si dur???!

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question

Réponse 5 / 8

jordane45 Messages postés 38486 Date d'inscription Statut Modérateur Dernière intervention 4 752

Il n'y a rien de dur ......
Faut juste se sortir un peu les doigts du ... et s'y mettre !

Comme je te l'ai indiqué.... ici on ne donne pas de code prêt à l'emploi.... et ne sommes pas là pour remplacer ton prof ou ton moteur de recherche...

Si tu veux de l'aide... montre ce que tu as essayé de faire et nous verrons pour t'aider à le corriger.
Sans effort de ta part, aucune assistance ne te sera fournie.

Je vais faire une petite exception.. voici un des liens que tu aurais pu trouver et utiliser pour comprendre comment ça fonctionne :
https://sylvie-vauthier.developpez.com/tutoriels/php/grand-debutant/?page=formulaires

Réponse 6 / 8

Jwandle Messages postés 52 Date d'inscription Statut Membre Dernière intervention 6

a d'accord... désolé...
Voici ce que j'ai essayé:
<!DOCTYPE html>
<html>
<head>

<title>INSCRIPTION</title>

<meta charset="utf-8">

</head>
<body>

<h1>Inscription<h1>

<form method="post" action="inscription.php">
<p>Nom</p>
<input type="text" name="Nom">
<p>Prenom</p>
<input type="text" name="Prenom">
<p>email</p>
<input type="email" name="email">
<p>Password</p>
<input type="password" name="password">
<p>Répetez votre password</p>
<input type="password" name="repeatpassword"><br><br>
<input type="submit" name="submit" value="Valider">

</form>

<?php

if (isset($_POST['submit']))
{

$Nom = htmlspecialchars(trim($_POST['Nom']));
$Prenom = htmlspecialchars(trim($_POST['Prenom']));
$email = htmlspecialchars(trim($_POST['email']));
$password = htmlspecialchars(trim($_POST['password']));
$repeatpassword = htmlspecialchars(trim($_POST['repeatpassword']));

if ($Nom&&$Prenom&&$email&&$password&&$repeatpassword)
{
if (strlen($password)>=6)
{
if ($password==$repeatpassword)
{
// On crypte le mot de passe
$password = md5($password);

// on se connecte à MySQL et on sélectionne la base
$c = new mysqli ("localhost","root","","ecobank");

//On créé la requête
$sql = "INSERT INTO newclient VALUES ('','$Nom','$Prenom','email','$password')";

// On envoie la requête
$res = $c->query($sql);
// on ferme la connexion
mysqli_close($c);

}else echo "Les mots de passe ne sont pas identiques";
}else echo "Le mot de passe est trop court !";
}else echo "Veuillez saisir tous les champs !";

}

?>

</body>
</html>

le seul problème, c'est quand chargeant la page php il n'y a que le code qui s'affiche et non tout le système qui devrai marché...
Cordialement

Réponse 7 / 8

jordane45 Messages postés 38486 Date d'inscription Statut Modérateur Dernière intervention 4 752

Pour commencer, lorsque tu postes du code sur le forum tu dois utiliser les BALISES DE CODE.
Donc, à l'avenir, merci d'appliquer ce qui est indiqué ici :
https://codes-sources.commentcamarche.net/faq/11288-les-balises-de-code

Ensuite, concernant ton code php, quelques remarques:
- htmlspecialchars ne s'utilise que pour de l'affichage. Il ne faut pas l'utiliser avant d'insérer en bdd ou l'utiliser dans une requête sql
- le md5 n'est plus sécurisé.... ni le sha1 d'ailleurs...
A la place, on utilise les fonctions php : password_hash et password_verify

Je t'invite également à lire et à appliquer les conseils donnés dans ce lien pour l'écriture de ton code : https://forums.commentcamarche.net/forum/affich-37584947-php-gestion-des-erreurs-debogage-et-ecriture-du-code

Et pour finir, concernant ton souci .....
Le PHP a besoin d'être exécuté par un serveur.
Donc, soit tu héberges ton site sur un serveur web .... soit, si tu veux rester en "local" sur ton ordi, tu dois en émuler un.
Pour cela, tu peux utiliser un logiciel tel que Laragon, wamp, xampp, easyphp, uwamp ....
Une fois ce logiciel installé et lancé sur ton ordi, tu devras placer tes fichiers dans le répertoire web du logiciel ( www ou httdocs selon le logiciel utilisé )
Puis afficher ton site à traver l'url localhost/tonsite/tapage.php

Réponse 8 / 8

Jwandle Messages postés 52 Date d'inscription Statut Membre Dernière intervention 6

Ah..... D'accord je comprenais pas pourquoi le php marchait pas... Merci beaucoup pour ta réponse, je la regarde tout de suite!

Votre réponse