• Accueil
  • Info
  • Publicité
  • Privacy & Policy
  • Nous Contacter
No Result
View All Result
Technique de pointe
  • Actualité
  • Technologies
  • Jeu vidéo
  • Mobile
  • Astuces
  • HTML5 / CSS
  • Java Script
  • PHP
  • Article Sponsorisé
  • Astuces
  • Jeu vidéo
  • Nous Contacter
MYCAMER
  • Actualité
  • Mobile
  • Jeu vidéo
    10 tropes de jeux vidéo qui n’ont aucun sens

    10 tropes de jeux vidéo qui n’ont aucun sens

    Dead Space Remake – Dans le vide (Chapitre 7)

    Dead Space Remake – Dans le vide (Chapitre 7)

    Sony brevète un « coach d’inventaire de jeux vidéo » pour aider les joueurs indécis dans la gestion des stocks

    Sony brevète un « coach d’inventaire de jeux vidéo » pour aider les joueurs indécis dans la gestion des stocks

    10 boss de jeux vidéo les plus hilarants involontairement

    10 boss de jeux vidéo les plus hilarants involontairement

    Tout ce que nous avons vu au Xbox Developer Direct d’aujourd’hui

    Tout ce que nous avons vu au Xbox Developer Direct d’aujourd’hui

    Le Xbox Game Pass a atteint de nouveaux sommets d’abonnés lors du deuxième trimestre 2023 de Microsoft (MSFT)

    Le Xbox Game Pass a atteint de nouveaux sommets d’abonnés lors du deuxième trimestre 2023 de Microsoft (MSFT)

    DANIEL MATTHEWS: Arsenal ‘Starboy’ Saka est l’assassin souriant, craignant Dieu et aimant les jeux vidéo

    The Last of Us Episode 2 est réalisé par le co-créateur du jeu vidéo

    The Last of Us Episode 2 est réalisé par le co-créateur du jeu vidéo

    Le créateur de personnage dans le jeu vidéo russe vous permet de choisir entre 3 types différents de gars blanc chauve grimaçant

    Le créateur de personnage dans le jeu vidéo russe vous permet de choisir entre 3 types différents de gars blanc chauve grimaçant

  • Developpement web
    • All
    • Java Script
    • Language HTML5
    Nouvelles FE |  Avez-vous les compétences que rechercheront les employeurs en 2023?

    Nouvelles FE | Avez-vous les compétences que rechercheront les employeurs en 2023?

    À la recherche d’un emploi en développement Web ?  Vérifiez la dernière date, le lien d’application, l’allocation ici

    À la recherche d’un emploi en développement Web ? Vérifiez la dernière date, le lien d’application, l’allocation ici

    À la recherche d’un emploi dans le développement Web ?  Voici une liste de stages auxquels postuler

    À la recherche d’un emploi dans le développement Web ? Voici une liste de stages auxquels postuler

    Le spécialiste du marketing numérique Farhadul Alam gère avec succès sa société d’hébergement de domaine à Dubaï, qui fournit aux clients des services d’hébergement abordables

    Trois seront honorés au ‘Sunshine Sunday’ au profit du camp de jour Sunrise Lucille et Jay Chazanoff du JCC

    Trois seront honorés au ‘Sunshine Sunday’ au profit du camp de jour Sunrise Lucille et Jay Chazanoff du JCC

    Nouveaux produits infosec de la semaine : 27 janvier 2023

    Nouveaux produits infosec de la semaine : 27 janvier 2023

    10 tendances de développement Web en 2023

    10 tendances de développement Web en 2023

    CCS HOOPS : Lady Mountaineers dépasse Covenant ;  Les alpinistes tombent |  Des sports

    CCS HOOPS : Lady Mountaineers dépasse Covenant ; Les alpinistes tombent | Des sports

    Job Vacancies For Today Wednesday 25th January 2023

    Job Vacancies For Today Wednesday 25th January 2023

  • Astuces
    Amorcer un document Quarto {ojs} avec un bloc-notes observable

    WordPress Password Protection – A Complete Guide

    La vulnérabilité du plugin anti-spam WordPress affecte jusqu’à 60 000 sites

    La vulnérabilité du plugin anti-spam WordPress affecte jusqu’à 60 000 sites

    Comment déployer facilement une application full-stack dans Portainer avec des templates

    Comment déployer facilement une application full-stack dans Portainer avec des templates

    Microsoft dévoile le nouveau plugin IndexNow pour les sites WordPress

    Comment créer un site Web WordPress

    Shopify chute légèrement alors que les pertes et les licenciements se profilent

    Shopify chute légèrement alors que les pertes et les licenciements se profilent

    WordPress atteint de multiples vulnérabilités dans les versions antérieures à 6.0.3

    WordPress atteint de multiples vulnérabilités dans les versions antérieures à 6.0.3

    Exam Cram est de retour à la bibliothèque publique de Burlington « Burlington Gazette

    Exam Cram est de retour à la bibliothèque publique de Burlington « Burlington Gazette

    Comment créer un thème enfant et un thème de bloc

    Comment créer un thème enfant et un thème de bloc

    Hébergement web vs hébergement WordPress : quelle est la différence ?

    Hébergement web vs hébergement WordPress : quelle est la différence ?

  • Nous contacter
