html5表单后面的验证码怎么实现

如题所述

举报该文章

第1个回答 2016-08-23

img标签从后台获取随机的验证码图片本回答被网友采纳

第2个回答 2016-08-23

html：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0">
  <title>html5 表单验证</title>
</head>
<body>
<form action="#" id="formValid" class="myform" novalidate="novalidate" onsubmit="return checkForm()">
  <fieldset>
    <div class="form-group">
      <label for="name">名称</label>
      <div>
        <input type="text" class="form-control" id="name" name="name" required/>
        <span class="form-error">不能为空</span>
      </div>
    </div>
    <div class="form-group">
      <label for="email">邮箱</label>
      <div>
        <input type="email" class="form-control" id="email" name="email" required/>
        <span class="form-error">邮箱格式不正确</span>
      </div>
    </div>
    <div class="form-group">
      <label>省份</label>
      <select name="province" class="form-control">
        <option value="">请选择</option>
        <option value="s">四川</option>
        <option value="c">重庆</option>
      </select>
    </div>
    <input type="submit" class="btn" value="提交"/>
  </fieldset>
</form>
</body>
</html>

css:

fieldset{border: 0;}
.myform .form-control{
  display: block;
  padding: 5px;
  width: 100%
}
.myform input:focus:invalid + .form-error{
  display: inline;
}
.myform .form-error{
  display: none;
  position: absolute;
  margin-top: .7em;
  padding: 1px 2px;
  color: #fff;
  font-size: .875rem;
  background: #f40;
}
.myform .form-error:after{
  position: absolute;
  content: "";
  top: -.5em;
  left: .5em;
  z-index: 100;
  display: inline-block;
  width: 0;
  height: 0;
  vertical-align: middle;
  border-bottom: .5em solid #f40;
  border-right: .5em solid transparent;
  border-left: .5em solid transparent;
  border-top: 0 dotted;
  transform: rotate(360deg);
  overflow: hidden;
}
.btn{
  padding: 5px 20px;
}

js:

本回答被网友采纳

相似回答

大家正在搜