1.html5 web form用后台在写验证提交吗
html5 web form用后台在写验证提交吗
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML5表单验证</title>
<link rel="stylesheet" type="text/css" href="../css/style.css">
<link rel="stylesheet" type="text/css" href="../css/test.css">
<script type="text/javascript" src="../js/test.js"></script>
</head>
<body>
<div id="content">
<header>
<h2>HTML5 Web Form</h2>
</header>
<section>
<form method="post" action="" name="myform" class="form" >
<label for="user_name">真实姓名<br/></label>
<input id="user_name" type="text" name="user_name" required pattern="^([\u4e-\u9fa5]+|([a-z]+\s?桌球e桌亚洲精品源码在线)+)$" /><br/>
<label for="user_item">比赛项目<br/></label>
<input list="ball" id="user_item" type="text" name="user_item" required/><br/>
<datalist id="ball">
<option value="篮球"/>
<option value="羽毛球"/>
<option value="桌球"/>
</datalist>
<label for="user_email">电子邮箱<br/></label>
<input id="user_email" type="email" name="user_email" pattern="^[0-9a-z][a-z0-9\._-]{ 1,}@[a-z0-9-]{ 1,}[a-z0-9]\.[a-z\.]{ 1,}[a-z]$" required /><br/>
<label for="user_phone">手机号码<br/></label>
<input id="user_phone" type="telephone" name="user_phone" pattern="^1\d{ }$|^(0\d{ 2,3}-?|\(0\d{ 2,3}\))?[1-9]\d{ 4,7}(-\d{ 1,8})?$" required/><br/>
<label for="user_id">身份证号</label><br/>
<input id="user_id" type="text" name="user_id" required pattern="^[1-9]\d{ 5}[1-9]\d{ 3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{ 3}([0-9]|X)$" /><br/>
<label for="user_born">出生年月</label><br/>
<input id="user_born" type="month" name="user_born" required /></span><br/>
<label for="user_rank">名次期望</label>
<span>第<em id="ranknum">5</em>名</span><br/>
<input id="user_rank" type="range" name="user_rank" value="5" min="1" max="" step="1" required /><br/>
<button type="submit" name="submit" value="提交表单">提交表单</button>
</form>
</section>
<footer><em>Designed by Wang LeHui.</em></footer>
</div>
</body>
</html>#content{
margin:0 auto;
width:px;
}
.form{
padding: px;
border:1px solid #bbb;
-moz-border-shadow:0 0 px #bbb;
-webkit-border-shadow:0 0 px #bbb;
shadow:0 0 px #bbb;
}
label+span{
color: #FF;
}
.form input,button{
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
background-color: #fff;
border:1px solid #ccc;
font-size: px;
width: px;
min-height: px;
display: block;
margin-bottom: 5px;
margin-top: 5px;
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius: 5px;
-webkit-transition:all 0.5s ease-in-out;
-moz-transition:all 0.5s ease-in-out;
transition:all 0.5s ease-in-out;
}
.form input:focus,button:focus{
background-color: #fff;
-moz-border-shadow:0 0 px #ccc;
-webkit-border-shadow:0 0 px #ccc;
shadow:0 0 px #ccc;
-webkit-transform:scale(1.);
-moz-transform:scale(1.);
transform:scale(1.);
}
button[type=submit]{
background-color: #fff;
display: inline-block;
padding:5px px 6px px;
font-weight: bold;
border:1px solid #;
border-radius:5px;
-moz-border-radius:5px;
-moz-border-shadow:0 0 3px #;
-webkit_box_shadow:0 0 3px #;
box-shadow: 0 0 3px #;
opacity: 1.0;
}
button[type=submit]:hover{
background-color: #fff;
opacity: 1.0;
color:#;
cursor: hand;
cursor: pointer;
}