Captcha Generator using HTML CSS and JavaScript
A captcha is a way of identifying a user whether the user is human or not. Â A captcha is made up with the help of combining letters and digits. it ensures that the user who is trying to access the platform is a human. So without wasting the time let’s get started.
Prerequisites
Application of Captcha
- Form Authentication: For login and sign up it can be used to ensure that an end user is human.
- Preventing Fake Registrations: With the captcha, we can prevent bots from creating an account on a system. Â
- Preventing Fake comments:Â This way bot would not be able to Comment on a system,
- NetBanking and financial institutes: To ensure that Authentication is only done by humans and this way manipulation of transactions can be prevented.
Note: Captcha can protect From some Automated attacks as well.
Example: First, create a section for Captcha with HTML. The below code will generate a design for a captcha and from the CSS file we will add style and on the image(refresh) click, Â we will generate a new captcha by calling generate() method from JavaScript.
Javascript
let captcha;
function generate() {
document.getElementById( "submit" ).value = "" ;
captcha = document.getElementById( "image" );
let uniquechar = "" ;
const randomchar =
"ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789" ;
for (let i = 1; i < 5; i++) {
uniquechar += randomchar.charAt(
Math.random() * randomchar.length)
}
captcha.innerHTML = uniquechar;
}
function printmsg() {
const usr_input = document
.getElementById( "submit" ).value;
if (usr_input == captcha.innerHTML) {
let s = document.getElementById( "key" )
.innerHTML = "Matched" ;
generate();
}
else {
let s = document.getElementById( "key" )
.innerHTML = "not Matched" ;
generate();
}
}
|
HTML
<!DOCTYPE html>
< html lang = "en" >
< 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" >
< link rel = "stylesheet"
href = "captcha.css" >
< link rel = "stylesheet" href =
integrity =
"sha384-SZXxX4whJ79/gErwcOYf+zWLeJdY/qpuqC4cAa9rOGUstPomtqpuNWT9wdPEn2fk"
crossorigin = "anonymous" >
< script src = "captcha.js" ></ script >
</ head >
< body onload = "generate()" >
< div id = "user-input" class = "inline" >
< input type = "text"
id = "submit"
placeholder = "Captcha code" />
</ div >
< div class = "inline" onclick = "generate()" >
< i class = "fas fa-sync" ></ i >
</ div >
< div id = "image"
class = "inline"
selectable = "False" >
</ div >
< input type = "submit"
id = "btn"
onclick = "printmsg()" />
< p id = "key" ></ p >
</ body >
</ html >
|
CSS
#image{
margin-top : 10px ;
box-shadow: 5px 5px 5px 5px gray ;
width : 60px ;;
padding : 20px ;
font-weight : 400 ;
padding-bottom : 0px ;
height : 40px ;
user-select: none ;
text-decoration : line-through ;
font-style : italic ;
font-size : x-large ;
border : red 2px solid ;
margin-left : 10px ;
}
#user-input{
box-shadow: 5px 5px 5px 5px gray ;
width : auto ;
margin-right : 10px ;
padding : 10px ;
padding-bottom : 0px ;
height : 40px ;
border : red 0px solid ;
}
input{
border : 1px black solid ;
}
. inline {
display :inline- block ;
}
#btn{
box-shadow: 5px 5px 5px grey;
color : aqua ;
margin : 10px ;
background-color : brown;
}
|
Output:
Captcha Generator with SImple HTML,CSS and JS
Last Updated :
20 Dec, 2023
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...