Implémentation du modèle de formulaire d'étiquette flottante

En utilisant la conception d'interaction de formulaire mobile de Matt Smith comme guide, nous allons créer une interaction de formulaire étonnante pour le Web, belle et accessible à l'aide de HTML, CSS et JavaScript.

Vue d'ensemble

La conception de formulaires et les interactions sur le Web peuvent constituer un sujet sensible. La multiplicité des problèmes d'accessibilité des formulaires et des meilleures pratiques peut rendre très difficile la conception d'une interaction de forme convaincante, par opposition à la conception de formulaire sur des plateformes natives..

Matt Smith a récemment créé une interaction de forme convaincante qu'il a publiée dans Dribbble:

Jetez un coup d'œil au tir original de Dribbble sur floatlabel.com

Bien que conçu pour une application iOS native, cette interaction de formulaire peut être recréée pour le Web à l'aide de HTML, CSS et Javascript tout en apaisant les problèmes d'accessibilité du formulaire..

Le concept des étiquettes flottantes a suscité beaucoup d’attention, ce qui a donné lieu à des discussions et à des expériences sur le Web..

Une démo vraiment cool de @zelph http://t.co/Szw1bE2tib mettant en œuvre l'interaction de formulaire avec une étiquette flottante super géniale http://t.co/NhKfErgd2Q de @mds

- Brad Frost (@brad_frost) 23 octobre 2013

Plutôt que d'utiliser les mêmes champs de formulaire dans la conception de Matt, nous allons créer un simple formulaire de contact que vous pourriez utiliser sur votre propre site Web. Alors plongeons dans!

Anatomie de la forme

Premièrement, observons et enregistrons les interactions de forme créées par Matt. Cela nous permettra de prédéterminer comment notre formulaire doit être annoté. Cela nous permettra également de bien comprendre comment styliser le formulaire et créer ses interactions avec JavaScript..

Structure de formulaire

Le formulaire contient les éléments suivants, nous pouvons traduire en HTML:

