Exemple 1 : Soumission des données du formulaire

HTML5 IE Cr Op Sa FX

La méthode utilisée peut être facilement déterminée par la barre d'adresse du navigateur. Si un point d'interrogation y apparaît et que l'adresse ressemble à ceci, il s'agit bien d'un GET.

http://www.google.ru/search?q=%D1%81%D0%B8%D1%81%D1%8C%D0%BA%D0%B8&ie=utf-8

Une combinaison unique de paramètres dans la barre d'adresse identifie de manière unique une page, de sorte que les pages avec les adresses ?q=node/add et ?q=node sont considérées comme différentes. Cette fonctionnalité est utilisée par les systèmes de gestion de contenu (CMS, Content management system) pour créer de nombreuses pages de sites Web. En réalité, on utilise un seul fichier qui reçoit une requête GET et, en fonction de celle-ci, génère le contenu du document.

Vous trouverez ci-dessous les applications typiques de ces méthodes sur les sites.

OBTENIR

Transférer de petites données texte vers le serveur ; Recherche du site.

Les moteurs de recherche et les formulaires de recherche de sites sont toujours envoyés via la méthode GET, cela vous permet de partager les résultats de recherche avec des amis, d'envoyer un lien par mail ou de le publier sur un forum.

POSTE

Transférer des fichiers (photos, archives, programmes, etc.) ; envoyer des commentaires ; ajout et édition de messages sur le forum, blog.

Par défaut, le formulaire est traité dans l'onglet actuel du navigateur ; cependant, lors de la soumission du formulaire, vous pouvez modifier ce paramètre et ouvrir le gestionnaire de formulaire dans un nouvel onglet ou un nouvel cadre. Ce comportement est spécifié via le « nom du contexte », qui est la valeur de l'attribut cible de la balise . Les valeurs populaires sont _blank pour ouvrir le formulaire dans une nouvelle fenêtre ou un nouvel onglet, et le nom du cadre, qui est spécifié par l'attribut name de la balise

Exemple 3 : Lier un formulaire à des champs

HTML5 IE Cr Op Sa FX

Bien que les paramètres de transfert de formulaire soient traditionnellement spécifiés dans la balise , ils peuvent également être transférés vers les boutons de soumission du formulaire ( Et ). Pour cela, un ensemble d'attributs formaction , formmethod , formenctype et formtarget sont utilisés, qui sont des analogues des attributs correspondants sans le préfixe de formulaire. L'exemple 4 montre l'utilisation de ces attributs.

Exemple 4 : Soumettre un formulaire

HTML5 IE Cr Op Sa FX

Tous les nouveaux attributs de formulaire ne sont pas pris en charge par certains navigateurs, notamment Internet Explorer et Safari.

Dans cette leçon, nous allons créer un formulaire d'inscription en quatre étapes : 1. Saisie de l'identifiant et du mot de passe 2. Prénom Nom et adresse e-mail 3. Âge, sexe et pays 4. Informations générales

HTML

Tout d'abord, comme d'habitude, créons le balisage HTML. Nous avons besoin d'un conteneur avec quatre blocs DIV, un pour chaque étape.
Code principal HTML sera comme ceci :

À l'intérieur de chaque bloc, nous placerons des champs et des simples étiquette:

S'inscrire sur le site

Nous avons utilisé trois champs de saisie : Mot de passe Et Confirmation mot de passe, et à la fin du bloc la balise saisir avec type soumettre pour passer à l'étape suivante. Les autres blocs fonctionnent exactement de la même manière.
A la fin du conteneur nous avons une simple barre de progression, voici son code :

0 % terminé

Complet HTML le code est comme ceci :

S'inscrire sur le site

Au moins 4 caractères. Uniquement des lettres majuscules, minuscules ou des chiffres. Au moins 4 caractères. Utilisez une combinaison de majuscules et de minuscules pour améliorer la fiabilité. Si vos mots de passe ne correspondent pas, vous ne pourrez pas poursuivre votre inscription.

S'inscrire sur le site

Votre nom. Votre nom de famille. Votre email.

S'inscrire sur le site

0 - 17 18 - 25 26 - 40 40+ Votre âge.

Homme Femme Quel est ton genre.

Russie Ukraine Biélorussie Kazakhstan Autre Votre pays.

S'inscrire sur le site

informations générales

