[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。