<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#box{border: aqua 5px solid;background-color: pink;width: 650px;margin:auto auto;}
.box1{margin-left: 30px;margin-bottom: 10px;}
.box2{margin-left: 100px;}
#box3{background-color: aliceblue;}
#box4{width: 100px;}
</style>
</head>
<body>
<div id=box>
<h1 align="center">员工信息登记表</h1>
<form action="">
<font family="宋体" size="3" face="blold" >
<div class="box1">用户登录名：<input type="text" value="[email protected]" id="box3"><br></div>
<div class="box1">真实姓名：<input type="text" value="王传智">(必填，只能输入汉字)<br></div>
<div class="box1">真实年龄：<input type="text" value="24">(必填)<br></div>
<div class="box1">出生日期：<input type="text" value="/年/月/日">(必填）<br></div>
<div class="box1">电子邮箱：<input type="text" value="[email protected]">(必填）<br></div>
<div class="box1">身份证号：<input type="text">(必填，能够以数字、字母结尾的短身份证号）<br></div>
<div class="box1">手机号码：<input type="text">(必填）<br></div>
<div class="box1">幸运颜色：<input type="color" id="onchange">(请选择你喜欢的颜色)<br></div>
<div class="box2"><input type="submit" value="提交"id="box4">
               
<input type="reset" id="box4"></div>
</font>
</form>
</div>
<script type="text/javascript">
document.getElementById('onchange').onchange = function(){
document.getElementById('onchange').click();
document.body.style.background = this.value;
};
</script>
</body>
</html>
这个代码是静态网页，涉及了JavaScript相关代码。利用的head里面style 代码修饰，其中input表单控件还利用JavaScript的颜色提取器。
