master

分支 (1)

管理

管理

master

homework3
/
index.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>form</title>
		<style>
			h1 {
				text-align: center;
			}
			label {
				flex: 0 0 35%;
				text-align: right;
			}
			div {
				display: flex;
				align-items: flex-start;
				margin-top: 30px;
			}
			form {
				width: 600px;
				height: 500px;
				margin: 0 auto;
				box-shadow: grey 1px 1px 1px 1px;
				padding-top: 10px;
			}
			.btn {
				margin-left: 50%;
				margin-right: 30%;
				display: flex;
				justify-content: space-between;
			}
			.username input, .password input, .repassword input {
				border:none;
				border-bottom: 2px solid gray;
			}
			.specialty select {
				border:none;
			}
		</style>
		<script>
	        window.onload = function() {
	            let btn = document.getElementById("submit")

	            let out1 = document.getElementById('out1')
	            let out2 = document.getElementById('out2')
	            let out3 = document.getElementById('out3')
	            let out4 = document.getElementById('out4')
	            let out5 = document.getElementById('out5')
				let out6 = document.getElementById('out6')

	            btn.onclick = function() {
	                let username = document.getElementById("username")
	                console.dir(username.value)
	                out1.innerHTML = username.value

	                let password = document.getElementById("password")
	                console.dir(password.value)
	                out2.innerHTML = password.value

	                let rePassword = document.getElementById("repassword")
	                console.dir(rePassword.value)
	                out3.innerHTML = rePassword.value

	                let sex = document.getElementsByName("sex")
	                let sexMap = new Map
	                sexMap.set("male", '男')
	                sexMap.set("female", '女')
	                sex.forEach(element => {
	                    if (element.checked) {
	                        console.log(sexMap.get(element.value))
	                        out4.innerHTML = sexMap.get(element.value)
	                    }
	                });
	                let hobby = document.getElementsByName("hobby")
	                let hobbyMap = new Map
	                hobbyMap.set("basketball", '篮球')
	                hobbyMap.set("run", '跑步')
	                hobbyMap.set("swim", '游泳')
	                hobby.forEach(element => {
	                    if (element.checked) {
	                        console.log(hobbyMap.get(element.value))
	                        out4.innerHTML = hobbyMap.get(element.value)
	                    }
	                });
	                let specialty = document.getElementById("specialty")
	                let opts = specialty.options
	                console.log(opts)
	                for (let i = 0; i < specialty.length; i++) {
	                    if (opts[i].index == specialty.selectedIndex) {
	                        out5.innerHTML = opts[i].text
	                    }
	                }
	                let resume = document.getElementById("resume")
	                console.log(resume)
	                out6.innerHTML = resume.value
	            }
	        }
	    </script>
	</head>
	<body>
		<h1>表单</h1>
		<form>
			<div class="username">
				<label>用户名：</label>
				<input type="text" placeholder="请输入用户名" id="username"/>
				<input type="button" value="校验用户名是否合法" />
			</div>
			<div class="password">
				<label>密码：</label>
				<input type="password" placeholder="请输入密码" id="password"/>
			</div>
			<div class="repassword">
				<label>确认密码：</label>
				<input type="password" placeholder="请再次输入密码" id="repassword"/>
			</div>
			<div>
				<label>性别：</label>
				<input type="radio" name="sex" value="male"/>男
				<input type="radio" name="sex"/ value="female">女
			</div>
			<div>
				<label>爱好：</label>
				<input type="checkbox" name="hobby" value="basketball"/>篮球
				<input type="checkbox" name="hobby" value="run"/>跑步
				<input type="checkbox" name="hobby" value="swim"/>游泳
			</div>
			<div class="specialty">
				<label>专业：</label>
				<select id="specialty">
					<option value="software">软件技术</option>
					<option value="computer">计算机应用</option>
				</select>
			</div>
			<div>
				<label>个人简介：</label>
				<textarea rows="1" id="resume"></textarea>
			</div>
			<div>
				<label>头像：</label>
				<input type="file" />
			</div>
			<div class="btn">
				<input type="button" value="提交" id="submit"/>
				<input type="reset" value="重置" id="reset"/>
			</div>
		</form>
		<span id="out1"></span>
	    <span id="out2"></span>
	    <span id="out3"></span>
	    <span id="out4"></span>
	    <span id="out5"></span>
	    <span id="out6"></span>
	    <span id="out7"></span>
	</body>
</html>