erido
/
form.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>表单</title>
		<style type="text/css">
			.form{
				width: 1400px;
				height: 600px;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
			}
			.iform{
				width: 500px;
				height: 600px;
				background: lightgray;
				box-shadow: white 4px;
				flex-direction: column;
				align-content: flex-start;
			}
		</style>
	</head>
	<body>
		<h1 align="center">表单</h1>
		<form class="form">
		<div class="iform">
		<p>用户<input type="text" id="username" placeholder="请输入用户名" />
		<input type="button" value="用户名是否重复"/></p>
		<!--密码-->
		<p>密码<input type="password" placeholder="请输入密码"/></p>
		<p>确认密码<input type="password" placeholder="请确认密码"/></p>
		<!--日期-->
		<p>出生日期<input type="date" placeholder="请输入出生日期"/></p>
		<!--单选框-->
		<p>性别<input type="radio" name="sex"/>男
		<input type="radio" name="sex"/>女</p>
		<!--多选框-->
		<p>爱好<input type="checkbox" value="run" name="hobby" />跑步
		<input type="checkbox" value="bb" name="hobby" />篮球</p>
		<!--下拉列表-->
		<p>专业
		<select>
			<option value="pc">计算机</option>
			<option value="sw">软件</option>
		</select></p>
		<!--大文本框-->
		<p>
		<textarea placeholder="简介" rows="10"></textarea></p>
		<!--文件上传-->
		<p>头像
		<input type="file"value="file" /></p>
		<!--按钮-->
		<p>
		<input type="submit" value="提交" id="btn" />
		<input type="reset" value="重置"/>
		</p></div>
		</form>
	</body>
	<script>
		window.onload =function(){
		let oBtn =document.getElementById('btn')
		oBtn.onclick=function(){
			let oUsername =document.getElementsByName('username')
			console.dir(oUsername[0].value)
			let oUsernameById = document .getElementById('username')
			console.dir(oUsernameById.value)
			let oSex document.getElementByname('sex')
			oSex.forEach(item=>{
				if(item.checked){
					let oValue = item.value
					if(oValue ==='female'){
						console.log('男')
					}
					else if(oValue ==='male'){
						console.log('女')
					}
					}
				}
			)
		}
		}
	</script>
</html>