如何提取HTML表单提交结果并写入同目录下的文本文件

纯前端静态HTML + 客户端JavaScript无法直接向HTML文件所在目录写入文本文件，这是浏览器内置的沙箱安全限制——如果网页可以随意修改本地目录的文件，会带来严重的安全风险，你之前尝试的各类纯前端实现方式跑不通，本质都是撞上了这个限制。
要实现这个需求，只需要加一个几行代码的极简本地后端服务即可，不需要复杂框架，用原生能力就能跑。

• 首先修正原表单的语法问题：原代码中checkbox的写法不符合规范，<input>是自闭合标签，不能把选项文字包裹在input标签内，同时需要给每个checkbox加value属性才能正确读取选中值。
• 补全前端表单提交逻辑：阻止表单默认跳转行为，收集所有用户填写/选择的内容，发送给本地后端。
• 写极简后端服务：负责托管你的HTML、CSS静态文件，接收前端发来的表单数据，追加写入同目录下的form_records.txt文件。

修改后的HTML文件（替换你原来的代码即可） #

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="style.css">
</head>
<body>
<h1 style="color:#e6e8e8">Video Game Form</h1>
<form id="form" class="form">
  <div class = "form-control">
    <label>All Time Favorite Game:</label>
    <input name="allgame" id="allgame" type="text" placeholder="Enter your favorite game">
    <label>Favorite Free Game:</label>
    <select name="freegame" id ="freegame">
      <option value="">Select your favorite game</option>
      <option value="Fortnite">Fortnite</option>
      <option value="Apex Legends">Apex Legends</option>
      <option value="Call of Duty: Warzone">Call of Duty: Warzone</option>
      <option value="Valorant">Valorant</option>
      <option value="Rocket League">Rocket League</option>
    </select>
  </div>
  <div class="form-control">
    <label>More games you may play
        <small>(Check all that apply)</small>
    </label>
    <label><input type="checkbox" name="inp" value="Minecraft"> Minecraft</label>
    <label><input type="checkbox" name="inp" value="GTA 5"> GTA 5</label>
    <label><input type="checkbox" name="inp" value="Call Of Duty"> Call Of Duty</label>
    <label><input type="checkbox" name="inp" value="Fortnite"> Fortnite</label>
    <label><input type="checkbox" name="inp" value="Valorant"> Valorant</label>
    <label><input type="checkbox" name="inp" value="League of Legends"> League of Legends</label>
    <label><input type="checkbox" name="inp" value="Rocket League"> Rocket League</label>
    <label><input type="checkbox" name="inp" value="Elden Ring"> Elden Ring</label>
    <label><input type="checkbox" name="inp" value="Zelda"> Zelda</label>
    <label><input type="checkbox" name="inp" value="Other"> Other...</label>
  </div>
  <button type="submit" value="button" class="neon-button">
    Submit
  </button>
</form>

<script>
const form = document.getElementById('form')
form.addEventListener('submit', async (e) => {
  // 阻止表单默认跳转刷新
  e.preventDefault()
  // 收集表单数据
  const formData = {
    submitTime: new Date().toLocaleString(),
    allTimeFavorite: document.getElementById('allgame').value.trim(),
    favoriteFreeGame: document.getElementById('freegame').value,
    playedGames: Array.from(document.querySelectorAll('input[name="inp"]:checked')).map(item => item.value)
  }
  // 发送数据给后端
  const res = await fetch('/submit', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify(formData)
  })
  if (res.ok) {
    alert('提交成功，结果已写入记录文件')
    form.reset()
  } else {
    alert('提交失败，请检查本地服务是否正常运行')
  }
})
</script>
</body>
</html>

后端服务代码（同目录新建server.js，粘贴以下内容，无需安装任何第三方依赖） #

const http = require('http')
const fs = require('fs')
const path = require('path')

const PORT = 3000
// 表单记录存储文件路径
const RECORD_FILE = path.join(__dirname, 'form_records.txt')

const server = http.createServer((req, res) => {
  // 处理表单提交请求
  if (req.method === 'POST' && req.url === '/submit') {
    let body = ''
    req.on('data', chunk => body += chunk.toString())
    req.on('end', () => {
      try {
        const data = JSON.parse(body)
        // 格式化要写入的内容
        const writeContent = `
===== 提交时间：${data.submitTime} =====
有史以来最喜欢的游戏：${data.allTimeFavorite || '未填写'}
最喜欢的免费游戏：${data.favoriteFreeGame || '未选择'}
玩过的其他游戏：${data.playedGames.length ? data.playedGames.join('、') : '未勾选'}
`
        // 追加写入到txt文件
        fs.appendFileSync(RECORD_FILE, writeContent, 'utf8')
        res.writeHead(200, { 'Content-Type': 'application/json' })
        res.end(JSON.stringify({ code: 0, msg: 'success' }))
      } catch (err) {
        res.writeHead(500, { 'Content-Type': 'application/json' })
        res.end(JSON.stringify({ code: 1, msg: 'error' }))
      }
    })
    return
  }

  // 处理静态文件请求
  let filePath = path.join(__dirname, req.url === '/' ? 'index.html' : req.url)
  const ext = path.extname(filePath)
  const contentType = {
    '.html': 'text/html',
    '.css': 'text/css',
    '.js': 'text/javascript'
  }[ext] || 'application/octet-stream'

  fs.readFile(filePath, (err, content) => {
    if (err) {
      res.writeHead(404)
      res.end('File not found')
      return
    }
    res.writeHead(200, { 'Content-Type': contentType })
    res.end(content)
  })
})

server.listen(PORT, () => {
  console.log(`服务已启动，浏览器访问 http://localhost:${PORT} 即可打开表单`)
})

• 确保电脑安装了Node.js，直接下载安装包按默认步骤安装即可，不需要额外配置
• 在HTML、CSS、server.js所在的文件夹空白处按住Shift右键，选择“在此处打开PowerShell/终端”
• 输入命令node server.js回车，看到启动成功提示后，打开浏览器访问http://localhost:3000即可正常使用表单
• 每次用户提交表单，内容会自动追加到同目录自动生成的form_records.txt文件中，不会覆盖历史记录。

不要尝试寻找纯前端自动写本地文件的方案：浏览器安全规则不允许网页在用户无感知的情况下操作本地文件，唯一的纯前端方案是触发文件下载让用户手动选择保存位置，无法实现自动写入同目录文件的效果。

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