Se connecter
Mot de passe
E-mail
Nom
Âge
Sol
Un pays

0 % terminé

Comme vous l'avez peut-être remarqué, à la quatrième étape, le tableau est vide. Nous le remplirons avec les informations saisies par l'utilisateur à l'aide de jQuery.

CSS

Ajoutons maintenant des styles au formulaire. Nous appliquerons la règle @fontface pour utiliser des polices personnalisées. Dans notre cas, c'est la police Cantarell. Code complet CSS est donné ci-dessous :

/* Réinitialisation CSS (Eric Meyer) */ html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address, grand,cite,code,del,dfn,em,police,img,ins,kbd,q,s,samp,petit,strike,strong,sub,sup,tt,var,b,u,i,center,dl, dt,dd,ol,ul,li,fieldset,form,étiquette,légende,table,légende,tbody,tfoot,thead,tr,th,td(border:0;outline:0;font-size:100%;vertical -align:baseline;background:transparent;margin:0;padding:0)body(line-height:1)ol,ul(list-style:none)blockquote,q(quotes:none):focus(outline:0) ins(text-decoration:none)del(text-decoration:line-through)table(border-collapse:collapse;border-spacing:0) @font-face (font-family: "Cantarell"; src: url(. ./fonts/Cantarell-Regular.eot); src: local("Cantarell"), url("../fonts/Cantarell-Regular.ttf") format("truetype"); ) corps (couleur d'arrière-plan : # f9f9f9 ; couleur : #222 ; famille de polices : Cantarell, Verdana, sans-serif ; taille de police : 12 px ; ) input::-moz-focus-inner, input::-moz-focus-inner ( bordure : aucune ; ) input:focus, input:focus ( contour : aucun ; ) .clear ( clear : les deux ; ) #container ( arrière-plan : url("../images/container.png") sans répétition ; largeur : 754 px ; hauteur : 370 px ; marge : 20px auto ; remplissage : 50px 0 ; débordement : caché ; position : relative ; ) #container #first_step, #second_step, #third_step, #fourth_step ( display: none; ) #container #first_step ( display: block; ) #container .form ( margin: 66px 72px 0 72px; ) #container h1, #container h2 ( taille de la police : Cantarell, Verdana, sans-serif ; alignement du texte : centre ; taille de la police : 24 px ; ombre du texte : 1px 1px 2px #222 ; ) #container h1 span ( couleur : #a90329 ; ) #container h2 ( couleur : #888 ; taille de la police : 20 px ; alignement du texte : à gauche ; ombre du texte : aucun ; ) #table de conteneurs (marge : 20 px 40 px ; taille de police : 14 px ; poids de la police : gras ; ) #table de conteneurs td ( remplissage : 5px 10px ; ) #table de conteneur td:nth-child(2) ( couleur : #a90329 ; ) #entrée de conteneur, #sélection de conteneur ( arrière-plan : url("../images/input.png") non- répéter ; couleur : #888 ; bordure : 1px solide #ccc ; famille de polices : Cantarell, Verdana, sans-serif ; poids de la police : gras ; taille de police : 15 px ; largeur : 300 px ; hauteur : 35px ; remplissage : 0 25px ; marge : 20px 0 ; flotteur : gauche ; rayon de bordure : 6 px ; -moz-border-radius : 6px ; -webkit-border-radius : 6 px ; ) #container input.submit ( background: url("../images/button.png") no-repeat; border: none; curseur: pointeur; largeur: 85px; hauteur: 38px; position: relative; bas: 2px; gauche : 655px; ) #container input.submit:focus ( border: none; ) #container input.send( background: url(". ./images/send.png") no-repeat; ) #container input.error ( border: 1px solid red; ) #container input.valid ( border: 1px solid #1FFF00; ) #container input:focus, #container select :focus ( bordure : 1px solide #a90329 ; couleur : #a90329 ; ) #sélection du conteneur ( remplissage : 5px 0 5px 25px ; ) #option du conteneur ( remplissage : 0 15px ; ) #étiquette du conteneur ( couleur : #666 ; taille de la police : 12px; font-weight: bold; line-height: 14px; float: right; margin: 23px -25px; width: 270px; ) #progress_bar ( background: url("../images/progress_bar.png") non- répéter; largeur: 339px; hauteur: 24px; marge: 0 auto; position: relative; ) #progress ( background: url("../images/progress.png") répéter-x; largeur: 0px; hauteur: 23px; border-radius : 20px ; -webkit-border-radius : 20px ; -moz-border-radius : 20px ; ) #progress_text ( position : relative ; hauteur de ligne : 21px ; alignement du texte : centre ; poids de la police : gras ; couleur : blanc ; ombre du texte : 1px 1px 2px #222 ; largeur : 339px ; hauteur : 24px ; haut : -23px ; gauche : 0 ; )

JS

jQuery Nous l'utiliserons pour modifier en douceur les blocs (diapositives), vérifier l'exactitude des données et modifier le pourcentage d'achèvement.
Nous devrons connecter la bibliothèque dans l'en-tête de la page jQuery et deux autres plugins :
interface utilisateur jQuery Et jQuery entrée focus(utilisé pour contrôler les événements de mise au point et de forme de flou).
jQuery le code est ci-dessous :

$(function())( //valeurs de champ d'origine ​​var field_values ​​​​= ( //id : valeur "nom d'utilisateur" : "Логин", "password" : "Пароль", "cpassword" : "Пароль", "firstname" : "Имя", "lastname" : "Фамилия", "email" : "email" }; //inputfocus $("input#username").inputfocus({ value: field_values["username"] }); $("input#password").inputfocus({ value: field_values["password"] }); $("input#cpassword").inputfocus({ value: field_values["cpassword"] }); $("input#lastname").inputfocus({ value: field_values["lastname"] }); $("input#firstname").inputfocus({ value: field_values["firstname"] }); $("input#email").inputfocus({ value: field_values["email"] }); //reset progress bar $("#progress").css("width","0"); $("#progress_text").html("0% Выполнено"); //first_step $("form").submit(function(){ return false; }); $("#submit_first").click(function(){ //remove classes $("#first_step input").removeClass("error").removeClass("valid"); //ckeck if inputs aren"t empty var fields = $("#first_step input, #first_step input"); var error = 0; fields.each(function(){ var value = $(this).val(); if(value.length!}<4 || value==field_values[$(this).attr("id")]) { $(this).addClass("error"); $(this).effect("shake", { times:3 }, 50); error++; } else { $(this).addClass("valid"); } }); if(!error) { if($("#password").val() != $("#cpassword").val()) { $("#first_step input").each(function(){ $(this).removeClass("valid").addClass("error"); $(this).effect("shake", { times:3 }, 50); }); return false; } else { //update progress bar $("#progress_text").html("33% Выполнено"); $("#progress").css("width","113px"); //slide steps $("#first_step").slideUp(); $("#second_step").slideDown(); } } else return false; }); $("#submit_second").click(function(){ //remove classes $("#second_step input").removeClass("error").removeClass("valid"); var emailPattern = /^+@+\.{2,4}$/; var fields = $("#second_step input"); var error = 0; fields.each(function(){ var value = $(this).val(); if(value.length<1 || value==field_values[$(this).attr("id")] || ($(this).attr("id")=="email" && !emailPattern.test(value))) { $(this).addClass("error"); $(this).effect("shake", { times:3 }, 50); error++; } else { $(this).addClass("valid"); } }); if(!error) { //update progress bar $("#progress_text").html("66% Выполнено"); $("#progress").css("width","226px"); //slide steps $("#second_step").slideUp(); $("#third_step").slideDown(); } else return false; }); $("#submit_third").click(function(){ //update progress bar $("#progress_text").html("100% Выполнено"); $("#progress").css("width","339px"); //prepare the fourth step var fields = new Array($("#username").val(), $("#password").val(), $("#email").val(), $("#firstname").val() + " " + $("#lastname").val(), $("#age").val(), $("#gender").val(), $("#country").val()); var tr = $("#fourth_step tr"); tr.each(function(){ //alert(fields[$(this).index()]) $(this).children("td:nth-child(2)").html(fields[$(this).index()]); }); //slide steps $("#third_step").slideUp(); $("#fourth_step").slideDown(); }); $("#submit_fourth").click(function(){ //send information to server alert("Данные отправлены"); }); });
Nous avons ici un formulaire avec inscription en plusieurs étapes. Pour utiliser cet exemple, il vous suffit de modifier le formulaire action avec un lien vers votre php fichier utilisé pour stocker les données et modifier la ligne 132 pour :
$('form').unbind('submit').submit();. Pour voir le formulaire en action, cliquez sur le bouton Démo.

La conception du formulaire de connexion est vraiment importante pour tout site Web. Nous avons collecté des modèles de page de connexion réactifs à télécharger gratuitement. Le formulaire de connexion fait partie d'un site Web. Lorsque nous allons sur un site Web et que nous souhaitons obtenir un accès complet, nous devons nous inscrire et nous connecter. Le formulaire de connexion de n’importe quel site Web peut être trouvé sur n’importe quel côté du site Web. Ce sera le côté droit ou gauche. Aucun site Web sans formulaire de connexion et d’inscription n’est complet. C’est donc important pour tout site Web. Il est très difficile de créer un formulaire de connexion via HTML CSS sans un développeur professionnel.

HTML est une structure et CSS est un design. HTML5 et CSS3 sont la version mise à jour pour la conception. Certains des formulaires de connexion créés grâce à ce codage de mise à jour peuvent être téléchargés directement. Le développeur a partagé ce formulaire gratuitement. Ceux-ci peuvent être utilisés pour des besoins personnels ou professionnels.

Utilisez gratuitement ce modèle de page de connexion réactive et vous pourrez vous construire vous-même. Vous pouvez personnaliser et modifier n’importe quelle couleur ou style. Vous pouvez également connecter votre base de données, jquery. Ce modèle de connexion est donc vraiment utile et important.

Nous avons partagé cet article avec des modèles de formulaires de connexion gratuits html5 css3. Cette collecte sera augmentée. Nous essayons de collecter davantage de modèles de pages de connexion bootstrap.

Formulaire de conception matérielle

Ce formulaire de connexion a l’air vraiment génial et simple. Vous pouvez modifier et changer la couleur de l'interface. Conception simple mais très professionnelle.

TÉLÉCHARGEMENT DE LA DÉMO

Lorsque vous devez concevoir un formulaire de connexion à une application, vous pouvez utiliser ce formulaire de connexion Material Design. Ce sera parfait pour votre application.

TÉLÉCHARGEMENT DE LA DÉMO

Avatar SVG animé

Le modèle de connexion animé est très demandé. Si vous souhaitez l'utiliser, votre profession. Ce formulaire de connexion Avatar SVG animé est meilleur pour vous.

TÉLÉCHARGEMENT DE LA DÉMO

Effet de secousse du formulaire de connexion

Il s'agit d'un simple formulaire de connexion qui a un certain effet et utilise votre activité professionnelle.

TÉLÉCHARGEMENT DE LA DÉMO

CSS3 Animation Cloud et formulaire de connexion

Si vous avez une activité cloud ou envisagez tout type d'activité cloud, vous pouvez utiliser ce CSS3 Animation Cloud et ce formulaire de connexion.

TÉLÉCHARGEMENT DE LA DÉMO

Formulaire de connexion propre

Il s'agit d'un design très épuré et du même nom que le formulaire de connexion Clean. Utilisez ce formulaire pour votre site Web propre.

TÉLÉCHARGEMENT DE LA DÉMO

Formulaire de connexion sur HTML5

Ce formulaire de connexion est conçu en HTML5 et utilisé pour votre meilleur site Web.

TÉLÉCHARGEMENT DE LA DÉMO

Formulaire de connexion Validation CSS uniquement

TÉLÉCHARGEMENT DE LA DÉMO

Formulaire de connexion CSS

TÉLÉCHARGEMENT DE LA DÉMO

Formulaire de connexion Batman

TÉLÉCHARGEMENT DE LA DÉMO

Formulaire de connexion avec Materializecss

TÉLÉCHARGEMENT DE LA DÉMO

Formulaire de connexion au matériau angulaire

TÉLÉCHARGEMENT DE LA DÉMO

Formulaire de connexion réactif

TÉLÉCHARGEMENT DE LA DÉMO

Formulaire de connexion réactif

TÉLÉCHARGEMENT DE LA DÉMO

Forme plate simple avec chargeur rotatif

TÉLÉCHARGEMENT DE LA DÉMO

Connectez-vous à Everdwell

Dans le format de cette leçon, nous créerons Formulaire de connexion CSS, je vais vous montrer comment connecter les icônes de police, comment définir la transparence des éléments et utiliser les effets de survol animés dans le formulaire.

Cadre de formulaire en HTML

Nous créons d’abord le cadre du formulaire. Ouvrez le modèle HTML et écrivez le code suivant entre les balises.

Créons un bloc qui servira de conteneur pour le formulaire. Attribuons-lui la classe .container, plaçons un formulaire contenant une entrée. La première entrée sert à saisir le login type="text" name="username" placeholder="(!LANG : Entrez votre identifiant" !}, deuxième input type="mot de passe" name="mot de passe" placeholder="(!LANG : Entrez le mot de passe" !} accepte un mot de passe suivi d'un bouton de soumission. Ci-dessous, nous plaçons une inscription pour la récupération de mot de passe, nous en ferons un simple lien.

