[TOC=2,5]
## captcha標簽
| 標簽名 | 作用 | 包含屬性 |
| --- | --- | --- |
| captcha | 生成前臺圖片驗證碼 | height,width,font-size,length,bg,id |
標簽屬性:
| 標簽屬性名 | 含義 |
| --- | --- |
| height |驗證碼高度,必須 |
| width |驗證碼寬度,必須 |
| font-size |驗證碼字體大小,默認25 |
| length |驗證碼長度,默認為 4,最小為3 |
| bg |驗證碼背景,默認為243,251,254,以英文逗號分開 |
| id |驗證碼 id,整數,最大5 ,如果設置后臺驗證時請傳入這個值 |
### 生成一個默認驗證碼
```
<captcha height="50" width="200"/>
```
### 生成一個黑色背景的驗證碼
```
<captcha height="50" width="200" bg="0,0,0"/>
```
### 更改驗證碼字體大小為20
```
<captcha height="50" width="200" font-size="20"/>
```
### 生成一個長度為5的驗證碼
```
<captcha height="50" width="200" length="5"/>
```
### 完全自定義
```
<captcha height="50" width="200" font-size="24" length="3" bg="0,0,0" id=2/>
```
## 帶驗證碼表單制作
```
<form class="js-ajax-form" action="你的提交地址" method="post">
<div class="form-group">
<input type="text" name="username" placeholder="手機號/郵箱/用戶名" class="form-control">
</div>
<div class="form-group">
<input type="password" name="password" placeholder="密碼" class="form-control valid"
aria-invalid="false">
</div>
<div class="form-group">
<div style="position: relative;">
<input type="text" name="captcha" placeholder="驗證碼" class="form-control captcha"
style="width: 170px;float: left;margin-right: 29px">
<captcha height="50" width="200" font-size="20"/>
</div>
</div>
<div class="form-group">
<button class="btn btn-primary btn-block js-ajax-submit" type="submit" style="margin-left: 0px">確定 </button>
</div>
</form>
```
運行結果圖

captcha標簽只負責生成驗證碼,在做表單時同時要給它增加一個input。