Formulaire, tableau en html css javascript

Version imprimable

16/01/2022, 08h46
peko91

1 pièce(s) jointe(s)

Formulaire, tableau en html css javascript

Bonjour j'espère que vous bien .
je début en javascript et mon professeur m'a donné un exercice à faire . Le problème c'est que je n'est pas les bases en javascript , je suis des tutos mais je trouve le langage un peu bizarre dans sa syntaxe etc......

le but de l'exercice est de créer un formulaire puis de pouvoir récupérer les données entrez dans le formulaire et les mettre dans un tableau.
le tableau doit contenir un Id qui s'incrémente à chaque fois , un pseudo , l'age , la date et l'heure , un hashage du mot de passe et Un bouton pour supprimer une ligne (l'ID n'est pas affecté par cela).

A l'envoi les choses suivantes doivent être effectuées/vérifiées :
- Que les données soient conformes (sinon le formulaire n'est pas envoyé et l'utilisateur est avertis)
- Age uniquement composé de chiffres , pseudo de moins de 20 char
- Les deux mots de passe correspondent
- S'il manque une des informations obligatoires (notées par une *)
- Le formulaire doit être vidé, sauf s'il n'est pas conforme
- Si les informations envoyées sont déjà présentent dans le tableau, alors ce dernier n'est pas modifié
- Il ne faut pas qu'il y ait de faille XSS.
j'ai déja crée mon formulaire il me manque plus que ma partie JS , partie que je ne maitrise .
Pièce jointe 611890
j'aurais besoin d'aide si possible quelqu'un peu m'expliquer un peu ce serais gentil
Merci !!!!!!
liens vers mon code html :
https://www.toptal.com/developers/ha...meviyayapo.xml

liens vers mon code css :
https://www.toptal.com/developers/ha...elucicalo.scss
16/01/2022, 10h10
ProgElecT

Salut, bienvenue sur DVP

Citation:

Envoyé par peko91

j'ai déjà crée mon formulaire il me manque plus que ma partie JS , partie que je ne maitrise .

Pour t’orienter dans la partie JavaScript, il nous faut le code HTML/PHP et CSS que tu as déjà fait.
Le code JavaScript va faire appel des différents éléments par leurs ids et ou leurs class.
Si tu ne veux pas divulguer ton code, sur la capture d'écran que tu nous as mis, indique l'id de chacun des éléments, cela devrai nous permettre de te proposer des solutions.

code source

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
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
 
body {
    margin-top: 40px;
    margin-bottom: 40px;
    color: black;
    display: flex;
    background-color: aliceblue;
    justify-content: space-around;
    align-items: center;
    min-height: 100vh;
}
 
.formulaire {
    box-shadow: 0 35px 35px;
    background-color: aquamarine;
    padding: 40px;
    border-radius: 15px;
}
 
h1 {
    display: flex;
    justify-content: center;
    border-bottom: 1px solid rgb(119, 130, 140);
    padding-bottom: 10px;
    font-family: 'Roboto', sans-serif;
}
 
.left_side {
    padding-top: 10px;
    padding-bottom: 20px;
    display: flex;
    position: relative;
    flex-direction: column;
}
 
label {
    padding-bottom: 5px;
}
 
input {
    height: 30px;
    border: 1px solid burlywood;
    border-radius: 5px;
    padding-left: 30px;
    outline: 1px solid burlywood;
    ;
}
 
.botom {
    display: flex;
    justify-content: center;
    flex-direction: column;
}
 
.botom .envoyer {
    display: flex;
    justify-content: center;
    padding-bottom: 10px;
}
 
.botom .envoyer button {
    padding: 10px;
    border-radius: 20px;
}
 
.botom .envoyer button:hover {
    background-color: burlywood;
    padding: 10px;
    border-radius: 20px;
}
 
i {
    position: relative;
    left: 0;
    top: -25px;
    padding-left: 10px;
}
 
a {
    text-decoration: none;
    color: black;
}
 
.fa-eye {
    display: flex;
    justify-content: flex-start;
}
 
td,
th {
    border: 1px solid;
}

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
<!DOCTYPE html>
<html lang="fr">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../css/formulaire.css">
    <title>FORMULAIRE TABLEAU</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Lato&family=Roboto:wght@500&display=swap" rel="stylesheet">
 
</head>
 
<body>
    <form class="formulaire">
        <h1>INSCRIPTION</h1>
        <div class="conteneur">
 
            <div class="left_side">
                <label for="name">Pseudo: </label>
                <input for="pseudo" type="text" name="pseudo" id="name" required placeholder="5 caractères minimum" maxlength="20">
                <i class="fas fa-user"></i>
            </div>
            <div class="left_side">
                <label for="name">Age:</label>
                <input type="number" name="age" id="age" required placeholder="18ans">
                <i class="fas fa-birthday-cake"></i>
            </div>
 
            <div class="left_side">
                <label for="name">Mot de passe: </label>
                <input type="password" name="mot de passe" id="mdp" required maxlength="20">
                <i class="fas fa-eye"></i>
            </div>
 
            <div class="left_side">
                <label for="name">Vérification du mot de passe: </label>
                <input type="tel" name="mobile" id="mobile" maxlength="20">
                <i class="fas fa-eye"></i>
            </div>
 
 
            <div class="botom">
                <div class="envoyer">
                    <button type="submit">S'INSCRIRE</button>
                </div>
 
                <div class="mdp-new_account">
                    <a href="#">déja un compte</a> / <a href="#">mot de passe oublié ?</a>
                </div>
            </div>
        </div>
    </form>
 
    <script src="../javascript/main.js">
    </script>
</body>
 
</html>

merci