Buat Formulir Validasi CAPTCHA Menggunakan HTML, CSS, dan JavaScript

Saat ini CAPTCHA merupakan bagian integral dari keamanan situs web. Jutaan tes CAPTCHA diselesaikan secara online setiap hari.

Jika Anda belum menerapkan validasi CAPTCHA di situs web Anda, itu bisa membuat masalah besar bagi Anda, menjadikan Anda target spammer.

Inilah semua yang perlu Anda ketahui tentang CAPTCHA dan bagaimana Anda dapat dengan mudah menerapkannya di situs web Anda menggunakan HTML, CSS, dan JavaScript.

Apa itu CAPTCHA?

CAPTCHA adalah singkatan dari 'Tes Turing Publik Sepenuhnya Otomatis untuk Membedakan Komputer dan Manusia.' Istilah ini diciptakan pada tahun 2003 oleh Luis von Ahn, Manuel Blum, Nicholas J. Hopper, dan John Langford. Ini adalah jenis tes tantangan-respons yang digunakan untuk menentukan apakah pengguna adalah manusia atau bukan.

CAPTCHA menambahkan keamanan ke situs web dengan memberikan tantangan yang sulit dilakukan bot tetapi relatif mudah bagi manusia. Misalnya, mengidentifikasi semua gambar mobil dari kumpulan beberapa gambar sulit untuk bot tetapi cukup sederhana untuk mata manusia.

Ide CAPTCHA berasal dari Turing Test. Turing Test adalah metode untuk menguji apakah sebuah mesin dapat berpikir seperti manusia atau tidak. Menariknya, tes CAPTCHA bisa disebut 'Uji Turing terbalik' karena dalam hal ini, komputer membuat tes yang menantang manusia.

Mengapa Website Anda Membutuhkan Validasi CAPTCHA?

CAPTCHA terutama digunakan untuk mencegah bot mengirimkan formulir secara otomatis dengan spam dan konten berbahaya lainnya. Bahkan perusahaan seperti Google menggunakannya untuk mencegah sistem mereka dari serangan spam. Berikut adalah beberapa alasan mengapa situs web Anda mendapat manfaat dari validasi CAPTCHA:

CAPTCHA membantu mencegah peretas dan bot melakukan spam pada sistem pendaftaran dengan membuat akun palsu. Jika tidak dicegah, mereka dapat menggunakan akun tersebut untuk tujuan jahat.
CAPTCHA dapat melarang serangan masuk paksa dari situs web Anda yang digunakan peretas untuk mencoba masuk menggunakan ribuan kata sandi.
CAPTCHA dapat membatasi bot agar tidak mengirim spam ke bagian ulasan dengan memberikan komentar palsu.
CAPTCHA membantu mencegah inflasi tiket karena beberapa orang membeli sejumlah besar tiket untuk dijual kembali. CAPTCHA bahkan dapat mencegah pendaftaran palsu ke acara gratis.
CAPTCHA dapat membatasi penjahat dunia maya dari spamming blog dengan komentar cerdik dan tautan ke situs web berbahaya.

Ada banyak lagi alasan yang mendukung pengintegrasian validasi CAPTCHA ke dalam situs web Anda. Anda dapat melakukannya dengan kode berikut.

cara memainkan game lama di windows 10

Kode HTML CAPTCHA

HTML, atau HyperText Markup Language, menjelaskan struktur halaman web. Gunakan Kode HTML berikut untuk menyusun Formulir Validasi CAPTCHA Anda:

  
  
  
  
  
  
  
  
  
 captcha text  
  
  
  
 Refresh

Kode ini terutama terdiri dari 7 elemen:

: Elemen ini digunakan untuk menampilkan heading dari form CAPTCHA.
: Elemen ini digunakan untuk menampilkan teks CAPTCHA.
- Elemen ini digunakan untuk membuat kotak input untuk mengetik CAPTCHA.
: Tombol ini mengirimkan formulir dan memeriksa apakah CAPTCHA dan teks yang diketik sama atau tidak.
: Tombol ini digunakan untuk menyegarkan CAPTCHA.
: Elemen ini digunakan untuk menampilkan output sesuai dengan teks yang dimasukkan.
: Ini adalah elemen induk yang berisi semua elemen lainnya.

File CSS dan JavaScript ditautkan ke halaman HTML ini melalui dan elemen masing-masing. Anda harus menambahkan tautan tandai di dalam kepala tandai dan naskah tag di akhir tubuh .

Anda juga dapat mengintegrasikan kode ini dengan bentuk situs web Anda yang sudah ada.

