Formulaire d'inscription et de connexion

Version imprimable

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:

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:

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:

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. :D :)

Partage de variable entre différentes page

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:

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:

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:

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. :D :)

26/02/2022, 18h08
mathieu

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 ?
01/03/2022, 11h23
AXIWAR STUDIOS

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
01/03/2022, 11h41
mathieu

pour la partie php, vous pouvez regardez les cours de cette page :
https://php.developpez.com/cours/
01/03/2022, 11h57
AXIWAR STUDIOS

merci je vais voir tout de suite