Ajout d'un icône à côté d'un champ de formulaire
Résolu
ameb2908
Messages postés
93
Date d'inscription
Statut
Membre
Dernière intervention
-
jordane45 Messages postés 38486 Date d'inscription Statut Modérateur Dernière intervention -
jordane45 Messages postés 38486 Date d'inscription Statut Modérateur Dernière intervention -
Bonjour, j'ai un carré qui s'affiche à la place de l'icône.
Voici mon code :
account-create.html
<!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">
<title>Formulaire d'inscription & de connexion</title>
<link rel="stylesheet" href="fontawesome/css/font-awesome.min.css">
<link rel="stylesheet" href="css/account-create.css">
</head>
<body>
<div id="wrapper">
<div id="box">
<form id="formCnx" action="traitement.html" method="post">
<h1>S'inscrire</h1>
<p>
<input type="text" name="pseudoForm" id="pseudo"
class="input" placeholder="Pseudo">
<span id="iconPseudo"></span>
</p>
<div id="errorPseudo"></div>
<p>
<input type="email" name="emailForm" id="email"
class="input" placeholder="Adresse mail">
</p>
<div id="errorEmail"></div>
<p>
<input type="password" name="userpassForm" id="userpass"
class="input" placeholder="Mot de passe">
</p>
<div id="errorPass"></div>
<p>
<input type="password" name="userpass2Form" id="userpass2"
class="input" placeholder="Retaper Mot de passe">
</p>
<div id="errorPass2"></div>
<input type="submit" name="submitForm" value="Valider" class="input">
</form>
<p>Déjà enregistré :<a href="login.html"> connectez-vous</a></p>
<p><a href="Forgot_your_password.php">Mot de passe oublié</a></p>
</div>
</div>
<script src="js/account-create.js"></script>
</body>
</html>
css/account-create.css
* {
margin: 0;
padding: 0;
}
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
}
a {
text-decoration: none;
color: navy;
}
#wrapper {
width: 100%;
background-image: linear-gradient(rgb(0, 62, 128), rgb(128, 0, 15));
height: 100vh;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
#box {
background-color: white;
width: 25%;
padding: 40px;
border-radius: 10px;
}
#formCnx h1 {
text-align: center;
margin-bottom: 30px;
}
#formCnx p {
margin-bottom: 20px;
}
.input {
width: 100%;
padding: 7px 5px;
box-sizing: border-box;
border-radius: 5px;
border: 1px solid gainsboro;
outline: none;
}
#formCnx input[type="submit"] {
margin-bottom: 40px;
font-size: 20px;
cursor: pointer;
}
#formCnx input[type="submit"]:hover {
background-color:burlywood;
color: white;
}
#box > p {
margin-bottom: 10px;
}
/* ========= LES CLASSES DE MISE EN FORME AU CHANGEMENT DES CHAMPS DU FORMULAIRE ========= */
.warning {
color: red;
}
.check {
color: green;
}
.error {
color: red;
}
.bordureRouge {
border: 2px solid red;
width: 100%;
padding: 7px 5px;
box-sizing: border-box;
border-radius: 5px;
}
.bordureVert {
border: 2px solid green;
width: 100%;
padding: 7px 5px;
box-sizing: border-box;
border-radius: 5px;
}
js/account-create.js
/* ========= LISTE DES FONCTIONS DEBUT ========= */
let validadPseudo = (valeur, pseudoForm) => {
let pseudo = document.querySelector('#pseudo');
let iconPseudo = document.querySelector('#iconPseudo');
let errorPseudo = document.querySelector('#errorPseudo');
/*let regexPseudo = /^[a-z]{4}+[0-9]{4}$/gi;*/
if(valeur.value.length > 8) {
iconPseudo.innerHTML = '<i class="fa fa-exclamation" aria-hidden="true"></i>';
iconPseudo.classList.remove('check');
iconPseudo.classList.add('warning');
errorPseudo.innerText = "Le champ " + pseudoForm + " ne doît pas dépasser 8 caractères.";
errorPseudo.classList.add('error');
pseudo.classList.remove('input');
pseudo.classList.remove('bordureVert');
pseudo.classList.add('bordureRouge');
}
else {
iconPseudo.innerHTML = '<i class="fa fa-check" aria-hidden="true"></i>';
iconPseudo.classList.remove('warning');
iconPseudo.classList.add('check');
errorPseudo.innerText = "";
errorPseudo.classList.remove('error');
pseudo.classList.remove('input');
pseudo.classList.remove('bordureRouge');
pseudo.classList.add('bordureVert');
}
};
/* ========= LISTE DES FONCTIONS FIN ========= */
/* ========= APPEL DES FONCTIONS DEBUT ========= */
let formCnx = document.querySelector('#formCnx');
formCnx.pseudoForm.addEventListener('change', function() {
validadPseudo(this, 'Pseudo');
});
/* ========= APPEL DES FONCTIONS FIN ========= */
Windows / Chrome 107.0.0.0
A voir également:
- Ajout d'un icône à côté d'un champ de formulaire
- Whatsapp formulaire opposition - Guide
- Formulaire de réclamation facebook - Guide
- Icone - Guide
- Formulaire de reclamation instagram - Guide
- Comment mettre un icone sur le bureau - Guide
2 réponses
Bonjour,
Si tu mets directement l'icone dans ton code html (donc, sans passer par le javascript) .. est-ce qu'elle s'affiche bien ?
Si la réponse est non, c'est que tu dois mal charger la librairie fontawesome
Effectivement çà venait de ma librairie, maintenant çà marche bien.
Par contre, dans mon navigateur la mise en forme (css) du site de fontawesome n'est pas pris en compte, donc j'ai du mal à aller chercher les informations.