Terkait: Lembar Cheat Esensial HTML: Tag, Atribut, dan Lainnya

Kode CAPTCHA CSS

CSS, atau Cascading Style Sheets, digunakan untuk menata elemen HTML. Gunakan kode CSS berikut untuk menata elemen HTML di atas:

@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');  
body {  
 background-color: #232331;  
 font-family: 'Roboto', sans-serif;  
}  
#captchaBackground {  
 height: 220px;  
 width: 250px;  
 background-color: #2d3748;  
 display: flex;  
 align-items: center;  
 justify-content: center;  
 flex-direction: column;  
}  
#captchaHeading {  
 color: white;  
}  
#captcha {  
 height: 80%;  
 width: 80%;  
 font-size: 30px;  
 letter-spacing: 3px;  
 margin: auto;  
 display: block;  
 top: 0;  
 bottom: 0;  
 left: 0;  
 right: 0;  
}  
.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;  
}

Tambahkan atau hapus properti CSS dari kode ini sesuai dengan preferensi Anda. Anda juga dapat memberikan tampilan yang elegan pada wadah formulir menggunakan Properti bayangan kotak CSS .

Kode JavaScript CAPTCHA

JavaScript digunakan untuk menambahkan fungsionalitas ke halaman web yang statis. Gunakan kode berikut untuk menambahkan fungsionalitas lengkap ke formulir validasi CAPTCHA:

// document.querySelector() is used to select an element from the document using its ID  
let captchaText = document.querySelector('#captcha');  
var ctx = captchaText.getContext('2d');  
ctx.font = '30px Roboto';  
ctx.fillStyle = '#08e5ff';  
  
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)]);  
}  
var c = emptyArr.join('');  
ctx.fillText(emptyArr.join(''),captchaText.width/4, captchaText.height/2);  
  
// 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 === c) {  
 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 === c) {  
 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)]);  
 }  
 ctx.clearRect(0, 0, captchaText.width, captchaText.height);  
 c = refreshArr.join('');  
 ctx.fillText(refreshArr.join(''),captchaText.width/4, captchaText.height/2);  
 output.innerHTML = '';  
});

Sekarang Anda memiliki formulir validasi CAPTCHA yang berfungsi penuh! Jika Anda ingin melihat kode lengkapnya, Anda dapat mengkloning Repositori GitHub dari Proyek CAPTCHA-Validator ini . Setelah mengkloning repositori, jalankan file HTML dan Anda akan mendapatkan output berikut:

cara melihat foto icloud di pc

Ketika Anda memasukkan kode CAPTCHA yang benar di kotak input, output berikut akan ditampilkan:

Ketika Anda memasukkan kode CAPTCHA yang salah di kotak input, output berikut akan ditampilkan:

Jadikan Situs Web Anda Aman Dengan CAPTCHA

Di masa lalu, banyak organisasi dan bisnis mengalami kerugian besar seperti pelanggaran data, serangan spam, dll. karena tidak memiliki formulir CAPTCHA di situs web mereka. Sangat disarankan untuk menambahkan CAPTCHA ke situs web Anda, karena menambahkan lapisan keamanan untuk mencegah situs web dari penjahat dunia maya.

Google juga meluncurkan layanan gratis yang disebut 'reCAPTCHA' yang membantu melindungi situs web dari spam dan penyalahgunaan. CAPTCHA dan reCAPTCHA tampak serupa, tetapi sebenarnya tidak sama. Terkadang CAPTCHA terasa membuat frustrasi dan sulit dipahami oleh banyak pengguna. Meskipun, ada alasan penting mengapa mereka dibuat sulit.

Membagikan Membagikan Menciak Surel Bagaimana CAPTCHA Bekerja dan Mengapa Mereka Begitu Sulit?

CAPTCHA dan reCAPTCHA mencegah spam. Bagaimana mereka bekerja? Dan mengapa Anda merasa CAPTCHA begitu sulit untuk dipecahkan?

Baca Selanjutnya Topik-topik yang berkaitan

Pemrograman
HTML
JavaScript
CSS

Tentang Penulis Yuvraj Chandra(60 Artikel Diterbitkan)

Yuvraj adalah mahasiswa sarjana Ilmu Komputer di University of Delhi, India. Dia bersemangat tentang Pengembangan Web Full Stack. Ketika dia tidak menulis, dia menjelajahi kedalaman teknologi yang berbeda.

Berlangganan newsletter kami

Bergabunglah dengan buletin kami untuk kiat teknologi, ulasan, ebook gratis, dan penawaran eksklusif!

Klik di sini untuk berlangganan