html作业登陆界面

最新推荐文章于 2022-11-29 23:44:53 发布

weixin_34010949

最新推荐文章于 2022-11-29 23:44:53 发布

阅读量366

点赞数

原文链接：https://my.oschina.net/lafter/blog/903528

版权

为什么80%的码农都做不了架构师？>>>

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>第二次作业</title>
		<style>
			* {
				margin: 0px;
				padding: 0px;
				background-color: wheat;
			}
			
			.table {
				width: 200px;
				height: 30%;
				margin: auto;
				margin-top: 50%; //margin-top的值是外div高度减去内div高度再除以2
			}
			
			input {
				float: left;
				height: 20px;
				border: 1px solid #ccc;
			}
			
			.texter {
				border-right: none;
			}
			
			.clearer {
				float: left;
				width: 20px;
				border: none;
				border-top: 1px solid #ccc;
				border-right: 1px solid #ccc;
				border-bottom: 1px solid #ccc;
				background: transparent;
			}
		</style>
		<script>
			var passwd = document.getElementById("passwd");
			var repasswd = document.getElementById("repasswd");
			var name = document.getElementById("userName");

			function onclickSubmit() {
				if(name == null) {
					alert("name is null!");
				} else if(passwd == null) {
					alert("password is null!");
				} else if(passwd != repasswd) {
					alert("password is error!");
				}
			}
		</script>
	</head>

	<body>
		<div id="work_1">
			<table class="table" border="1">
				<tr>
					<td>UserName</td>
					<td><input type="text" name="" id="userName" value="" /></td>
				</tr>
				<tr>
					<td>sex</td>
					<td align="center">
						<select name="">
							<option value="0">mail</option>
							<option value="1">femail</option>
					</td>
				</tr>
				<tr>
					<td>PassWd</td>
					<td><input type="password" name="" id="passwd" value="" /></td>
				</tr>
				<tr>
					<td>RePanit</td>
					<td><input type="password" name="" id="repasswd" value="" /></td>
				</tr>

				<tr>
					<td colspan="2" align="center">
						<input type="button" value="submit" onclick="onclickSubmit()" />
					</td>
				</tr>

			</table>
			<br />
		</div>
		<div id="滑块">
			<div id="slider">
				<a>请选择您要的数值[10,100]</a>
				<input type="range" name="" id="slider" value="" min="10" max="100" />
				<br />
				<a>请选择颜色</a>
				<input type="color" value="#2D9900" />
				<!--
                	Chrome支持
               -->
               <br />
				<input type="text" class="texter" id="texter">
				<input type="submit" class="clearer" onClick="document.getElementById('texter').value = '';" value="x">
			</div>
		</div>

	</body>

</html>

转载于:https://my.oschina.net/lafter/blog/903528