éléments
éléments
</code> élément</li> <li> <code>espace réservé</code> les attributs</li> </ul> <img src="//accentsconagua.com/img/images_16/implementing-the-float-label-form-pattern.png"><br> <h3>Interactions entre éléments de forme</h3> <p>En observant les interactions créées par Matt, nous pouvons formuler des règles pour l’interaction des éléments de formulaire que nous allons créer. Ces règles seront utiles lors de la création de nos balises, règles de style et interactions JavaScript..</p> <ul> <li> <strong>sur le chargement de la page</strong>: <ul> <li> <code><label></code> éléments</li> <ul> <li>Caché, souligné d'une couleur de surbrillance.</li> </ul> <li> <code><input></code> Et <code><textarea></code> éléments: <ul> <li>Afficher le texte de substitution de l'élément.</li> </ul> </li> </ul> </li> <li> <strong>mise au point</strong>: <ul> <li> <code><label></code> éléments</li> <ul> <li>Si le champ de saisie correspondant à l'étiquette est vide, masquez-le. Sinon, soulignez la couleur de l'étiquette.</li> </ul> <li> <code><input></code> Et <code><textarea></code> éléments: <ul> <li>Si le champ est vide, affichez le texte de l'espace réservé de l'élément. Sinon, affiche le texte saisi par l'utilisateur.</li> </ul> </li> </ul> </li> <li> <strong>sur keyup</strong>: <ul> <li> <code><label></code> éléments</li> <ul> <li>Si le champ de saisie correspondant à l'étiquette est vide, masquez-le. Sinon, montrez l'étiquette.</li> </ul> <li> <code><input></code> Et <code><textarea></code> éléments: <ul> <li>Si le champ est vide, affichez le texte de l'espace réservé. Sinon, affiche le texte saisi par l'utilisateur.</li> </ul> </li> </ul> </li> <li> <strong>le flou</strong>: <ul> <li> <code><label></code> éléments</li> <ul> <li>Si le champ de saisie correspondant est vide, masquez l'étiquette. Sinon, soulignez la couleur.</li> </ul> <li> <code><input></code> Et <code><textarea></code> éléments: <ul> <li>Si le champ est vide, affichez le texte de l'espace réservé. Sinon, affiche le texte saisi par l'utilisateur.</li> </ul> </li> </ul> </li> </ul> <p>Maintenant que nous avons déterminé la forme <abbr title="Langage Signalétique Hyper Text">HTML</abbr> éléments avec ses règles d'interaction, nous pouvons commencer à le créer.</p> <hr> <h2>De base <abbr title="Langage Signalétique Hyper Text">HTML</abbr> </h2> <p>Commençons par obtenir un code de démarrage de base.</p> <pre> <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>Contactez moi</title>  <meta name="viewport" content="width=device-width, initial-scale=1">  <link rel="stylesheet" href="styles.css">   </head> <body>   <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>  <script src="scripts.js"></script> </body> </html></pre> <hr> <h2>Création du balisage de formulaire</h2> <p>Créons maintenant le balisage pour notre formulaire:</p> <pre> <section> <h1>Contactez moi</h1> <form action="#" method="get"> <ul> <li> <label for="name">Votre nom:</label> <input type="text" placeholder="Your Name" name="name" tabindex="1"/> </li> <li> <label for="email">Votre email:</label> <input type="email" placeholder="Your Email" name="email" tabindex="2"/> </li> <li> <label for="message">Message:</label> <textarea placeholder="Message… " name="message" tabindex="3">

    Ici, nous configurons un conteneur de formulaire avec un en-tête «Contactez-moi» et les éléments de formulaire correspondants structurés dans des éléments de liste. Notez que nous avons également assigné le champ email type = "email". Cela fournit des claviers virtuels contextuels pour les périphériques qui les prennent en charge, ainsi qu'une validation simple prise en charge par le navigateur pour les navigateurs prenant en charge les types de saisie HTML5. Pour ceux qui ne le font pas, cela devient un simple champ de texte.
 Ce que nous avons maintenant, ce sont les bases d'un formulaire qui fonctionnera n'importe où et qui est correctement structuré pour une accessibilité simple..
  
 Remarque: Nous ne couvrons pas la soumission de formulaire côté serveur dans ce didacticiel, alors n'hésitez pas à modifier la méthode de soumission du formulaire si nécessaire.
 
 Création de styles de page de base
 Nous avons maintenant un formulaire de travail en HTML. Maintenant, nous allons faire notre premier pas dans l'amélioration progressive: appliquer CSS modes. Créons des styles pour rendre notre formulaire plus attrayant tout en gardant notre formulaire fonctionnel et accessible..
 Créons un style de base pour le conteneur de page et de formulaire. dans le  de notre document, nous avons créé un lien vers un fichier nommé styles.css, nous allons donc créer ce fichier maintenant et l'enregistrer à la racine de notre projet.
 Nous commençons par importer les styles de Eric Meyer CSS réinitialiser dans notre propre fichier. Vous pouvez saisir ces styles ici et les copier dans votre propre feuille de style.
 Ensuite, créons quelques styles de page généraux:
  / * Général =================================== * / *, *: avant, *: après -moz-box-sizing: border-box; -webkit-box-dimensionnement: border-box; taille de la boîte: boîte-frontière;  body background: # eaedf1;  body, input, textarea font: 1em / 1.5 Arial, Helvetica, sans-serif;  .container max-width: 25em; marge: 2em auto; largeur: 95%;  .title font-size: 1.5em; remplissage: .5em 0; text-align: center; arrière-plan: # 323a45; Couleur blanche; border-radius: 5px 5px 0 0; 
 Vous remarquerez que nous utilisons l'approche suggérée par Paul Irish en ce qui concerne le modèle de boîte: taille de la boîte: boîte-frontière;.
 Maintenant, nous avons quelque chose d'un peu mieux, mais il faudra encore du travail..
  
 
 Création de styles de liste de formulaires
 Appliquons des styles à nos éléments de formulaire. Cela fera ressembler notre forme à celle de Matt.
 Tout d'abord, nous allons styliser les éléments de la liste qui contiennent nos éléments de formulaire.
  / * Formulaire =================================== * / .form ul background: white; marge en bas: 1em;  .form li border: 1px solid #ccc; bordure inférieure: 0; marge inférieure: 0px; position: relative;  .form li: premier-enfant border-top: 0;  .form li: dernier-enfant border-bottom: 1px solide #ccc; 
 Maintenant, tous nos éléments de formulaire sont visuellement contenus. Vous devriez avoir quelque chose comme ça:
  
 
 Création de styles d'élément de formulaire
 Continuons à styler nos éléments de forme pour les faire correspondre au design de Matt tout en tenant compte des contraintes d'accessibilité du Web..
 Définissez les champs de saisie comme de gros éléments de niveau bloc dans le formulaire:
  label, input, textarea display: block; bordure: 0;  input, textarea width: 100%; hauteur: 100%; rembourrage: 2,25em 1em 1em; contour: 0;  textarea height: 16em; redimensionner: aucun; 
 Vous devriez avoir quelque chose comme ça:
  
 Puis stylisez la forme  les éléments doivent être positionnés à environ un tiers du sommet de chaque bloc d'entrée.
  label taille de police: .8125em; / * 13/16 * / position: absolue; en haut: 1,23 m; à gauche: 1,23 m; couleur: # f1773b; opacité: 1; 
 Remarque: avez-vous remarqué le opacité règle? Nous allons utiliser cette propriété (avec le Haut propriété) pour animer le  élément plus tard en utilisant JavaScript.
 Vous devriez avoir quelque chose qui commence à ressembler beaucoup à la conception des formulaires de Matt.
  
 Ensuite, besoin de styler notre bouton d'envoi de formulaire.
  input [type = "submit"] background: # f1773b; marge en bas: 1em; Couleur blanche; border-radius: 3px; rembourrage: .75em; -webkit-apparence: aucun; / * supprime le navigateur par défaut 
 Remarquez que nous avons utilisé le sélecteur d'attribut pour cibler uniquement le bouton d'envoi. Nous avons ajouté quelques styles de base ainsi qu’une simple interaction sur le :flotter et :actif états (navigateurs plus anciens qui ne supportent pas CSS se transforme n’aura tout simplement pas une interaction sophistiquée, mais la forme fonctionne toujours). Vous devriez maintenant avoir quelque chose comme ça:
  
 Notre formulaire a été conçu de manière à ressembler au design de Matt, mais il a également été adapté pour apaiser les problèmes d'accessibilité du Web. Remarquez comment, sans JavaScript, le formulaire est toujours accessible avec les champs de formulaire affichés à tout moment. Pour les utilisateurs de navigateurs plus anciens qui ne prennent pas en charge la espace réservé attribut, ils seront toujours en mesure de voir les champs de formulaire et de déterminer quelle information est requise d'eux.
 De plus, le  et  les éléments couvrent l'ensemble du bloc de champ de formulaire, de sorte que la zone cible de chaque entrée est assez grande et accessible.
 Par exemple, voici à quoi ressemblerait le formulaire à ce stade d'Internet Explorer 8:
  
 
 Utilisation de JavaScript pour un formulaire progressivement amélioré
 Nous devrions maintenant commencer à réfléchir à la manière de mettre en œuvre l’interaction créée par Matt en JavaScript. Nous y parviendrons en grande partie en ajoutant et en supprimant CSS Des classes.
 Vous remarquerez juste avant la fermeture  tag nous mettons un lien vers notre fichier JavaScript personnalisé nommé scripts.js. Nous pouvons créer ce fichier maintenant et dire au navigateur d’exécuter le code lorsque le DOM est prêt:
  $ (document) .ready (function () // notre code ici);
 Vérification de espace réservé soutien
 Au cas où vous ne l'auriez pas remarqué, cette interaction est fortement dépendante du support réservé. L'attribut de marque de réservation est largement pris en charge par les navigateurs modernes. Étant donné que notre interaction avec les formulaires dépend tellement de la prise en charge des paramètres de substitution, nous allons d'abord vérifier si le navigateur prend en charge le texte de substitution. Si c'est le cas, nous allons implémenter l'interaction de formulaire. Si ce n'est pas le cas (IE8 et IE9), nous fournirons simplement le formulaire de base sans interaction JavaScript. Amélioration progressive pour la victoire!
 Tout d'abord, utilisons jQuery $ .support () pour voir si le navigateur prend en charge le texte d’espace réservé. Cela définira $ .support.placeholder true ou false, selon la prise en charge par le navigateur du texte fictif.
  // Test de prise en charge d'espace réservé $ .support.placeholder = (function () var i = document.createElement ('input'); return 'placeholder' in i;) ();
 Si le texte de substitution est pris en charge, nous pouvons masquer le  éléments sur le chargement de la page. Comme mentionné précédemment, le fait de masquer les étiquettes avec JavaScript après le chargement de la page garantit que les navigateurs avec JavaScript désactivé (et ceux sans prise en charge d'espace réservé) peuvent toujours utiliser le formulaire..
  // Masque les libellés par défaut si les espaces réservés sont pris en charge si ($. Support.placeholder) $ ('. Form li'). Each (function () $ (this) .addClass ('js-hide-label'); ); // Code pour ajouter / supprimer des classes ici
 Notez que nous avons ajouté une classe à chaque élément de la liste nommé js-hide-label. En effet, conformément aux règles sur les interactions énoncées au début du didacticiel, l'apparence par défaut du formulaire a les étiquettes de champs de formulaire masquées. le js-hide-label la classe sera appliquée au parent 
 éléments lorsque le descendant  l'élément est vide du contenu de l'utilisateur.
 Pour aider à la compréhension et à la maintenabilité du code, nous préfixons les classes que nous ajoutons ou supprimons avec JavaScript avec 'js-'. Ajoutons cette classe à notre feuille de style et utilisons-la pour masquer tous les descendants. étiquette éléments de vue. Rappelez-vous comment nous allions utiliser le opacité règle? C’est là que nous l’utilisons pour cacher le  éléments:
  .js-hide-label label opacité: 0; en haut: 1.5em
 Remarque: le opacité Cette propriété est prise en charge par tous les navigateurs modernes. IE8 ne le reconnaîtra pas, mais c'est correct, car IE8 ne prend pas non plus en charge les attributs d'espace réservé. Par conséquent, nous n'exécutons pas JavaScript pour appliquer la classe dans IE8. Gagnant-gagnant!
 Une note sur les transitions
 Si vous observez attentivement, le design d'interaction de Matt montre les étiquettes de champs de formulaire non seulement apparaissant et disparaissant, mais également avec un léger mouvement de haut en bas. Comme nos éléments d’étiquette sont positionnés de manière absolue, lorsque nous ajoutons une classe qui modifie son positionnement en haut (ou à gauche, à droite ou en bas), le navigateur peut effectuer la transition de cet effet. Tout ce que nous avons à faire est d’ajouter une propriété de transition à l’étiquette elle-même..
 Revenons à notre étiquette élément dans le CSS et ajouter une propriété de transition pour le Haut et opacité Propriétés:
  label -webkit-transition: .333s au sommet, .333s au au moins opacité; transition: .333 soulage en haut, .333 assouplit l'opacité; 
 Cela permet aux étiquettes non seulement d'apparaître et de disparaître en douceur, mais également de faire des sautillements lorsqu'elles deviennent complètement opaques ou transparentes, comme ceci:
  
 Vous devriez maintenant avoir quelque chose comme ça quand vous chargez la page (dans un navigateur moderne bien sûr).
  
 
 Supprimer la couleur de surbrillance
 Comme mentionné précédemment, nous ajoutons et supprimons des classes du 
 éléments et en ciblant tous les enfants qui ont besoin de style. À ce stade (au chargement de la page), nous avons ajouté une classe de js-hide-label qui cache toutes les étiquettes dans le formulaire. Nous avons maintenant besoin d’une classe supplémentaire pour supprimer la couleur de surbrillance du  éléments:
  .étiquette js-unhighlight-label color: # 999
 
 Ajout d'auditeurs d'événement
 Nous avons maintenant un formulaire qui est progressivement amélioré et prêt pour certaines interactions JavaScript (dans les navigateurs modernes) lorsque l'utilisateur commence à interagir avec le formulaire..
 À l'intérieur de l'espace réservé si déclaration que nous avons écrite ci-dessus, commençons à ajouter et à supprimer notre js- cours au bon moment. Tout d’abord, nous allons sélectionner nos éléments de formulaire et ajouter un écouteur d’événement sur la page. brouiller, concentrer, et keyup événements (nous utilisons keyup plutôt que touche Bas ou appuyez sur la touche comme ces événements vont se déclencher prématurément):
  $ ('.form li'). find ('input, textarea'). on ('keyup blur focus', function (e) // Cache nos sélecteurs var $ this = $ (this), $ parent = $ this .parent (); // Ajouter ou supprimer des classes if (e.type == 'keyup') // code keyup ici else if (e.type == 'blur') // code flou ici else if (type == 'focus') // code de focus ici);
 Voici une brève explication de ce que nous faisons ici:
  Nous sélectionnons tous les éléments de la liste qui font partie de notre formulaire. $ ('. forme li'). Ensuite, dans cette sélection, nous trouvons tous  et </code> des champs <code>.find ('input, textarea')</code>. Cela garantit que la dernière entrée de notre marquage (le bouton d'envoi) n'est pas incluse dans notre sélection..</li> <li>Nous avons mis en cache les sélecteurs que nous prévoyons d’utiliser. C'est une bonne pratique de performance. De plus, préfixer le nom de la variable avec '$' nous permet de savoir que cette variable spécifique est un objet jQuery.</li> <li>Nous avons combiné le <code>brouiller</code>, <code>concentrer</code>, et <code>keyup</code> événements et simplement vérifier le type d'événement en utilisant <code>e.type</code> pour déterminer quelles classes nous ajouterons ou supprimerons à des moments spécifiques.</li> </ul> <h3>Codage sur <code>keyup</code> </h3> <p>Selon les règles d'interaction énoncées au début, qui correspondent à la conception de Matt, lorsqu'un utilisateur commence à saisir du texte (<strong>ne pas</strong> quand ils se concentrent sur le terrain) nous voulons montrer l'étiquette.</p> <p>Donc, en utilisant le <code>keyup</code> événement, chaque fois que l'utilisateur entre un caractère, nous pouvons vérifier si le champ de saisie est vide (ce code va à l'intérieur <code>if (e.type == 'keyup')</code>:</p> <pre> if ($ this.val () == ") $ parent.addClass ('js-hide-label'); autre $ parent.removeClass ('js-hide-label');</pre> <p>Notez que notre logique fonctionne comme ceci:</p> <ul> <li>Si la valeur de l'entrée <strong>est vide</strong>, cache l'étiquette en ajoutant la classe 'js-hide-label'.</li> <li>Sinon (la valeur de l'entrée <strong>n'est pas vide</strong>), montre l'étiquette en supprimant la classe 'js-hide-label'.</li> </ul> <p>Vous devriez maintenant avoir quelque chose qui fonctionne comme ceci lorsque vous entrez ou supprimez du texte dans un champ de saisie:</p>  <img src="//accentsconagua.com/img/images_16/implementing-the-float-label-form-pattern_2.gif"><br> <h3>Codage sur <code>brouiller</code> </h3> <p>Maintenant, selon nos règles d’interaction (encore une fois), nous savons que lorsqu'un utilisateur déplace le focus d’un champ de saisie à un autre (<code>brouiller</code> événement), nous devrions minimiser la couleur de la <code><label></code> élément selon que l'utilisateur a réellement entré quoi que ce soit dans le champ.</p> <p>À l'intérieur de <code>else if (type == 'flou')</code>, nous allons ajouter le code suivant:</p> <pre> if ($ this.val () == ") $ parent.addClass ('js-hide-label'); autre $ parent.removeClass ('js-hide-label'). addClass ('js-unhighlight -label ');</pre> <p>Notez que notre logique fonctionne comme ceci:</p> <ul> <li>Si la valeur de l'entrée <strong>était vide</strong> lorsque l'utilisateur supprime le focus, masquez l'étiquette en appliquant le <code>js-hide-label</code> classe.</li> <li>Sinon (la valeur de l'entrée <strong>n'était pas vide</strong> lorsque l'utilisateur supprime le focus) montre l'étiquette en supprimant la classe <code>js-hide-label</code> et atténuer la couleur de l'étiquette en ajoutant la classe 'js-unhighlight-label'.</li> </ul> <p>Vous devriez maintenant avoir quelque chose qui atténue la couleur de l'étiquette quand vous supprimez le focus, comme ceci:</p>  <img src="//accentsconagua.com/img/images_16/implementing-the-float-label-form-pattern_3.gif"><br> <h3>Codage sur <code>concentrer</code> </h3> <p>Enfin, nous devons ajouter un peu de logique lorsque l’utilisateur se concentre sur une entrée. Suivant nos règles d’interaction, utilisons le code JavaScript suivant à l’intérieur du <code>else if (type == 'focus')</code> section:</p> <pre> if ($ this.val ()! == ") $ parent.removeClass ('js-unhighlight-label');</pre> <p>Notre logique fonctionne comme ceci:</p> <ul> <li>Si la valeur de l'entrée <strong>n'est pas vide</strong>, supprime la classe 'js-unhighlight-label' du parent.</li> </ul> <p>Désormais, lorsqu'un utilisateur se concentre sur un champ de formulaire, s'il n'est pas vide, l'étiquette est mise en évidence avec la couleur de surbrillance, comme suit:</p>  <img src="//accentsconagua.com/img/images_16/implementing-the-float-label-form-pattern_4.gif"><br> <hr> <h2>Points bonus</h2> <p>Nous pourrions faire beaucoup plus avec ce formulaire, notamment en ajoutant une validation côté client et côté serveur. Nous pourrions également créer quelques classes supplémentaires pour le style des valeurs de champ valides et non valides. Par exemple, nous pourrions ajouter des styles à une classe de 'js-error' qui irait au parent <code><li></code> élément lorsque la valeur de l'entrée est invalide, comme ceci:</p> <pre> .js-error border-color: # f13b3b! important; / * remplace tous les cas * / .js-error + li border-top-color: # f13b3b;  .js-error label color: # f13b3b; </pre> <p>Ces types de styles de validation pourraient rendre notre formulaire plus ressemblant à ceci:</p>  <img src="//accentsconagua.com/img/images_16/implementing-the-float-label-form-pattern_10.png"><br> <p>Cependant, ce didacticiel visait à montrer comment créer une forme accessible et progressivement améliorée imitant le design de Matt. Et je dois dire que je pense que nous avons très bien réussi.</p> <p>N'hésitez pas à copier, modifier ou améliorer ce formulaire de la manière que vous jugerez utile dans vos propres projets.!</p> <hr> <h2>Liens utiles</h2> <ul> <li>http://floatlabel.com</li> <li> @floatlabel sur Twitter; exemples à l'état sauvage</li> <li>Réflexions de Brad Frost sur le modèle d'étiquette Float </li> </ul>


<div class="rek-block">
	<center>	
			<ins class="adsbygoogle"
			style="display:inline-block;width:580px;height:400px"
			data-ad-client="ca-pub-3810161443300697"
			data-ad-slot="9434875811"></ins>
	   <script>
	   (adsbygoogle = window.adsbygoogle || []).push({});
	   </script>
	</center>
</div>


<div class="h-alltags">
<a href="articles/webdesign">Création de sites web</a>
</div>

		</div>

</div>
</div>




</div>


<div class="next_posts clearfix">
	<div class="n_post">
        
		<div class="next_posts-h1 left_nh1"><a href="/articles/code/import-and-archive-your-tweets-with-wordpress.html">Importez et archivez vos tweets avec WordPress</a></div>
			
			<div class="next_posts-img" style="background-image: url('//accentsconagua.com/img/images_12/import-and-archive-your-tweets-with-wordpress_15.jpg');"></div>	
			
        				
	</div>		
	<div class="n_post">
        
		<div class="next_posts-h1 right_nh1"><a href="/articles/code/implementing-the-eu-cookie-law-into-your-wordpress-site.html">Mise en œuvre de la loi européenne sur les cookies dans votre site WordPress</a></div>
			
			<div class="next_posts-img" style="background-image: url('//accentsconagua.com/img/images_13/implementing-the-eu-cookie-law-into-your-wordpress-site_4.jpg');"></div>
					
        
	</div>
</div>


<footer>
	<div class="container">
			<div class="footer-langs">
					<ul class="site-langs-list">
							<li><a href="https://www.accentsconagua.com"><i class="flag flag-DE"></i>Deutsch</a></li>					
							<li><a href="https://fr.accentsconagua.com"><i class="flag flag-FR"></i>Français</a></li>
							<li><a href="https://nl.accentsconagua.com"><i class="flag flag-NL"></i>Nederlands</a></li>
							<li><a href="https://no.accentsconagua.com"><i class="flag flag-NO"></i>Norsk</a></li>
							<li><a href="https://sv.accentsconagua.com"><i class="flag flag-SE"></i>Svenska</a></li>
							<li><a href="https://it.accentsconagua.com"><i class="flag flag-IT"></i>Italiano</a></li>
							<li><a href="https://es.accentsconagua.com"><i class="flag flag-ES"></i>Español</a></li>
							<li><a href="https://ro.accentsconagua.com"><i class="flag flag-RO"></i>Românesc</a></li>
					</ul>
				</div>
				
			<div class="h-block"><a href="/">fr.accentsconagua.com</a><div class="h-block-a"></div></div>
			<div class="footer-text">
				Informations intéressantes et conseils utiles sur la programmation. Développement de sites Web, conception de sites Web et développement Web. Tutoriels Photoshop. Création de jeux informatiques et d'applications mobiles. Devenez un programmeur professionnel à partir de zéro.
			</div>
	</div>
</footer>

<div class="search">
	<img class="searchico" src="//accentsconagua.com/img/search.svg" alt="">
</div>
	<div class="modal">
			<div class="modal-content">
							<span class="close-button">×</span>

							<input class="searchmain" type="text" id="search-input" placeholder="Chercher...">
							<ul class="searchli" id="results-container"></ul>

						</div>
</div>


<link rel="stylesheet" href="css/flags.css">

<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.css" />
<script src="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.js"></script>
<script>
window.addEventListener("load", function(){
window.cookieconsent.initialise({
"palette": {
  "popup": {
	"background": "#edeff5",
	"text": "#838391"
  },
  "button": {
	"background": "#4b81e8"
  }
},
"theme": "classic",
"position": "bottom-right"
})});
</script>


	<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
	<script src="js/scripts.min.js"></script>	
	<script src="js/common.js"></script>
	<link rel="stylesheet" href="css/fontawesome-all.min.css">

	<script>
			var modal = document.querySelector(".modal");
			var trigger = document.querySelector(".search");
			var closeButton = document.querySelector(".close-button");

			function toggleModal() {
						modal.classList.toggle("show-modal");
			}

			function windowOnClick(event) {
						if (event.target === modal) {
										toggleModal();
						}
			}

			trigger.addEventListener("click", toggleModal);
			closeButton.addEventListener("click", toggleModal);
			window.addEventListener("click", windowOnClick);
</script>



    <script src="https://unpkg.com/simple-jekyll-search@1.5.0/dest/simple-jekyll-search.min.js"></script>

<script>
        SimpleJekyllSearch({
          searchInput: document.getElementById('search-input'),
          resultsContainer: document.getElementById('results-container'),
          json: '/search.json',
          searchResultTemplate: '<li><a href="{url}">{title}</a></li>'
        })
</script>

<script src="jquery.unveil2.min.js"></script>
<script>
	$('img').unveil();
</script>

</body>
</html>