console
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>申请表单</title>
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
form {
width: 600px;
margin: 0 auto;
}
#ju {
padding-top: 20px;
}
.xing {
margin-left: 110px;
margin-top: -37px;
margin-bottom: 10px;
}
.one {
margin-left: 47px;
position: relative;
top: 15px;
}
.onebumen {
position: absolute;
margin-top: 6px;
margin-left: 6px;
}
.two {
position: relative;
left: -9px;
top: 25px;
}
.shifou {
margin-left: 110px;
margin-top: -27px;
}
.tijiao,.chongzhi {
margin-top: 30px;
width: 80px;
height: 40px;
}
.tijiao {
margin-right: 30px;
}
.jieshu {
margin-left: 200px;
}
.biaoti {
text-align: center;
margin-left: 80px;
}
.biaoti h1 {
padding-top: 60px;
padding-bottom: 30px;
}
.biaoti .logo a img {
width: 80px;
height: 80px;
position: absolute;
margin-left: -200px;
margin-top: 35px;
}
.shenqingjiaru button {
width: 150px;
float: left;
margin-top: 10px;
margin-left: 20px;
}
.jiaruwomen {
font-size: 25px;
letter-spacing: 2px;
color: white;
text-decoration: none;
}
.jiaruwomen:hover {
text-decoration: none;
color: white;
}
.kuang {
border: 2px solid rgb(95, 95, 95);
width: 800px;
margin: 0 auto;
box-shadow: 2px 2px 5px rgb(122, 122, 122);
position: relative;
top: 30px;
}
</style>
<script src="js/jquery-1.11.1.js"></script>
<script>
$(function(){
$(".jieshu1").hide();
$(".tijiao").click(function(){
$("#tijiao1").trigger("click");
});
$(".chongzhi").click(function(){
$("#chongzhi1").trigger("click");
});
});
</script>
</head>
<body>
<div class="shenqingjiaru">
<p>
<button type="button" class="btn btn-primary btn-lg"><a class="jiaruwomen" href="http://jsrun.net/McvKp">返回首页</a></button>
</p>
</div>
<div class="kuang">
<div class="biaoti">
<div class="logo">
<a href="tuxie.html"><img src="https://i.loli.net/2020/03/26/rxsw6o8iWASjMVa.png" alt="图书馆协会"></a>
</div>
<h1>报名申请表</h1>
</div>
<form class="form-horizontal" role="form">
<div class="form-group" id="ju">
<label for="firstname" class="col-sm-2 control-label">姓名</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="firstname"
placeholder="请输入名字">
</div>
</div>
<label for="name" class="one">性别</label>
<div class="xing" id="ju">
<label class="radio-inline xingbie">
<input type="radio" name="optionsRadiosinline" id="optionsRadios3" value="option1" checked>男
</label>
<label class="radio-inline xingbie">
<input type="radio" name="optionsRadiosinline" id="optionsRadios4" value="option2">女
</label>
</div>
<div class="form-group" id="ju">
<label for="age" class="col-sm-2 control-label">年龄</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="firstname"
placeholder="请输入年龄">
</div>
</div>
<div class="form-group" id="ju">
<label for="age" class="col-sm-2 control-label">学院</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="firstname"
placeholder="请输入你所在的学院">
</div>
</div>
<div class="form-group" id="ju">
<label for="age" class="col-sm-2 control-label">班级</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="firstname"
placeholder="请输入你所在的班级">
</div>
</div>
<div class="form-group" id="ju">
<label for="age" class="col-sm-2 control-label">微信号</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="firstname"
placeholder="请输入微信号">
</div>
</div>
<div class="form-group" id="ju">
<label for="age" class="col-sm-2 control-label">手机号</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="firstname"
placeholder="请输入手机号">
</div>
</div>
<div class="form-group" id="ju">
<label for="name" class="onebumen">第一意向部门</label>
<select class="form-control" style="width: 78.7%;margin-left: 120px;">
<option>管理部</option>
<option>网编部</option>
<option>宣传部</option>
<option>外联部</option>
</select>
</div>
<div class="form-group" id="ju">
<label for="name" class="onebumen">第二意向部门</label>
<select class="form-control" style="width: 78.7%;margin-left: 120px;">
<option>管理部</option>
<option>网编部</option>
<option>宣传部</option>
<option>外联部</option>
</select>
</div>
<div class="jieshu1">
<button id="tijiao1" type="submit" value="提交">提交</button>
<button id="chongzhi1" type="reset" value="重置">重置</button>
</div>
</form>
<form class="form-horizontal" role="form">
<label for="name" class="two">是否服从调剂</label>
<div class="shifou" id="ju">
<label class="radio-inline">
<input type="radio" name="optionsRadiosinline" id="optionsRadios3" value="option1" checked>是
</label>
<label class="radio-inline">
<input type="radio" name="optionsRadiosinline" id="optionsRadios4" value="option2">否
</label>
</div>
<div class="form-group" style="margin-top: 50px;margin-left: -8px;">
<label for="inputfile">电子照片</label>
<input type="file" id="inputfile">
<p class="help-block">请上传你的电子照片（蓝底）</p>
</div>
<div class="form-group" id="ju">
<label for="name" style="margin-left: 6px;">自我介绍</label>
<textarea class="form-control" rows="8"></textarea>
</div>
<div class="jieshu">
<button class="tijiao" type="submit" value="提交">提交</button>
<button class="chongzhi" type="reset" value="重置">重置</button>
</div>
</form>
<br>
<br>
<br>
<br>
<br>
</div>
<br>
<br>
<br>
<br>
<br>
</body>
</html>