HTML5網頁驗證碼源代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML5驗證碼示例</title>
<style>
/* 樣式表 */
#captcha {
width: 200px;
height: 50px;
font-size: 30px;
font-family: Arial, sans-serif;
text-align: center;
line-height: 50px;
background-color: #f5f5f5;
border: 2px solid #ddd;
}
</style>
<script>
// 生成驗證碼函數
function generateCaptcha() {
var captcha = '';
var possible = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
for (var i = 0; i < 6; i++) {
captcha += possible.charAt(Math.floor(Math.random() * possible.length));
}
document.getElementById('captcha').innerHTML = captcha;
}
</script>
</head>
<body onload="generateCaptcha()">
<div id="captcha" onclick="generateCaptcha()"></div>
</body>
</html>以上代碼是一個基本的HTML5驗證碼示例，使用了HTML、CSS和JavaScript技術實現，具體實現方法如下：
首先，HTML部分使用了DIV標簽來定義驗證碼的容器，并綁定了生成驗證碼的JavaScript函數，同時設置了一個默認的驗證碼。
其次，CSS部分定義了驗證碼容器的樣式，包括寬度、高度、字體大小、字體類型、文字對齊方式、行高、背景顏色和邊框樣式。
最后，JavaScript部分定義了一個生成驗證碼的函數，用于隨機生成一個由6個字母和數字組成的驗證碼，并將其插入到驗證碼容器中。
通過以上的代碼實現，我們可以輕松地在HTML5網頁上添加驗證碼功能，提升網頁的安全性。