出勤系统按钮正确性排查及Google Sheet提交功能优化

现有按钮的错误点 #

• 按钮bt1、bt2：嵌套了<button>与<input type="button">元素，属于无效HTML结构，会导致点击事件触发异常，内层按钮还会干扰外层按钮的交互逻辑。
• 按钮bt3、bt4：使用type="submit"属性，点击时会直接提交表单，无法完成"先标记所有学生出勤状态再批量提交"的核心需求。

正确的按钮实现方式 #

1. 修正嵌套按钮结构 #

将bt1、bt2的嵌套结构改为单个按钮元素，把学号作为按钮文本，保持初始值为Absent：

<button type="button" name="st_1" id="bt1" value="Absent" onclick="handleClick('bt1')" class="button_1">01</button>
<button type="button" name="st_2" id="bt2" value="Absent" onclick="handleClick('bt2')" class="button_1">02</button>

2. 修正提交类型按钮 #

将bt3、bt4的type="submit"改为type="button"，确保点击时仅切换出勤状态，不触发表单提交：

<button type="button" class="button_1" name="st_3" id="bt3" value="Absent" onclick="handleClick('bt3')">03</button>
<button type="button" class="button_1" name="st_4" id="bt4" value="Absent" onclick="handleClick('bt4')">04</button>

3. 统一学生按钮结构 #

所有学生按钮应遵循以下统一结构（以bt5为例，其余按钮同理）：

<button type="button" class="button_1" name="st_5" id="bt5" value="Absent" onclick="handleClick('bt5')">05</button>

4. 保留正确的提交按钮 #

原提交按钮的实现是正确的，无需修改：

<button type="submit" class="sub">SUBMIT </button>

额外优化建议 #

• 可通过JavaScript动态生成学生按钮，避免手动编写大量重复代码。
• 为Absent状态的按钮添加红色背景，增强视觉区分度。
• 将日期输入框改为<input type="date">，简化日期输入并保证格式统一。

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