<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>新浪集团招聘官网</title>
<link rel="stylesheet" type="text/css" href="../task/bootstrap4/css/bootstrap.min.css" />
<script type="text/javascript" src="../task/bootstrap4/js/jquery-3.4.1.min.js"></script>
<script type="text/javascript" src="../task/bootstrap4/js/bootstrap.min.js"></script>
<script type="text/javascript" src="../task/bootstrap4/js/bootstrap.bundle.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/sina.css" />
<link rel="stylesheet" href="css/com.css" />
<style>
input:hover
{
background-color: aqua;
}
</style>
</head>
<body>
<header>
<div class="ctx">
<div class="float-left">
<img src="images/sina.png" style="height:30px;">
</div>
<nav class="float-left text-secondary">
<ul>
<li>首页</li>
<li>社会招聘</li>
<li>校园招聘</li>
<li>管培生</li>
<li>2024届校园招聘Q&A </li>
<li>关于我们</li>
</ul>
</nav>
<div class="float-right"><span class="iconfont icon-wode mr-2"></span>求职者</div>
</div>
</header>
<div class="ctx clearfix text-secondary" style="margin-top: 3.5rem; height: 3.5rem; line-height: 3.5rem;">
<div class="float-left">
<span>职位名称</span>>
<span class="font-weight-bold">高级前端开发工程师</span>
</div>
</div>
<form>
<div class="ctx bg-white rounded border p-2">
<div class="form-group">
<label>基本信息</label>
</div>
<div class="form-group row text-secondary">
<label class="col-2 col-form-label">中文名<span class="text-danger">*</span></label>
<div class="col-4 text-left">
<input id="truename" type="text" class="form-control" />
</div>
<!-- 设置性别为单选 -->
<label class="col-2 col-form-label">性别</label>
<div class="col-4">
<div class="custom-control custom-radio custom-control-inline mt-2">
<input name="sex" type="radio" id="cr1" value="男" class="custom-control-input">
<label class="custom-control-label" for="cr1">男</label>
</div>
<div class="custom-control custom-radio custom-control-inline">
<input name="sex" type="radio" id="cr2" checked value="女" class="custom-control-input">
<label class="custom-control-label" for="cr2">女</label>
</div>
</div>
</div>
<div class="form-group row text-secondary">
<!-- 为生日和时间输入文本框设置合适的类型，方便操作 -->
<label class="col-2 col-form-label">生日</label>
<div class="col-4 text-left">
<input id="birthday" type="date" class="form-control"/>
</div>
<label class="col-2 col-form-label">目前所在城市</label>
<div class="col-4">
<!-- 为城市添加“厦门、漳州、泉州”三个下拉选项 -->
<!-- 将泉州设为默认值 -->
<select id="city" class="custom-select">
<option value="厦门" >厦门</option>
<option value="漳州" >漳州</option>
<option value="泉州" >泉州</option>
</select>
</div>
</div>
<div class="form-group row text-secondary">
<label class="col-2 col-form-label">手机<span class="text-danger">*</span></label>
<div class="col-4 text-left">
<input id="mobile" type="text" class="form-control" />
</div>
<label class="col-2 col-form-label">地址</label>
<div class="col-4 text-left">
<input id="address" type="text" class="form-control" />
</div>
</div>
<div class="form-group row text-secondary">
<label class="col-2 col-form-label">邮箱</label>
<div class="col-10 text-left">
<input id="email" type="text" class="form-control"/>
</div>
</div>
<div class="form-group row text-secondary">
<label class="col-2 col-form-label">资格证书</label>
<div class="col-10 text-left">
<div class="custom-control custom-checkbox custom-control-inline">
<input type="checkbox" id="tt1" name="title" value="高级系统分析师" class="custom-control-input">
<label class="custom-control-label" for="tt1">高级系统分析师</label>
</div>
<div class="custom-control custom-checkbox custom-control-inline">
<input type="checkbox" id="tt2" name="title" value="高级项目管理师" class="custom-control-input">
<label class="custom-control-label" for="tt2">高级项目管理师</label>
</div>
<div class="custom-control custom-checkbox custom-control-inline">
<input type="checkbox" id="tt3" name="title" value="高级系统架构师" class="custom-control-input">
<label class="custom-control-label" for="tt3">高级系统架构师</label>
</div>
<div class="custom-control custom-checkbox custom-control-inline">
<input type="checkbox" id="tt4" name="title" value="高级网络规划师" class="custom-control-input">
<label class="custom-control-label" for="tt4">高级网络规划师</label>
</div>
</div>
</div>
</div>
<div class="ctx clearfix mt-3 text-center" style="width: 20%;">
<button onclick="SaveUserInfo()" id="submit" type="button" class="btn btn-block btn-primary iconfont icon-gouxuan_mian btn-lg"> 提 交</button>
</div>
</form>
<footer class="ctx">
<h4 class="my-4 text-primary">表单信息读写结果：</h4>
<div id="result" style="line-height: 40px;">
</div>
</footer>
<script>
function SaveUserInfo()
{
let name=document.querySelector("#truename").value;
let sex=document.querySelector("input[name='sex']:checked").value;
let birthday=document.querySelector("#birthday").value;
let city=document.querySelector("#city").value;
let mobile=document.querySelector("#mobile").value;
let email=document.querySelector("#email").value;
let titles=document.querySelectorAll("input[name='title']:checked");
let ts="";
for(let i=0;i<titles.length;i++)
{
ts=ts+titles[i].value+";";
}
let html="姓名: "+name+"<br>"
+"性别: "+sex+"<br>"
+"生日: "+birthday+"<br>"
+"城市: "+city+"<br>"
+"手机号码: "+mobile+"<br>"
+"电子邮箱: "+email+"<br>"
+"资格证书: "+ts+"<br>";
document.querySelector("#result").innerHTML=html;
}
</script>
</body>
</html>
扫一扫
评论
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
查看更多评论
添加红包
