如何实现表单文本输入的提交与数据收集？技术求助

一、确定数据提交目标（form的action属性） #

• 若你有自建后端服务，将action的值替换为你的后端接口路径，比如action="/submit-quiz"，后端需对应实现该路径的请求处理逻辑。
• 若无现成后端，可快速搭建轻量后端服务（如Node.js/PHP/Python）临时处理提交数据；开发测试阶段也可设action="javascript:void(0)"，用JS拦截默认提交行为。

二、代码实现方案 #

1. 原生HTML+后端（Node.js/Express示例） #

先修改前端HTML，补充请求方法与基础校验：

<div class="comment-box">
  <h2>submit quiz</h2>
  <form action="/submit-quiz" method="POST">
    <input type="text" name="full_name" placeholder="Full Name..." required>
    <input type="email" name="email" placeholder="Email Address..." required>
    <button type="submit">submit comment</button>
  </form>
</div>

• 新增method="POST"：POST比GET更安全，不会将数据暴露在URL中；required属性实现前端必填校验。

后端用Node.js+Express处理提交请求：

const express = require('express');
const app = express();
const port = 3000;

// 解析表单格式的请求体
app.use(express.urlencoded({ extended: true }));

// 处理表单提交的POST请求
app.post('/submit-quiz', (req, res) => {
  const { full_name, email } = req.body;
  // 此处可将数据存入数据库（如MongoDB/MySQL）、写入文件或做其他业务处理
  console.log(`提交数据：姓名=${full_name}，邮箱=${email}`);
  // 返回前端提交结果
  res.send('提交成功！');
});

app.listen(port, () => {
  console.log(`服务运行在 http://localhost:${port}`);
});

2. 前端异步提交（无页面跳转） #

若需保持页面不刷新，用JS实现AJAX提交：

<div class="comment-box">
  <h2>submit quiz</h2>
  <form id="quizForm">
    <input type="text" name="full_name" placeholder="Full Name..." required>
    <input type="email" name="email" placeholder="Email Address..." required>
    <button type="submit">submit comment</button>
  </form>
</div>

<script>
const quizForm = document.getElementById('quizForm');
quizForm.addEventListener('submit', async (e) => {
  e.preventDefault(); // 阻止表单默认跳转行为
  const formData = new FormData(quizForm);
  
  try {
    const response = await fetch('/submit-quiz', {
      method: 'POST',
      body: formData
    });
    const result = await response.text();
    alert(result);
    quizForm.reset(); // 提交成功后重置表单
  } catch (err) {
    console.error('提交失败:', err);
    alert('提交出错，请稍后重试');
  }
});
</script>

三、核心注意事项 #

• 数据安全：永远用POST提交敏感数据，避免用GET（数据会暴露在URL中）。
• 双重校验：前端校验仅提升用户体验，后端必须再次校验数据格式与合法性，防止恶意绕过前端校验。
• 后端适配：不同后端框架解析表单数据的方式不同，比如PHP用$_POST获取，Python Flask用request.form。

内容的提问来源于stack exchange，提问作者PoshYoshii62