国学周末班报名表

林麟斋院 · 发表于 3 天前

本帖最后由林麟斋院于 2025-11-19 18:06 编辑

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>国学周末班报名表</title>
<style>
      body {
         font-family: Arial, sans-serif;
         line-height: 1.6;
         margin: 20px;
      }
      .form-container {
         max-width: 600px;
         margin: 0 auto;
         padding: 20px;
         border: 1px solid #ddd;
         border-radius: 5px;
         background-color: #f9f9f9;
      }
      .form-group {
         margin-bottom: 15px;
      }
      label {
         display: block;
         margin-bottom: 5px;
         font-weight: bold;
      }
      input[type="text"],
      input[type="number"],
      input[type="tel"],
      textarea {
         width: 100%;
         padding: 8px;
         border: 1px solid #ddd;
         border-radius: 4px;
         box-sizing: border-box;
      }
      .submit-btn {
         background-color: #4CAF50;
         color: white;
         padding: 10px 15px;
         border: none;
         border-radius: 4px;
         cursor: pointer;
      }
      .submit-btn:hover {
         background-color: #45a049;
      }
</style>
</head>
<body>
<div class="form-container">
      <h2>国学周末班报名表</h2>
      <form action="/submit-form" method="post"> 
         
         <div class="form-group">
            <label for="student-name">姓名：</label>
            <input type="text" id="student-name" name="student_name" required>
         </div>
         <div class="form-group">
            <label for="student-age">年龄：</label>
            <input type="number" id="student-age" name="student_age" required>
         </div>
         <div class="form-group">
            <label for="student-gender">性别：</label>
            <select id="student-gender" name="student_gender" required>
                  <option value="">请选择</option>
                  <option value="男">男</option>
                  <option value="女">女</option>
            </select>
         </div>

         
         <div class="form-group">
            <label for="parent-name">家长姓名：</label>
            <input type="text" id="parent-name" name="parent_name" required>
         </div>
         <div class="form-group">
            <label for="parent-title">称谓：</label>
            <input type="text" id="parent-title" name="parent_title" placeholder="如：父亲、母亲" required>
         </div>
         <div class="form-group">
            <label for="parent-phone">电话：</label>
            <input type="tel" id="parent-phone" name="parent_phone" required>
         </div>

         
         <div class="form-group">
            <label for="address">住址：</label>
            <textarea id="address" name="address" rows="3" required></textarea>
         </div>

         
         
         
         <div class="form-group">
            <button type="submit" class="submit-btn">提交报名</button>
         </div>
      </form>
</div>
</body>
</html>
说明：

林麟斋院 · 发表于 3 天前

本帖最后由林麟斋院于 2025-11-19 18:04 编辑

说明：

表单结构：
- 表单包含学生信息（姓名、年龄、性别）、家长信息（姓名、称谓、电话）和住址。
- 每个字段都有相应的标签和输入框。
- 使用required属性确保必填字段不为空。
样式：
- 添加了简单的CSS样式使表单更美观。
- 表单容器有最大宽度和居中显示。
表单提交：
- 表单的action属性应设置为实际处理表单数据的URL（如/submit-form或后端接口地址）。
- 方法为POST，适合提交敏感数据。
签到部分：
- 原始需求中的“签到”通常是在现场进行的，因此这里用提交按钮代替。
- 如果需要在线签到功能，可能需要更复杂的实现（如二维码签到、地理位置签到等）。
集成到网站：
- 将此HTML代码添加到www.dzgy8.com网站的适当页面中（如通过CMS系统编辑页面或直接修改HTML文件）。
- 确保表单的action属性指向正确的后端处理逻辑。

如果您需要更复杂的功能（如表单验证、数据库存储、邮件通知等），建议使用后端语言（如PHP、Python、Node.js等）配合数据库实现。

帐号		自动登录	找回密码
密码			立即注册

国学周末班报名表

分享到：

个人中心