网页表单验证

最新推荐文章于 2023-01-20 09:00:00 发布

wyhcczz

最新推荐文章于 2023-01-20 09:00:00 发布

阅读量352

点赞数

文章标签： html5 css3

本文链接：https://blog.csdn.net/wyhcczz/article/details/105410549

版权

<html>
<head>
	<meta charset="UTF-8">
    <title>表单验证</title>
    <style type="text/css">
    *:focus{
    	outline: none;
    }/*设置表单中的所有元素获得焦点时，不再出现虚线框或者高亮框*/
  .box{
    width:600px;
    height:460px;
  	background-color: #ffc1cb;
     margin:20%;
    border:1px solid blue;
  }/*给表单盒子设置宽高及背景色和边框*/
  h2{
  	font-family:微软雅黑；
  	letter-spacing:2em;
  	text-align: center;
  }/*为二级标题设置字体样式和对齐方式*/
  ul li{
  	list-style: none;/*清除所有li的样式*/
  	padding:10px;
  	font-family: 宋体;
  	font-size: 15px;
  }

.contact-form span{
	width:100px;
	margin-top: 2px;
	padding: 2px;
	display:inline-block;
}/*设置所有span元素的边距及宽度*/


	input:focus{
		    background: #fff;
		    border:1px solid #555;
		    box-shadow: 0 0 2px #aaa;
		    padding-right:70px;
		}/*当该元素获得焦点时，设置背景颜色和背景图片、边框、外阴影和右内边距*/
#usually{
	width:170px;
	height:20px;

}/*为usually类设置高度和宽度*/
#special{
	width:170px;

}/*为提交重置按钮设置宽度*/
input[type="submit"]:hover,input[type="submit"]:hover{
            opacity:.75;
		    cursor: pointer;
		}
	input#usually:focus:invalid{
		   box-shadow: 0 0 5px red;
		    border-color: #b03535
		}
		/*当该元素获取有效的填写内容时，设置背景颜色、盒阴影及边框颜色*/
		input#usually:required:valid{
		   box-shadow: 0 0 5px green;
		    border-color: #28921f;
		}
</style>
</head>
<body>
<div class="box">
<form class="contact-form"action="#" method="post">
	<h2>员工信息登记表</h2>
	<ul>
		<li>
		<span>用户登陆名：</span>
		<input  type="text" id='logoname' name='logoname' placeholder="王传智" id="usually">
	</li>
		<li >
		<span>真实姓名：</span>
		<input type="text" id='name' name='name' maxlength="16" required   id="usually">
	</li>
		<li >
		<span>真实年龄：</span>
		<input type="text" name="age"  required    id="usually">
	</li>
		<li>
		<span>出生日期：</span>
		<input type="date" name="date" placeholder="/年/月/日"   id="usually">
	</li>
		<li>
		<span>电子邮箱：</span>
     <input type="email" name="email"  placeholder="123456@123.com" 
required    id="usually">
		
	</li>
		<li>
			<span>身份证号：</span>
			<input type="text" name="idnumber" pattern="^(\d{15}$|^\d{18}$|^\d{17}(\d|X|x))$"   required   id="usually">
		</li>
		<li>
			<span>手机号码：</span>
			<input type="text" name="" pattern="((\d{11})|^((\d{7,8})|(\d{4}|\d{3})-(\d{7,8})|(\d{4}|\d{3})-(\d{7,8})-(\d{4}|\d{3}|\d{2}|\d{1})|(\d{7,8})-(\d{4}|\d{3}|\d{2}|\d{1}))$)"id="myiphone" οnkeyup="" /required   id="usually">
		</li>
		<li >
			<span>幸运颜色：</span>
			<input type="color"  id="usually">
		<li >
		&nbsp;&nbsp;&nbsp;&nbsp;<input type="submit"  value="提交" id="special">&nbsp;&nbsp;&nbsp;&nbsp;<input type="reset" value="重置" id="special">
		</li>

</form>
</div>
</html>

/效果图如下在这里插入图片描述
//

wyhcczz

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
网页表单验证

<html><head> <meta charset="UTF-8"> <title>表单验证</title> <style type="text/css"> *:focus{ outline: none; }/*设置表单中的所有元素获得焦点时，不再出现虚线框或者高亮框*/ ....
复制链接

扫一扫

网页表单验证

“相关推荐”对你有帮助么？