Formulaire d'inscription et de connexion

**AXIWAR STUDIOS** · 25/02/2022, 12h07

Bonjour je suis entrain de créer un site internet pour moi, mais le souci est que je bloque au niveau du formulaire d'inscription et de connexion.
voici le formulaire d'inscription :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
<!DOCTYPE html>
<html>
 
<head>
    <meta name="viewport" content=
        "width=device-width, initial-scale=1" />
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
    </script>
</head>
 
<body>
    <div id="background">
        <div class="background-Right"></div>
        <div class="background-Left"></div>
    </div>
 
    <div id="slide">
        <div class="top">
            <div class="left">
                <div class="content">
                    <h2>s'inscrire</h2>
                    <form method="post"
                        onsubmit="return true;">
                        <div>
                            <input type="text" id="identifiant1"
                                placeholder="identifiant" />
 
                            <br />
                            <input type="password" id="password1"
                                placeholder="mot de passe" />
                        </div>
                    </form>
 
                    <button id="inscriptionutilisateur" onclick="envoyer()"
                        class="on-off">inscription
                    </button>
                </div>
            </div>
    <script type="text/javascript">
function envoyer() {
    if(document.getElementById("password1").value == "" && document.getElementById("identifiant1").value == "" ) {
            alert ("vous n'avez rien rempli !");
        } else {
        var identifiant = document.forms["post"].elements["identifiant1"];
        var MotDePasse = document.forms["post"].elements["password1"];
        alert("Bienvenue " + identifiant1 + " !");
        }
}
    </script>
</body>
 
</html>

voila. voici le formulaire de connexion :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<!DOCTYPE html>
<html>
 
<head>
    <meta name="viewport" content=
        "width=device-width, initial-scale=1" />
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
    </script>
</head>
 
<body>
    <div id="background">
        <div class="background-Right"></div>
        <div class="background-Left"></div>
    </div>
          <div class="right">
                <div class="content">
                    <h2>se connecter</h2>
                    <form method="post"
                        onsubmit="return false;">
                        <div>
                            <input type="text"
                                placeholder="identifiant" />
 
                            <br />
                            <input type="password"
                                placeholder="mot de passe" />
                        </div>
 
                        <button id="LeftToRight"
                            class="on-off">se connecter
                        </button>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript">
 
 
function envoyer()
 
    </script>
</body>
 
</html>

voila. j'aimerai que l'élément input s'enregistre dans une variable et vérifier si il existe ou non. J'aimerais aussi l'intégrer dans mon site internet et que sa s'exécute lorsque l'on clique sur un bouton (inscription ou connexion).
voici le code de mon site internet (il est court car j'ai fait quelques modification):

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
<!DOCTYPE html>
<html>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
  <head>
    <title>AXIWAR STUDIOS</title>
    <link rel="icon" type="image/x-icon" href="LOGOAXIWARSTUDIOS2.png" />
    <style>
      form{margin-top:20px;}
      #boutoninscription {
    font-size: 15px;
    height: 20px;
    width: 100px;
    display: block;
    background-color: red;
    margin-left: 1400px;
}
#utilisateur {
  font-size: 15px;
  height: 20px;
  width: 100px;
  display: block;
  margin-left: 1400px;
  margin-top: -505px;
}
#Bug {
  margin-left: 1370px;
  margin-bottom: 1000px;
}
#logoaxiwarstudios {
  height: 500px;
  width: 800px;
  margin-top: 0px;
  margin-left: 355px;
}
#boutonconnexion {
    font-size: 15px;
    height: 20px;
    width: 100px;
    display: block;
    background-color: blue;
    margin-left: 1400px;
    }
    h1 {
      color: lightblue;
      background-color: black;
    }
    </style>
    </head>
    <body>
    <h1><center>Bienvenue sur le site officiel d'AXIWAR STUDIOS<center></h1>
    <input type="button" id="boutoninscription" onclick="inscriptionUtilisateur()" value="s'inscrire"/>
    <input type="button" id="boutonconnexion" onclick="connexionUtilisateur()" value="se connecter"/>
    <img src="AXIWARSTUDIOS.png" id="logoaxiwarstudios" alt="imageaxiwarstudios" title="Logo AXIWAR STUDIOS">
    <input type="button" id="utilisateur" onclick="utilisateurInformation()" value= "utilisateur" />
   <script>
        window.addEventListener('load',false);
  
        window.addEventListener('click',"boutonconnexion",false);
        window.addEventListener('click',"boutoninscription",false);
  window.addEventListener('click',"utilisateur",false);
  window.addEventListener('',"logoaxiwarstudios",false);
function connexionUtilisateur(){
        
  }
function inscriptionUtilisateur(){
        
        }
  function utilisateurInformation(){
    document.write("Nom d'utilisateur :" + MDPU)
    document.write(" Mot de passe :" + MDPU2)
  }
  function imageaxiwarstudios(){
    
  }
