CSS表單驗證碼是一種非常常用的驗證手段，可以在用戶填寫表單的時候驗證用戶的身份。下面我們來講解一下如何使用CSS表單驗證碼。

<form>
<label>用戶名:</label>
<input type="text" name="username">
<br>
<label>密碼:</label>
<input type="password" name="password">
<br>
<label>驗證碼:</label>
<input type="text" name="yzm">
<div class="yzm">
<span>V</span>
<span>P</span>
<span>M</span>
<span>R</span>
<span>H</span>
<span>E</span>
</div>
<input type="submit" value="提交">
</form>

如上所示，我們建立了一個基礎的表單，包含了一個文本框、一個密碼框和一個驗證碼框，以及一個提交按鈕。驗證碼框是一個div元素，包含了6個span元素，并且添加了一個class為yzm。

.yzm {
border: 1px solid #ccc;
width: 100px;
height: 30px;
display: inline-block;
margin-left: 10px;
cursor: pointer;
}
.yzm span {
display: inline-block;
margin: 0 5px;
font-size: 20px;
}

接著，在CSS中，我們設置了驗證碼框的樣式，包括寬度、高度、邊框以及一些其他屬性。我們還給每個span元素設置了樣式，讓它們可以水平排列，并且設置了一些間距，增加了觀感。

最后，我們使用JavaScript為每個span元素添加了一個點擊事件。當用戶點擊某個span元素時，它的文本內容會被添加到驗證碼框中。

let yzm = document.querySelector('.yzm');
let input = document.querySelector('[name="yzm"]');
yzm.addEventListener('click', function(e) {
if(e.target.tagName.toLowerCase() === 'span') {
input.value += e.target.innerHTML;
}
});

如上所示，我們使用了addEventListener方法，監聽了div.yzm的點擊事件。在點擊事件的回調函數中，判斷了點擊的元素的tagName，只有當點擊的元素是span時才添加它的文本內容到驗證碼框。

這樣就完成了一個基礎的CSS表單驗證碼。當用戶在表單中填寫完必填項并且在驗證碼框中輸入了正確的驗證碼時，表單才會被提交。