No Result
View All Result
MYCAMER
No Result
View All Result
ADVERTISEMENT
Home Actualité

Créer un formulaire de validation CAPTCHA en utilisant HTML, CSS et JavaScript

Caleb by Caleb
avril 25, 2021
in Actualité
0
0
Créer un formulaire de validation CAPTCHA en utilisant HTML, CSS et JavaScript
351
SHARES
2.1k
VIEWS
Share on FacebookShare on TwitterRedditLinkedinWhatsappTelegram
Obtenez des bénéfices toutes les 10 minutes!


De nos jours, les CAPTCHA font partie intégrante de la sécurité des sites Web. Des millions de tests CAPTCHA sont effectués en ligne chaque jour.

Si vous n’avez pas implémenté la validation CAPTCHA sur votre site Web, cela pourrait créer un gros problème pour vous, vous définissant en tant que cible des spammeurs.

Voici tout ce que vous devez savoir sur les CAPTCHA et comment vous pouvez facilement les implémenter sur votre site Web en utilisant HTML, CSS et JavaScript.

Qu’est-ce que CAPTCHA?

CAPTCHA signifie «test de Turing public complètement automatisé pour distinguer les ordinateurs et les humains». Ce terme a été inventé en 2003 par Luis von Ahn, Manuel Blum, Nicholas J. Hopper et John Langford. C’est un type de test défi-réponse qui est utilisé pour déterminer si l’utilisateur est humain ou non.

Les CAPTCHA renforcent la sécurité des sites Web en offrant des défis difficiles à réaliser pour les robots, mais relativement faciles pour les humains. Par exemple, identifier toutes les images d’une voiture à partir d’un ensemble d’images multiples est difficile pour les robots mais assez simple pour les yeux humains.

L’idée de CAPTCHA provient du test de Turing. Un test de Turing est une méthode pour tester si une machine peut penser comme un humain ou non. Fait intéressant, un test CAPTCHA peut être appelé un «test de Turing inversé» car dans ce cas, l’ordinateur crée le test qui défie les humains.

Pourquoi votre site Web a-t-il besoin d’une validation CAPTCHA?

