表单验证
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>IFE JavaScript Task 01</title>
<style>
body {
font-size: 25px;
font-family: 'Microsoft yahei';
}
input {
border: 2px solid #a8a8a8;
font-size: 25px;
border-radius: 5px;
outline: none;
}
.radio {
display: inline-block;
margin-left: 100px;
}
#form-container {
width: 700px;
margin: auto;
padding: 100px;
}
#form-container span {
width: auto;
height: 50px;
padding: 0 20px;
margin-left: 25px;
float: left;
}
#select-container {
padding: 20px 0;
}
.hide{
display: none;
}
.select {
margin-left: 30px;
width: 160px;
height: 34px;
padding: 6px 12px;
font-size: 14px;
line-height: 1.42857143;
color: #555;
background-color: #fff;
background-image: none;
border: 1px solid #ccc;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
-webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
-o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}
</style>
</head>
<body>
<div id="form-container">
<div id="radio-select" onchange="radioChange()">
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="inSchoolRadio" checked> 在校生
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="outschoolRadio"> 非在校生
</label>
</div>
</div>
<div id="select-container">
<div class="inSchool">
<span>学校</span>
<select class="select" id="select1" onchange="selectDistrict()">
<option value="bj">北京</option>
<option value="sh">上海</option>
<option value="hz">杭州</option>
</select>
<select class="select" id="select2">
<option value="pku">北京大学</option>
<option value="thu">清华大学</option>
<option value="bhu">北京航空航天大学</option>
</select>
</div>
<div class="outSchool hide">
<span>就业单位</span>
<input type="text" class="input">
</div>
</div>
</div>
<script src="task.js"></script>
</body>
</html>
