使用html5+javascript制作学生档案表单实例

代码:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>heartmv.com</title>
	
	<style>
		*{margin:0; padding:0;}
		#form1>fieldset{
			width:800px;
			margin:15px auto;
			padding:15px;
		}
		#form1 fieldset>input,#form1 select{
			width:100%;
			margin:10px 0;
			height:40px;
			line-height:40px;
			font-size:16px;
			padding-left:5px;
			box-sizing: border-box;
			border-radius: 5px;
			border:none;
			border:1px solid #ccc;
		}
		#form1 div{
			border: 1px solid #ccc;
			border-radius: 5px;
			height: 40px;
			line-height: 40px;
			margin: 10px 0;
			padding-left: 5px;
		}
	</style>
</head>

<body>
	<form action="#" id="form1" method="get">
		<fieldset>
			<legend>学生档案</legend>
			<label for="xingming">姓名:</label>
			<input type="text" name="xingming" id="xingming" required>
			
			<label for="">性别:</label>
			<div>
				<label><input type="radio" name="xingbie" value="nan" checked> 男</label>    
				<label><input type="radio" name="xingbie" value="nv"> 女</label>    
				<label><input type="radio" name="xingbie" value="all"> 不男不女</label>
			</div>
			
			<label for="minzu">民族:</label>
			<input type="text" name="minzu" id="minzu" placeholder="请输入你的所属民族。如:汉族">
			
			<label for="shouji">手机号码:</label>
			<input type="tel" name="shouji" id="shouji" pattern="^(\+86)?1\d{10}$" required>
			
			<label for="chengji">
				入学平均成绩:<meter min="0" max="100" value="0" id="zhi" low="60" high="89"></meter>
			</label>
			<input type="number" min="0" max="100" value="0" name="chengji" id="chengji">
			
			<label for="ruxue">入学日期:</label>
			<input type="date" name="ruxue" id="ruxue" required>
			
			<label for="zhuanye">所属专业:</label>
			<select name="zhuanye" id="zhuanye">
				<option value="web-ud">web前端</option>
				<option value="UI-sj">UI设计</option>
				<option value="dsj">大数据</option>
			</select>
			<input type="submit">
		</fieldset>
	</form>
	
	<script>
		document.getElementById("chengji").oninput=function(){
			document.getElementById("zhi").value=this.value;
		}
	</script>

</body>
</html>

浏览器效果图:

看完该文章有什么感受?

发表评论

电子邮件地址不会被公开。

标签:,
顶部