Restaurer le mot de passe

Décrire les éléments du formulaire en CSS

Ensuite, nous formaterons ces éléments de formulaire. Créons un répertoire CSS supplémentaire dans lequel nous placerons les fichiers de style. Dans celui-ci, nous créons un fichier style.css et le connectons à notre page.

Je suggère de mettre une image en arrière-plan ; pour ce faire, créons un répertoire img supplémentaire et plaçons-y notre image. Nous incluons l'image dans style.css pour body . Nous notons le chemin d'accès à l'image, quittons le répertoire actuel, allons dans le dossier img, puis le nom de l'image.

Corps(image d'arrière-plan : url("../img/bg.png"); )

A( couleur : #fff; ) a:hover( text-decoration: none; )

Stylisons le conteneur avec le formulaire .container. Fixons la largeur à 450 pixels et définissons temporairement la hauteur à 500 pixels. Fixons la couleur sur #182134 et centrons-la au milieu de la marge de l'écran : 250px auto 0 auto ; . Placez le texte à l'intérieur du bloc au centre, avec un retrait de 20 pixels en haut.

Conteneur (largeur : 450 px ; hauteur : 500 px ; couleur d'arrière-plan : #182134 ; marge : 250px auto 0 auto ; alignement du texte : centre ; )

Créons ensuite une entrée pour saisir votre identifiant et votre mot de passe. Afin de ne pas affecter les boutons, nous les sélectionnons par les attributs texte et mot de passe, en spécifiant une largeur de 300 pixels. , une hauteur de 50 sommets. Agrandissez le texte de 18 px, faites des retraits entre eux de 25 px, autour des coins border-radius : 4px ; , le texte sera déplacé à 10 pixels. À gauche.

Entrée, entrée (largeur : 300 px ; hauteur : 50 px ; taille de police : 18 px ; marge inférieure : 25 px ; rayon de bordure : 4 px ; remplissage gauche : 10 px ; )

Ensuite, nous centrerons les inpyt en les enveloppant dans un bloc supplémentaire et en attribuant la classe .dws-input . Faisons un saut de ligne après le bouton et insérons une image avec notre logo en haut avant le bouton. Pour ce faire, copiez-le dans le dossier img et écrivez-y le chemin img src="img/men.png".

Restaurer le mot de passe

Nous décrirons ensuite ses styles. Attribuons une largeur et une hauteur de 120 pixels à l'image. , puis relevez-le juste au-dessus de la marge de la forme : -60px 0 30px 0; , faites environ de la vodka à 5 pics. bordure : 5px solide #1a394f ; , autour des coins 50%.

Conteneur img (largeur : 120 px ; hauteur : 120 px ; marge : -60px 0 30px 0 ; bordure : 5px solide #1a394f ; rayon de bordure : 50 % ; )

Décrivons maintenant les styles de boutons. Attribuons-lui la classe .dws-submit et attribuons-lui des styles. Nous attribuons des retraits, augmentons le texte de 15 pixels, le rendons blanc et l'arrière-plan du bouton bleu, supprimons la vodka et créons un carré en bas, ainsi qu'un curseur pointeur.

Dws-submit ( remplissage : 13px 30px ; marge : 5px 0 20px 0 ; taille de police : 15px ; couleur : #fff ; couleur d'arrière-plan : #2ca8c6 ; bordure : aucune ; bordure inférieure : 4px solide #6ee9fd ; curseur : pointeur ; )

Pour centrer les entrées et le bouton, plaçons-les séparément, chacun dans son propre bloc. Décrivons les styles du bouton au survol. Nous effectuons une transition en douceur, changeons la couleur du bouton en blanc et en même temps la police deviendra sombre.

Dws-submit:hover( transition : toutes les 0,5 s ; arrière-plan : #fff ; couleur : #2c536c ; )

Créons un bloc bleu au-dessus de notre forme, box-shadow: 0 -5px 0 #3adbfd; , et ajoutez-le à l'image box-shadow: 0 -5px 0 #3adbfd; . Rendons le fond du formulaire un peu plus transparent ; pour cela, nous écrirons cette couleur au format RGBA.

J'utilise le service w3schools.com, je descends dans Color Picker, saisis notre couleur dans le formulaire et la convertis en RVB. Copiez et collez dans le style du conteneur.

Conteneur (largeur : 450 px ; hauteur : 500 px ; couleur d'arrière-plan : rgba(24, 33, 52, 0.7); marge : 250 px auto 0 auto ; alignement du texte : centre ; ombre de la boîte : 0 -5px 0 #3adbfd ; ) .container img (largeur : 120 px ; hauteur : 120 px ; marge : -60px 0 30px 0 ; bordure : 5px solide #1a394f ; rayon de bordure : 50 % ; ombre de la boîte : 0 -5px 0 #3adbfd ; )

Pour l'effet, arrondissez les coins inférieurs, pour cela nous écrirons border-radius : 0 0 10px 10px ; .

Ajout d'icônes de police

Ajoutons des icônes sous forme de polices, allons sur le service fontawesome.io et téléchargeons-les sur votre ordinateur. Décompressons l'archive, copions le dossier des polices, qui contient les polices, et copions le fichier de styles dans le répertoire CSS. Ensuite, nous connectons les styles à la page.

Sélectionnons des icônes pour nos entrées, pour cela nous allons sur la page Icônes, la première consiste à connecter le style de saisie du login, utilisez utilisateur, copiez son code f007, et décrivez-le dans des styles en utilisant un pseudo-élément.

Connexion des polices font-family : "FontAwesome" ; , puis l'icône elle-même, positionnez-la absolument dans les marges, augmentez-la de 30 pixels, centrez-la et changez la couleur.

Dws-input::before( font-family: "FontAwesome"; contenu: "\f007"; position: absolue; taille de police: 30px; remplissage: 10px 0 0 7px; couleur: #2c536c; )

Déplaçons un peu le texte dans l'entrée - padding-left: 40px; .

Sélectionnons la deuxième icône avec le nom verrouillage, copiez son code f023, et décrivez ses styles.

Pour ce faire, sélectionnez le deuxième élément .dws-input:nth-child(2)::avant(), et écrivez le contenu de l'image : " \f023";.

Dws-input::before( font-family: "FontAwesome"; contenu: "\f007"; position: absolue; taille de police: 30px; remplissage: 10px 0 0 7px; couleur: #2c536c; ) .dws-input : nième-enfant(2)::avant( contenu : "\f023"; )

Dws-input:hover::before( couleur : #319ebc ; transition : toutes les 0,3 s ; )

Et aussi, survolez les styles pour les entrées.

Entrée Dws-input:hover( box-shadow: 0 0 6px 3px rgba(58, 219, 253, 0.35); )

Pour plus de commodité, enveloppons-les dans un bloc avec la classe .social et décrivons leurs styles. Changeons leur couleur en blanc, augmentons-les de 20 pixels, faisons-leur une largeur de 20 pixels et ajoutons un peu de remplissage.

Dws-social i (couleur : #fff ; taille de police : 20 px ; largeur : 20 px ; remplissage : 10 px ; )

Ensuite, nous décrirons les styles de survol. Créons un bloc blanc, changeons le fond de l'icône en sombre, arrondissons les coins et affichons le curseur au survol.

Social i:hover( couleur d'arrière-plan : #fff ; couleur : #1a394f ; rayon de bordure : 5 px ; curseur : pointeur ; )

Supprimons la hauteur du bloc de formulaire, qui a été définie au tout début, et ajoutons à sa place un bottom padding-bottom: 20px; .

En principe, c'est tout, nous avons un formulaire assez sympa qui peut être connecté au site et utilisé pour l'autorisation.

Essayez de faire quelque chose d'original en utilisant l'exemple de cette leçon, pratiquez-vous et n'oubliez pas de partager ce matériel.