实例
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
<link rel="stylesheet" href="css/form.css"/>
<center>
<script>
var Tname="学生档案";
var Tlen=Tname.length;
document.write("<div id='a' style='font-size:40px;'>"+Tname+"</div>");
var col=new Array("#4FFFF","#3333FF","#FFCC00","chartreuse","#FFCC00","#CC33FF");
var ic=0;
function Dcolor(){
var Strname="";
for (i=0;i<Tlen;++i){
var Strname=Strname+"<font color="+col[ic]+">"+Tname.substring(i,i+1)+"</font>";
ic=ic+1;
if (ic==col.length) ic=0;
}
a.innerHTML=Strname;
setTimeout("Dcolor()",200);
}
Dcolor();
</script>
</center>
</head>
<body>
<form action="">
<fieldset>
<legend>学生档案</legend>
<label for="userName">姓名:</label>
<input type="text" name="userName" id="userName" placeholder="请输入用户名"><br/>
<label for="phont">手机号码:</label>
<input type="tel" name="userphont" id="userphont" required placeholder="请输入手机号" pattern="^1\d{10}$"><br/>
<label for="useremil">邮箱地址:</label>
<input type="email" name="useremil" id="useremil" required placeholder="请输入邮箱"><br/>
<label for="">所属学院</label>
<input type="text" name="coolen" id="coolen" list="clist" placeholder="请选择">
<datalist id="clist" >
<option value="* * 学 院"></option>
<option value="# # 学 院"></option>
<option value="@ @ 学 院"></option>
</datalist>
<label for="Content">入学成绩:</label>
<input type="number" max="100" min="0" value="0" id="Content">
<!-- 基础水平:<br/> -->
<!-- <progress max="" value=""></progress><br> -->
<label for="">基础水平:</label><br />
<meter id="level" max="100" min="0" low="59" high="90"></meter><br />
<label for="userdate">入学时间:</label>
<input type="date" name="时间" id="userdate"><br>
<label for="log">毕业时间:</label>
<input type="date" name="时间" id="log"><br>
<input type="submit" name="提交" id="cls"><br>
</fieldset>
</form>
<script>
document.getElementById("Content").oninput=function(){
document.getElementById("level").value=this.value;
}
document.getElementById("userphont").oninvalid=function(){
this.setCustomValidity("请输入合法的11位手机号");
}
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
