登录  /  注册
博主信息
博文 22
粉丝 0
评论 7
访问量 31420
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
简单表单案例
阿杰网络科技博客资源站
原创
901人浏览过

QQ浏览器截图20190320223216.png

实例

<!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>

运行实例 »

点击 "运行实例" 按钮查看在线实例


本博文版权归博主所有,转载请注明地址!如有侵权、违法,请联系admin@php.cn举报处理!
全部评论 文明上网理性发言,请遵守新闻评论服务协议
0条评论
作者最新博文
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • 登录PHP中文网,和优秀的人一起学习!
    全站2000+教程免费学