Les CAPTCHA sont principalement utilisés pour empêcher les robots de soumettre automatiquement des formulaires contenant du spam et d’autres contenus nuisibles. Même des entreprises comme Google l’utilisent pour empêcher leur système d’attaques de spam. Voici quelques-unes des raisons pour lesquelles votre site Web devrait bénéficier de la validation CAPTCHA:

  • Les CAPTCHA aident à empêcher les pirates et les robots de spammer les systèmes d’enregistrement en créant de faux comptes. S’ils ne sont pas empêchés, ils peuvent utiliser ces comptes à des fins néfastes.

  • Les CAPTCHA peuvent interdire les attaques de connexion par force brute à partir de votre site Web que les pirates utilisent pour essayer de se connecter à l’aide de milliers de mots de passe.

  • Les CAPTCHA peuvent empêcher les robots de spammer la section de révision en fournissant de faux commentaires.

  • Les CAPTCHA aident à prévenir l’inflation des billets, car certaines personnes achètent un grand nombre de billets pour les revendre. CAPTCHA peut même empêcher les fausses inscriptions à des événements gratuits.

  • Les CAPTCHA peuvent empêcher les cyber-escrocs de spammer les blogs avec des commentaires douteux et des liens vers des sites Web nuisibles.

Il existe de nombreuses autres raisons qui soutiennent l’intégration de la validation CAPTCHA dans votre site Web. Vous pouvez le faire avec le code suivant.

Code HTML CAPTCHA

HTML, ou HyperText Markup Language, décrit la structure d’une page Web. Utilisez le code HTML suivant pour structurer votre formulaire de validation CAPTCHA:

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="https://www.makeuseof.com/captcha-validation-html-css-javascript/styles.css">
</head>
<body>
<div class="center">
<h1 id="captchaHeading">Captcha Validator Using HTML, CSS and JavaScript</h1>
<div id="captchaBackground">
<span id="captcha">captcha text</span>
<input id="textBox" type="text" name="text">
<div id="buttons">
<input id="submitButton" type="submit">
<button id="refreshButton" type="submit">Refresh</button>
</div>
<span id="output"></span>
</div>
</div>
<script src="https://www.makeuseof.com/captcha-validation-html-css-javascript/script.js"></script>
</body>
</html>

Ce code se compose principalement de 7 éléments:

  • : Cet élément permet d’afficher l’en-tête du formulaire CAPTCHA.

  • : Cet élément est utilisé pour afficher le texte CAPTCHA.
  • – Cet élément est utilisé pour créer une zone de saisie pour saisir le CAPTCHA.
  • : Ce bouton soumet le formulaire et vérifie si le CAPTCHA et le texte tapé sont identiques ou non.
  • : Ce bouton permet d’actualiser le CAPTCHA.
  • : Cet élément permet d’afficher la sortie en fonction du texte saisi.
  • : Il s’agit de l’élément parent qui contient tous les autres éléments.

Les fichiers CSS et JavaScript sont liés à cette page HTML via le et éléments respectivement. Vous devez ajouter le relier étiquette à l’intérieur du diriger tag et scénario balise à la fin du corps.

Vous pouvez également intégrer ce code aux formulaires existants de votre site Web.

En rapport: Aide-mémoire HTML Essentials: balises, attributs, etc.

Code CSS CAPTCHA

CSS, ou feuilles de style en cascade, est utilisé pour styliser les éléments HTML. Utilisez le code CSS suivant pour styliser les éléments HTML ci-dessus:

@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
body {
background-color: #232331;
font-family: 'Roboto', sans-serif;
}
#captchaBackground {
height: 200px;
width: 250px;
background-color: #2d3748;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
#captchaHeading {
color: white;
}
#captcha {
margin-bottom: 1em;
font-size: 30px;
letter-spacing: 3px;
color: #08e5ff;
}
.center {
display: flex;
flex-direction: column;
align-items: center;
}
#submitButton {
margin-top: 2em;
margin-bottom: 2em;
background-color: #08e5ff;
border: 0px;
font-weight: bold;
}
#refreshButton {
background-color: #08e5ff;
border: 0px;
font-weight: bold;
}
#textBox {
height: 25px;
}
.incorrectCaptcha {
color: #FF0000;
}
.correctCaptcha {
color: #7FFF00;
}

Ajoutez ou supprimez des propriétés CSS de ce code selon vos préférences. Vous pouvez également donner un aspect élégant au conteneur de formulaire en utilisant le Propriété CSS box-shadow.

