HTML登錄頁(yè)面的驗(yàn)證碼功能是保證用戶(hù)登錄安全性的重要功能。實(shí)現(xiàn)驗(yàn)證碼功能需要使用一些前端技術(shù)，例如JavaScript和CSS。在下面的代碼中，我們將展示如何在HTML登錄頁(yè)面中添加驗(yàn)證碼功能。

HTML代碼：
<label for="username">用戶(hù)名:</label>
<input type="text" id="username" name="username"><br>
<label for="password">密碼:</label>
<input type="password" id="password" name="password"><br>
<label for="captcha">驗(yàn)證碼:</label>
<input type="text" id="captcha" name="captcha">
<img src="captcha.jpg" alt="captcha">
<br>
<button type="submit">登錄</button>
CSS代碼：
img {
display: inline-block;
vertical-align: middle;
}
JavaScript代碼：
// 生成隨機(jī)驗(yàn)證碼
function generateCaptcha() {
var captcha = "";
var characters = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
for (var i = 0; i< 6; i++) {
captcha += characters.charAt(Math.floor(Math.random() * characters.length));
}
return captcha;
}
// 更新驗(yàn)證碼圖片和輸入框
function updateCaptcha() {
var captcha = generateCaptcha();
document.getElementById("captcha").value = "";
document.getElementsByTagName("img")[0].setAttribute("src", "captcha.jpg?rand=" + Math.random());
}
// 驗(yàn)證輸入的驗(yàn)證碼是否正確
function validateCaptcha() {
var inputCaptcha = document.getElementById("captcha").value;
if (inputCaptcha == sessionStorage.getItem("captcha")) {
return true;
} else {
alert("驗(yàn)證碼錯(cuò)誤！");
updateCaptcha();
return false;
}
}
// 頁(yè)面加載時(shí)生成一個(gè)驗(yàn)證碼，并存儲(chǔ)到sessionStorage中
window.onload = function() {
var captcha = generateCaptcha();
sessionStorage.setItem("captcha", captcha);
document.getElementsByTagName("img")[0].setAttribute("src", "captcha.jpg?rand=" + Math.random());
}
// 點(diǎn)擊驗(yàn)證碼圖片更新驗(yàn)證碼
document.getElementsByTagName("img")[0].onclick = updateCaptcha;
// 表單提交時(shí)驗(yàn)證輸入的驗(yàn)證碼
document.getElementsByTagName("form")[0].onsubmit = validateCaptcha;

以上代碼中，我們首先在HTML代碼中添加了一個(gè)驗(yàn)證碼輸入框和一個(gè)驗(yàn)證碼圖片。當(dāng)用戶(hù)點(diǎn)擊驗(yàn)證碼圖片時(shí)，JavaScript代碼中的updateCaptcha函數(shù)會(huì)被調(diào)用，生成一個(gè)新的隨機(jī)驗(yàn)證碼并更新驗(yàn)證碼圖片和輸入框。

當(dāng)用戶(hù)提交登錄表單時(shí)，JavaScript代碼中的validateCaptcha函數(shù)會(huì)被調(diào)用，驗(yàn)證輸入的驗(yàn)證碼是否與存儲(chǔ)在sessionStorage中的驗(yàn)證碼相匹配。如果驗(yàn)證碼正確，則表單會(huì)被提交。如果驗(yàn)證碼錯(cuò)誤，則彈出一個(gè)提示框，更新驗(yàn)證碼，并阻止表單提交。

使用以上代碼，我們可以很容易地在HTML登錄頁(yè)面中添加驗(yàn)證碼功能，提高用戶(hù)登錄的安全性。