</script>
</body>
<a id="Bug" href="mailto:AXIWARSTUDIOS@gmail.com?subject=Bug">signaler nous un bug</a>
</html>

voila. Si je suis nul c'est normal car je suis collégien.
Merci d'avance de votre aide.

**AXIWAR STUDIOS** · 26/02/2022, 11h22

Rebonjour j'ai réussi a me débrouiller seul pour la question d'avant voici le script pour ce qui serait intéresser :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
 
<!DOCTYPE html>
<html>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
  <head>
    <title>AXIWAR STUDIOS</title>
    <link rel="icon" type="image/x-icon" href="LOGOAXIWARSTUDIOS2.png" />
    <style>
      form{margin-top:20px;}
      #boutoninscription {
    font-size: 15px;
    height: 20px;
    width: 100px;
    display: block;
    background-color: red;
    margin-left: 1400px;
}
#utilisateur {
  font-size: 15px;
  height: 20px;
  width: 100px;
  display: block;
  margin-left: 1400px;
  margin-top: -505px;
}
#Bug {
  margin-left: 1370px;
  margin-bottom: 1000px;
}
#logoaxiwarstudios {
  height: 500px;
  width: 800px;
  margin-top: 0px;
  margin-left: 355px;
}
#boutonconnexion {
    font-size: 15px;
    height: 20px;
    width: 100px;
    display: block;
    background-color: blue;
    margin-left: 1400px;
    }
    h1 {
      color: lightblue;
      background-color: black;
    }
    </style>
    </head>
    <body>
    <h1><center>Bienvenue sur le site officiel d'AXIWAR STUDIOS<center></h1>
    <input type="button" id="boutoninscription" onclick="inscriptionUtilisateur()" value="s'inscrire"/>
    <input type="button" id="boutonconnexion" onclick="connexionUtilisateur()" value="se connecter"/>
    <img src="AXIWARSTUDIOS.png" id="logoaxiwarstudios" alt="imageaxiwarstudios" title="Logo AXIWAR STUDIOS">
    <input type="button" id="utilisateur" onclick="utilisateurInformation()" value= "utilisateur" />
   <script>
        window.addEventListener('load',false);
 
        window.addEventListener('click',"boutonconnexion",false);
        window.addEventListener('click',"boutoninscription",false);
  window.addEventListener('click',"utilisateur",false);
function connexionUtilisateur(){
window.location="connexion.html"
  }
function inscriptionUtilisateur(){
window.location="inscription.html"
        }
  function utilisateurInformation(){
 
  }
</script>
</body>
<a id="Bug" href="mailto:Espacewarshelp@gmail.com?subject=Bug">signaler nous un bug</a>
</html>

la page connexion :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
 
<!DOCTYPE html>
<html>
 
<head>
    <meta name="viewport" content=
        "width=device-width, initial-scale=1" />
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
    </script>
</head>
 
<body>
                    <h2>se connecter</h2>
                    <form method="post"
                        onsubmit="return false;">
                        <div>
                            <input type="text"
                                placeholder="identifiant" />
 
                            <br />
                            <input type="password" id="password"
                                placeholder="mot de passe" />
                        </div>
 
                        <button id="connexionUtilisateur" onclick="envoyer()"
                            class="on-off">se connecter
                        </button>
                    </form>
    <script type="text/javascript">
function envoyer()
     var identifiantUtilisateur1 = document.getElementById("identifiant").value;
     var motDePasseUtilisateur1 = document.getElementById("password").value;
    </script>
</body>
 
</html>

et celui de l'inscription :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
 
<!DOCTYPE html>
<html>
 
<head>
    <meta name="viewport" content=
        "width=device-width, initial-scale=1" />
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
    </script>
</head>
 
<body>
         <h2>s'inscrire</h2>
                    <form method="post"
                        onsubmit="return true;">
                        <div>
                            <input type="text" id="identifiant1"
                                placeholder="identifiant" />
 
                            <br />
                            <input type="password" id="password1"
                                placeholder="mot de passe" />
                        </div>
                    </form>
 
                    <button id="inscriptionutilisateur" onclick="envoyer()"
                        class="on-off">inscription
                    </button>
    <script type="text/javascript">
function envoyer() {
    var identifiantUtilisateur = document.getElementById("identifiant1").value;
    var motDePasseUtilisateur = document.getElementById("password1").value;
    
}
    </script>
</body>
 
</html>

voila mais maintenant j'aimerais transférer le contenu des variables dans la page d'accueil (la première ).
Merci d'avance pour vos réponse.

**mathieu** · 26/02/2022, 18h08

est ce que vous avez du code coté serveur comme php par exemple pour vérifier le nom d'utilisateur et le mot de passe ?

**AXIWAR STUDIOS** · 01/03/2022, 11h23

non absolument pas je viens de débuter a apprendre a programmer il y a 4 semaine et je ne suis encore qu'un débutant c'est pour sa que je demande de l'aide