Code CAPTCHA JavaScript

JavaScript est utilisé pour ajouter des fonctionnalités à une page Web autrement statique. Utilisez le code suivant pour ajouter des fonctionnalités complètes au formulaire de validation CAPTCHA:

// document.querySelector() is used to select an element from the document using its ID
let captchaText = document.querySelector('#captcha');
let userText = document.querySelector('#textBox');
let submitButton = document.querySelector('#submitButton');
let output = document.querySelector('#output');
let refreshButton = document.querySelector('#refreshButton');

// alphaNums contains the characters with which you want to create the CAPTCHA
let alphaNums = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z', 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z', '0', '1', '2', '3', '4', '5', '6', '7', '8', '9'];
let emptyArr = [];
// This loop generates a random string of 7 characters using alphaNums
// Further this string is displayed as a CAPTCHA
for (let i = 1; i <= 7; i++) {
emptyArr.push(alphaNums[Math.floor(Math.random() * alphaNums.length)]);
}
captchaText.innerHTML = emptyArr.join('');

// This event listener is stimulated whenever the user press the "Enter" button
// "Correct!" or "Incorrect, please try again" message is
// displayed after validating the input text with CAPTCHA
userText.addEventListener('keyup', function(e) {
// Key Code Value of "Enter" Button is 13
if (e.keyCode === 13) {
if (userText.value === captchaText.innerHTML) {
output.classList.add("correctCaptcha");
output.innerHTML = "Correct!";
} else {
output.classList.add("incorrectCaptcha");
output.innerHTML = "Incorrect, please try again";
}
}
});
// This event listener is stimulated whenever the user clicks the "Submit" button
// "Correct!" or "Incorrect, please try again" message is
// displayed after validating the input text with CAPTCHA
submitButton.addEventListener('click', function() {
if (userText.value === captchaText.innerHTML) {
output.classList.add("correctCaptcha");
output.innerHTML = "Correct!";
} else {
output.classList.add("incorrectCaptcha");
output.innerHTML = "Incorrect, please try again";
}
});
// This event listener is stimulated whenever the user press the "Refresh" button
// A new random CAPTCHA is generated and displayed after the user clicks the "Refresh" button
refreshButton.addEventListener('click', function() {
userText.value = "";
let refreshArr = [];
for (let j = 1; j <= 7; j++) {
refreshArr.push(alphaNums[Math.floor(Math.random() * alphaNums.length)]);
}
captchaText.innerHTML = refreshArr.join('');
output.innerHTML = "";
});

Vous disposez maintenant d’un formulaire de validation CAPTCHA entièrement fonctionnel! Si vous souhaitez consulter le code complet, vous pouvez cloner le Dépôt GitHub de ce projet CAPTCHA-Validator. Après avoir cloné le référentiel, exécutez le fichier HTML et vous obtiendrez la sortie suivante:

Formulaire de validation CAPTCHA

Lorsque vous entrez le bon code CAPTCHA dans la zone de saisie, la sortie suivante s’affiche:

Formulaire de validation CAPTCHA correct CAPTCHA

Lorsque vous entrez un code CAPTCHA incorrect dans la zone de saisie, la sortie suivante s’affiche:

Formulaire de validation CAPTCHA CAPTCHA incorrect

Sécurisez votre site Web avec les CAPTCHA

Dans le passé, de nombreuses organisations et entreprises ont subi de lourdes pertes telles que des violations de données, des attaques de spam, etc. en raison de l’absence de formulaires CAPTCHA sur leurs sites Web. Il est fortement recommandé d’ajouter CAPTCHA à votre site Web, car il ajoute une couche de sécurité pour empêcher le site Web des cybercriminels.

