HTML第五课:求职登记表
求职登记表
效果展示
代码展示
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="zh-CN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>求职登记表</title>
</head>
<body>
<!-- 页面标题,使用块级元素 h1 -->
<h1>求职登记表</h1>
<!-- 表单部分,使用块级元素 form -->
<form action="#" method="post">
<!-- 个人基本信息区域 -->
<h2>个人基本信息</h2>
<p>
<label>姓名:</label>
<!-- 行级元素 input 用于输入姓名 -->
<input type="text" name="name">
</p>
<p>
<label>性别:</label>
<!-- 行级元素 input 用于选择性别 -->
<input type="radio" name="gender" value="male"> 男
<input type="radio" name="gender" value="female"> 女
</p>
<p>
<label>出生日期:</label>
<!-- 行级元素 input 用于输入出生日期 -->
<input type="text" name="birthdate" placeholder="YYYY-MM-DD">
</p>
<p>
<label>联系电话:</label>
<!-- 行级元素 input 用于输入联系电话 -->
<input type="text" name="phone">
</p>
<p>
<label>电子邮箱:</label>
<!-- 行级元素 input 用于输入电子邮箱 -->
<input type="text" name="email">
</p>
<p>
<label>联系地址:</label>
<!-- 行级元素 input 用于输入联系地址 -->
<input type="text" name="address">
</p>
<!-- 教育背景区域 -->
<h2>教育背景</h2>
<p>
<label>最高学历:</label>
<!-- 行级元素 select 和 option 用于选择最高学历 -->
<select name="education">
<option value="high_school">高中</option>
<option value="college">大专</option>
<option value="bachelor">本科</option>
<option value="master">硕士</option>
<option value="phd">博士</option>
</select>
</p>
<p>
<label>毕业院校:</label>
<!-- 行级元素 input 用于输入毕业院校 -->
<input type="text" name="university">
</p>
<p>
<label>所学专业:</label>
<!-- 行级元素 input 用于输入所学专业 -->
<input type="text" name="major">
</p>
<!-- 工作经历区域 -->
<h2>工作经历</h2>
<p>
<label>公司名称:</label>
<!-- 行级元素 input 用于输入公司名称 -->
<input type="text" name="company">
</p>
<p>
<label>入职时间:</label>
<!-- 行级元素 input 用于输入入职时间 -->
<input type="text" name="start_date" placeholder="YYYY-MM-DD">
</p>
<p>
<label>离职时间:</label>
<!-- 行级元素 input 用于输入离职时间 -->
<input type="text" name="end_date" placeholder="YYYY-MM-DD">
</p>
<p>
<label>职位:</label>
<!-- 行级元素 input 用于输入职位 -->
<input type="text" name="position">
</p>
<p>
<label>工作描述:</label><br>
<!-- 行级元素 textarea 用于输入工作描述 -->
<textarea name="job_description" rows="4" cols="50"></textarea>
</p>
<!-- 求职意向区域 -->
<h2>求职意向</h2>
<p>
<label>应聘职位:</label>
<!-- 行级元素 input 用于输入应聘职位 -->
<input type="text" name="apply_position">
</p>
<p>
<label>期望薪资:</label>
<!-- 行级元素 input 用于输入期望薪资 -->
<input type="text" name="expected_salary">
</p>
<p>
<label>可到岗时间:</label>
<!-- 行级元素 input 用于输入可到岗时间 -->
<input type="text" name="available_date" placeholder="YYYY-MM-DD">
</p>
<!-- 提交和重置按钮区域 -->
<p>
<!-- 行级元素 input 用于提交表单 -->
<input type="submit" value="提交">
<!-- 行级元素 input 用于重置表单 -->
<input type="reset" value="重置">
</p>
</form>
</body>
</html>