求助：基于Google Apps Script的HTML输入框数据写入Google Spreadsheet

没问题，我帮你搞定这个需求！下面是一套完整的可直接复用的方案，分后端脚本、前端页面和部署步骤三部分，一步步跟着做就行：

1. 编写后端Google Apps Script（.gs文件） #

首先打开你的目标Google表格，点击顶部菜单栏的「扩展程序」→「Apps 脚本」，进入脚本编辑器后，把默认的Code.gs内容替换成下面的代码：

// 返回前端HTML页面
function doGet() {
  return HtmlService.createHtmlOutputFromFile('index');
}

// 接收前端提交的数据并写入表格
function submitData(input1, input2, input3, input4) {
  // 替换成你的表格工作表名称，默认是Sheet1
  const sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("Sheet1");
  // 写入数据，末尾添加当前时间作为记录
  sheet.appendRow([input1, input2, input3, input4, new Date()]);
  return "数据提交成功！";
}

小提示：如果你的工作表不是默认的Sheet1，一定要把getSheetByName里的名称改成你实际的工作表名，不然会报错。

2. 编写前端HTML页面（.html文件） #

在脚本编辑器左侧的「文件」菜单里选择「新建」→「HTML文件」，命名为index（和后端doGet函数里的文件名对应），然后把下面的代码粘贴进去：

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <style>
      /* 简单美化一下页面，可按需修改 */
      .form-container {
        max-width: 400px;
        margin: 20px auto;
        padding: 20px;
        border: 1px solid #ddd;
        border-radius: 8px;
      }
      .input-group {
        margin-bottom: 15px;
      }
      label {
        display: block;
        margin-bottom: 5px;
        font-weight: bold;
      }
      input {
        width: 100%;
        padding: 8px;
        box-sizing: border-box;
        border: 1px solid #ddd;
        border-radius: 4px;
      }
      button {
        background-color: #1a73e8;
        color: white;
        padding: 10px 20px;
        border: none;
        border-radius: 4px;
        cursor: pointer;
      }
      button:hover {
        background-color: #1557b0;
      }
      #message {
        margin-top: 15px;
        color: green;
        font-weight: bold;
      }
    </style>
  </head>
  <body>
    <div class="form-container">
      <h3>填写数据提交</h3>
      <div class="input-group">
        <label for="input1">输入框1</label>
        <input type="text" id="input1" placeholder="请输入内容">
      </div>
      <div class="input-group">
        <label for="input2">输入框2</label>
        <input type="text" id="input2" placeholder="请输入内容">
      </div>
      <div class="input-group">
        <label for="input3">输入框3</label>
        <input type="text" id="input3" placeholder="请输入内容">
      </div>
      <div class="input-group">
        <label for="input4">输入框4</label>
        <input type="text" id="input4" placeholder="请输入内容">
      </div>
      <button onclick="submitForm()">提交数据</button>
      <div id="message"></div>
    </div>

    <script>
      function submitForm() {
        // 获取四个输入框的值
        const val1 = document.getElementById("input1").value;
        const val2 = document.getElementById("input2").value;
        const val3 = document.getElementById("input3").value;
        const val4 = document.getElementById("input4").value;

        // 调用后端的submitData函数
        google.script.run
          .withSuccessHandler(showMessage)
          .submitData(val1, val2, val3, val4);
      }

      // 处理提交成功后的提示
      function showMessage(response) {
        document.getElementById("message").textContent = response;
        // 清空输入框
        document.getElementById("input1").value = "";
        document.getElementById("input2").value = "";
        document.getElementById("input3").value = "";
        document.getElementById("input4").value = "";
      }
    </script>
  </body>
</html>

小提示：你可以修改输入框的label文字、样式，或者调整输入框类型（比如改成email、number），完全按需定制。

3. 部署为Web应用并测试 #

1. 在脚本编辑器顶部点击「部署」→「新建部署」
2. 点击「类型」下拉框，选择「Web应用」
3. 配置选项：
   • 执行：选择「我」（因为是你创建的脚本，用你的权限访问表格）
   • 谁可以访问：根据你的需求选择，比如选「任何人，甚至匿名」（如果需要公开访问的话），或者「仅限组织内用户」
4. 点击「部署」，第一次部署会要求授权，按照提示完成授权（需要允许脚本访问你的表格）
5. 部署完成后，复制生成的Web应用URL，在浏览器里打开这个URL，输入数据点击提交，然后回到你的Google表格，就能看到数据已经被写入了！

如果遇到授权或者数据不写入的问题，检查一下工作表名称是否正确，部署的权限设置是否正确，还有输入框有没有填写内容~

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