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