Créer et animer un formulaire stylé !
HTML-код
- Опубликовано: 7 сен 2024
- Abonne-toi à la NewsLetter pour recevoir des tas d'infos sur le développement web :
mailchi.mp/94d...
Discord : / discord
Code source : codepen.io/Zir...
Tu veux apprendre les technologies du web ? C'est par ici :
www.ecole-du-w...
Je suis aussi sur la plateforme Tuto.com :
fr.tuto.com/fo...
Et sur Udemy :
www.udemy.com/...
Abonne-toi à ma chaîne :
/ @ecoleduweb
Suis-moi sur Twitter :
/ ledesignerduweb
Si tu veux que je fasse des vidéos sur certains sujets dis le moi!
-----------------------------------------------------------------------------------------
c'est vraiment merveilleux ce que vous faites, je vous remercie infiniment
super !!! justement ça manquait les cours sur les formulaires , et en plus j'ai beaucoup appris sur l'algorithme du JavaScript ********* :) par contre pour " target " j'ai pas trop saisi ... peux-tu m'éclairer ?
C'est bien! Mais sauf que ça devient compliqué si on souhaite le faire en réact, donc le faites d'animer nos inputs 🙏
salut un grand merci pour tes vidéos et pour le script moi j'ai juste inversé le label et l'input ensuite j'ai fais input:focus ~ label, input:valid ~ label { top: 0%; transform: translateY(-100%);
}
Hello le camel case sur des classes css ça marche mais c’est pas approprié, et l’utilisation de la balise Strong pour styliser est un mauvais choix, cette balise existe pour d’autres raisons.
Je sais que cet un exercice mais ces deux détails ont une grande importance pour des personnes qui souhaitent apprendre l’intégration web.
A part ça tu expliques très bien et tes vidéos sont top 👍
Merci Enzo !!! le script j'ai du le relire 2, 3 fois mais c'est bon ;)
j'ai de mal a bien maîtrise le CSS , et vous allez vraiment trop vite la X) , merci pour la vidéo btw
I guess Im asking randomly but does any of you know a tool to get back into an instagram account??
I was dumb forgot the login password. I would love any tips you can give me
@Garrett Raiden Instablaster ;)
@Daxton Lukas Thanks for your reply. I got to the site on google and I'm in the hacking process atm.
Seems to take a while so I will reply here later when my account password hopefully is recovered.
@Daxton Lukas It did the trick and I finally got access to my account again. I am so happy!
Thank you so much, you saved my ass :D
@Garrett Raiden You are welcome xD
Genial tes explications
Salut c'est super bien je veux des vidéos de JavaScript pour des animations de formulaire
merci !!!
Salut Enzo et tout d'abord merci pour tes superbes vidéos et tutos (je t'en ai acheté plusieurs !)
Dis-moi si je me trompe mais j'ai l'impression que l'animation du label (top: 0px !important; transform: translateY(-100%) !important;) quand la classe animation est ajoutée au form-group ne fonctionne pas avec Edge ? Idem pour la bordure des inputs qui doit changer de couleur ?
Merci d'avance pour ton aide.
Hello, si un navigateur fait des siennes alors il faut adapter son code en fonction de celui-ci.
Tu peux par exemple rajouter des "css vendors" sur les propriétés qui ne fonctionnent pas.
En JS tu peux détecter les navigateurs et agir en conséquence :
stackoverflow.com/questions/9847580/how-to-detect-safari-chrome-ie-firefox-and-opera-browser
Tu peux aussi utiliser le site "can i use" pour voir ce qui est compatible ou pas.
Bon courage :)
@@EcoleduWeb Salut Enzo et merci pour ta réponse rapide !
Pour les CSS vendors, je les ai déjà tous rajoutés mais sans succès. J'avais déjà aussi consulté CanIUse mais apparemment il n'y aucun problème de compatibilité connu. Reste à utiliser JS ou CSS pour détecter ie / edge et agir en conséquences. Merci pour les pistes en tout cas.
Bon ça y est j’ai enfin trouvé ! Si d’autres personnes sont dans le même cas que moi, il faut savoir qu’Internet Explorer ne comprends pas les fonctions fléchées (et plein d’autres choses d’ailleurs !). Je les ai donc remplacées par des fonctions anonymes classiques. Il faut aussi ajuster quelques petites choses dans le CSS mais le principal problème était bien celui-ci.
Bonjour Enzo, merci beaucoup pour ton tutoriel, ça fait un moment que je cherchais à faire cette effet. J'ai essayé d'adapter ton tutoriel pour du Wordpresss, mais le script n'est ps pris en compte. Pour la base du formulaire, je passe par le plugin Contact Form 7. Lorsque j'écris le script dans mon fichier js le script ne fonctionne pas et lorsque je le tape directement dans la console, j'ai un message d'erreur qui s'affiche "Uncaught SyntaxError: redeclaration of const inputs". Est-ce que tu aurais une idée?
Hello Jonathan, tu as essayé d'intégrer directement le code source ?
Il est là :
codepen.io/Ziratsu/pen/JjdwozB
Si oui tu as quand même cette erreur ?
@@EcoleduWeb Oui tout à fait, j'ai regardé la vidéo et le code source. J'ai adapté les balises pour que ça corresponde au formulaire contact form 7 que j'utilise. J'ai mis en ligne la partie de mon site à l'adresse suivante : preprod.jonathan-sanjose.fr/ (c'est le dernier volet de la page d'accueil), pour que tu puisse voir ce qu'il se passe. J'ai testé mon fichier js et il est bien actif.
Souvenir de la section formulaire dans la formation front-end sur Udemy
Bonne mémoire :)