html5表单注册应用

最新推荐文章于 2024-03-01 11:45:40 发布

svygh123

最新推荐文章于 2024-03-01 11:45:40 发布

阅读量391

点赞数

分类专栏： html 文章标签： html5 表单校验注册 html5新特性

本文链接：https://blog.csdn.net/svygh123/article/details/103288799

版权

html 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>员工信息</title>
<style>
        .container{
            max-width: 400px;
            margin: 20px auto;
        }
        
		input,textarea{
            width: 300px;
			margin: 5px 0;
            border: 1px solid #999;
            padding: 0.5em 1em;
			vertical-align: middle;
        }
		input[type="search"], select{
            width: 330px;
			margin: 5px 0;
            border: 1px solid #999;
            padding: 0.5em 1em;
			vertical-align: middle;
        }
		/*必填*/
        input:required,textarea:required{
            border-right: 3px solid red;
        }
		input:required:valid,textarea:required:valid{
            border-right: 3px solid green;
            border-color: green;
        }
		input:required:focus:valid,textarea:required:focus:valid{
            border-right: 3px solid green;
			box-shadow: 0 0 5px green;
            border-color: green;
        }

		/*选填*/
        input:optional,select:optional{
            border-right: 3px solid #999;
        }
		
        input:required::after{
            content: '*';
        }
        input:optional::after {
            content: '';
        }
		/*浏览器默认focus的时候没有边框*/
        input:focus,select:focus,textarea:focus{
            outline: 0;
        }
		/*focus的时候加自定义边框*/
        input:required:focus,textarea:required:focus{
            box-shadow: 0 0 3px 1px red;
        }
  
        input:optional:focus,textarea:optional:focus{
            box-shadow: 0 0 3px 1px #999;
        }
 
        input[type="submit"]{
            background-color: #F53044;
            border: 2px solid red;
            padding: 10px 0px;
            color: #ffffff;
            width: 380px;
        }
        input[type="submit"]:hover{
            background-color: red;
        }
		.label-vertical {
			writing-mode: vertical-lr; 
			margin-right: 18px;
			letter-spacing: 5px;
			/*text-decoration: underline;	
            transform: rotate(180deg);*/
		}
    </style>
</head>
<body>
<div class="container">	
	<center><h1>员工信息</h1></center>
	<form action="#">
		<label for="name">姓名 </label>
		<input id="name" type="search" title="请输入姓名" placeholder="输入姓名" autofocus required pattern=".{2,5}" oninvalid="setCustomValidity('2至5位数')" oninput="setCustomValidity('')"><br>
		<label for="age">年龄 </label><input id="age" type="text" title="请输入年龄" placeholder="输入年龄" pattern="\d{1,3}" required oninvalid="setCustomValidity('1至3位数')" oninput="setCustomValidity('')"><br>
		<label for="birthday">生日 </label><input id="birthday" type="date" title="请输入出生日期" placeholder="输入出生日期" value="2017-03-01" required oninvalid="setCustomValidity('请输入出生日期')" oninput="setCustomValidity('')"><br>
		<label for="email">邮箱 </label><input id="email" type="email" title="请输入邮箱" placeholder="输入邮箱" required oninvalid="setCustomValidity('请输入合法邮箱')" oninput="setCustomValidity('')"><br>
		<label for="tel">手机 </label><input type="tel" id="tel" title="请输入手机" placeholder="输入手机号"><br>
		<label for="tel">网址 </label><input type="url" id="url" title="请输入网址" placeholder="输入网址"><br>
		<label for="tel">爱好 </label><select id="interesting">
			<option value="1">足球</option>
			<option value="2">篮球</option>
			<option value="3">排球</option>
			<option value="4">乒乓球</option>
		</select><br>		
		<label for="self" class="label-vertical">自我评价 </label><textarea id="self" cols="30" rows="10" required title="请输入留言" placeholder="输入留言"></textarea><br/>
		<input type="submit" value="提交表单"/>
	</form>
</div>
</body>
</html>

最终效果如下

svygh123

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
html5表单注册应用

<!doctype html><html><head><meta charset="utf-8"><title>员工信息</title><style> .container{ max-width: 400px; margin: 20px a...
复制链接

扫一扫