HTML第五课:求职登记表

发布于:2025-09-03 ⋅ 阅读:(13) ⋅ 点赞:(0)

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>


网站公告

今日签到

点亮在社区的每一天
去签到