实验一：员工信息登陆表

最新推荐文章于 2023-03-05 22:22:14 发布

Shmily_ox

最新推荐文章于 2023-03-05 22:22:14 发布

阅读量541

点赞数

本文链接：https://blog.csdn.net/Shmily_ox/article/details/105417661

版权

实验一：员工信息登陆表

方法一：使用网页设计

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>员工信息表</title>
</head>
<style type="text/css">
    .box{
        width:800px;height:448px;border:3px solid #00ccff;margin-left:500px;}
    .a{border:1px solid #00ccff;}
    .b{margin-left:70px;margin-bottom:40px;padding-left:30px;padding-right:30px;border:1px solid #00ccff;}
    .c{padding-left:30px;padding-right:30px;border:1px solid #00ccff;}
    .d{border:1px solid #00ccff;height: 20px;margin-left: 10px;padding-top: 3px;padding-left: 3px;margin-bottom: -8px;}
    .d1{border:1px solid #00ccff;height: 20px;margin-left: 14px;padding-top: 3px;padding-left: 3px;margin-top: -10px;margin-bottom: -8px;}
    .g{border:1px solid #00ccff;width:130px;height: 20px;margin-left: 14px;padding-top: 3px;padding-left: 3px;margin-top: -10px;}
</style>
</head>
<body class="box">
<div style="background-color:pink">
    <form id="form1" name="form1" method="post|get" enctype="multipart/form-data" action="提交到的地址">
        <h1><center>员工信息登记表</center></h1>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        用户登录名:<input type=text name=username size=40 value=wcz@163.com class="d"></p>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        真实姓名:&nbsp;&nbsp;&nbsp;<input type=text name=name size=40 value=王传智 required class="d1">（必填，只能输入汉字）</p>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        真实年龄:&nbsp;&nbsp;&nbsp;<input type=text name=age size=40 value=18 required class="d1">（必填）</p>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        出生年月:&nbsp;&nbsp;&nbsp;<input type=text name=date size=40  value=&nbsp;年&nbsp;/月&nbsp;/日 required class="d1">（必填）</p>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        电子邮件:&nbsp;&nbsp;&nbsp;<input type=email name=e-mail size=40 value=20013101@126.com required class="d1">（必填）</p>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        身份证号:&nbsp;&nbsp;&nbsp;<input type=text name=sfzh size=40 required class="d1">（必填，能够以数字、字母x结尾的短身份证号）</p>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        手机号码:&nbsp;&nbsp;&nbsp;<input type=text name=phonenumber size=40 required class="d1">（必填）</p>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        幸运颜色:&nbsp;&nbsp;&nbsp;<input type=color  class="g">（请选择你喜欢的颜色）</p>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <input type=submit  value=提交 class="b">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <input type=reset   value=重置 class="c">
    </form>
</body>
</html>

在这里插入图片描述
方法二：使用JavaScript

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style type="text/css">
			div {
				width: 750px;
				height: 450px;
				border: #93BAFF 2px solid;
				background-color: #FFC0CB;
			}
			li {
				line-height: 35px;
				list-style: none;
			}
			li:nth-child(1) {
				line-height: 5px;
				text-align: center;
			}
			#color{
				width: 125px;
				height: 30px;
				margin-top: 5px;
			}
			input {
				width: 250px;
				height: 25px;
				border: 1.5px solid #93BAFF;
				background-color:#EBEBE4 ;
			}
			input:active,input:hover{
				box-shadow: 2px 2px #93BAFF;
				width: 275px;
			}
			span{
				margin-right: 16px;
			}
			#btn{
				width: 120px;
				height: 30px;
				margin-top: 40px;
				margin-left: 100px;
			}
		</style>
	</head>
	<body>
		<div>
			<form name="form" onsubmit="return yuangong()">
				<ul>
					<li>
						<h2>员工信息登记表</h2>
					</li>
					<li>
						<span style="margin-right: 0px;">用户登录名：</span><input type="" name="" placeholder="wcz@163.com"  >
					</li>
					<li>
						<span>真实姓名：</span><input type="text" placeholder="王传智" id="name" name="name">(必填，只能输入汉字)
					</li>
					<li>
						<span>真实年龄：</span><input type="number" placeholder=" 24" id="age" name="age" >(必填)
					</li>
					<li>
						<span>出生日期：</span><input type="data"  placeholder=" 2000 . 01 . 01" id="birthday" name="birthday">(必填)
					</li>
					<li>
						<span>电子邮箱：</span><input type="email"  placeholder="123456@126.com" id="email" name="email">(必填)
					</li>
					<li>
						<span>身份证号：</span><input type="number"  id="idnumber" name="idnumber" >(必填，能够以数字，字母X结尾的短身份证号)
					</li>
					<li>
						<span>手机号码：</span><input type="number" id="phone" name="phone">(必填)
					</li>
					<li>
						<span>幸运颜色：</span><input type="color" id="color">(请选择你喜欢的颜色)
					</li>
					<input type="submit" value="提交"/ id="btn">
					<input type="reset"  value="重置"/ id="btn">
				</ul>
			</form>
		</div>
		<script >
			function yuangong(){
				var yuanName = /^[\u0391-\uFFE5]+$/;//姓名
				var yuanAge=/^((1[8-9])|([2-9][0-9])|(1[0-1][0-9])|120)$/;//年龄
				var yuanEmail = /^\s*\w+@\w+\s*$/;//邮箱
				var yuanBirthday=/^(18|19|20)\d{2}(.)((0[1-9])|(1[0-2]))(.)(([0-2][1-9])|10|20|30|31)$/;//生日
				var yuanIdnumber=/^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9X]$/;//身份证号码
				var yuanPhone = /^1[0-9]{10}$/;//手机号码
				
				
				var name=document.getElementById("name").value;
				var age=document.getElementById("age").value;
				var birthday=document.getElementById("birthday").value;
				var email=document.getElementById("email").value;
				var idnumber=document.getElementById("idnumber").value;
				var phone=document.getElementById("phone").value;
				
				if(!yuanName.test(name)){
					alert("真实姓名栏输入错误！");
					document.getElementById("name").focus();
					return false;
				}
				else if(!yuanAge.test(age)){
					alert("真实年龄栏输入错误！");
					document.getElementById("age").focus();
					return false;
				}
				else if(!yuanBirthday.test(birthday)){
					alert("生日输入错误！");
					document.getElementById("birthday").focus();
					return false;
				}
				else if(!yuanEmail.test(email)){
					alert("电子邮箱栏输入错误！");
					document.getElementById("email").focus();
					return false;
				}
				else if(!yuanIdnumber.test(idnumber)){
					alert("身份证号码输入错误！")
					document.getElementById("idnumber").focus();
					return false;
				}
				else if(!yuanPhone.test(phone)){
					 alert("电话号码输入错误！");
					 document.getElementById("phone").focus();
					 return false;
				 }
			}
		</script>
	</body>
</html>

在这里插入图片描述
以上两种方法都能实现员工信息登录表的制作。

Shmily_ox

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
实验一：员工信息登陆表

实验一：员工信息登陆表方法一：使用网页设计<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>员工信息表</title></head><style type="text/css"> ....
复制链接

扫一扫