Google a également lancé un service gratuit appelé “reCAPTCHA” qui aide à protéger les sites Web contre le spam et les abus. CAPTCHA et reCAPTCHA semblent similaires, mais ce n’est pas tout à fait la même chose. Parfois, les CAPTCHA sont frustrants et difficiles à comprendre pour de nombreux utilisateurs. Cependant, il y a une raison importante pour laquelle ils sont rendus difficiles.


whats-captcha
Comment fonctionnent les CAPTCHA et pourquoi sont-ils si difficiles?

Les CAPTCHA et reCAPTCHA empêchent le spam. Comment travaillent-ils? Et pourquoi trouvez-vous les CAPTCHA si difficiles à résoudre?

Lire la suite


A propos de l’auteur

Yuvraj Chandra
(10 articles publiés)

Yuvraj est un étudiant de premier cycle en informatique à l’Université de Delhi, en Inde. Il est passionné par le développement Web Full Stack. Quand il n’écrit pas, il explore la profondeur des différentes technologies.

Plus de Yuvraj Chandra

Abonnez-vous à notre newsletter

Rejoignez notre newsletter pour des conseils techniques, des critiques, des ebooks gratuits et des offres exclusives!

Un pas de plus…!

Veuillez confirmer votre adresse e-mail dans l’e-mail que nous venons de vous envoyer.

.



— to www.makeuseof.com

Get real time update about this post categories directly on your device, subscribe now.

Unsubscribe
Obtenez des bénéfices toutes les 10 minutes!
Caleb

Caleb

Stay Connected

  • 87k Followers
  • 172k Subscribers

Articles populaires

  • 10 problèmes courants de l’iPhone 13 et comment les résoudre

    10 problèmes courants de l’iPhone 13 et comment les résoudre

    5574 shares
    Share 2230 Tweet 1394
  • Comment installer phpMyAdmin sur Debian 11 Bullseye (Apache)

    1679 shares
    Share 672 Tweet 420
  • Comment réparer le décalage d’Instagram sur iPhone et Android

    703 shares
    Share 281 Tweet 176
  • Avantages et inconvénients des concepteurs et créateurs de jeux vidéo

    656 shares
    Share 262 Tweet 164
  • Étapes pour installer MySQL sur Ubuntu 22.04 LTS Jammy Linux

    503 shares
    Share 201 Tweet 126

Follow Our Page

Follow Us

    Go to the Customizer > JNews : Social, Like & View > Instagram Feed Setting, to connect your Instagram account.
Facebook Twitter Youtube Vimeo Instagram

Informer et distraire les internautes en toute indépendance avec un grand souci de la qualité et de contenu.

Category

  • Actualité
  • Article Sponsorisé
  • Astuces
  • Developpement web
  • Featured
  • Java Script
  • Jeu vidéo
  • Language HTML5
  • Mobile
  • portrait
  • Technologies
  • Uncategorized

Recent News

Royal Mail en panne : des centaines de clients frustrés signalent des problèmes “ennuyeux” avec le site Web

Royal Mail en panne : des centaines de clients frustrés signalent des problèmes “ennuyeux” avec le site Web

janvier 30, 2023
Nouvelles FE |  Avez-vous les compétences que rechercheront les employeurs en 2023?

Nouvelles FE | Avez-vous les compétences que rechercheront les employeurs en 2023?

janvier 30, 2023

© 2023 JNews - Premium WordPress news & magazine theme by Jegtheme.

No Result
View All Result
  • Actualité
  • Mobile
  • Jeu vidéo
  • Developpement web
  • Astuces
  • Nous contacter

© 2023 JNews - Premium WordPress news & magazine theme by Jegtheme.

Welcome Back!

Sign In with Facebook
Sign In with Google
Sign In with Linked In
OR

Login to your account below

Forgotten Password?

Retrieve your password

Please enter your username or email address to reset your password.

Log In
fr French
ar Arabiczh-CN Chinese (Simplified)en Englishfr Frenchde Germanit Italianru Russianes Spanish

Add New Playlist

This website uses cookies. By continuing to use this website you are giving consent to cookies being used. Visit our Privacy and Cookie Policy.