如何在表格表单中使用Radio与提交按钮？重置/提交按钮失效求助

首先，咱们先搞定你遇到的按钮失效问题——核心原因是你用了错误的表单标签<forms>，HTML里标准的表单标签是<form>（单数），这个拼写错误直接导致浏览器无法识别表单上下文，所以reset和submit按钮没法正常工作。

接下来我会给你修正后的完整代码，同时加上Radio按钮（比如添加「性别」选项作为示例），顺便优化一些表单元素的规范：

<form name="f1" action="#" method="POST">
  <table valign='center'>
    <tr valign="top">
      <td>Name:</td>
      <td>
        <input type="text" name="username">
        <br><br>
      </td>
    </tr>
    <tr valign="top">
      <td>Age: </td>
      <td>
        <input type="text" name="age">
        <br><br>
      </td>
    </tr>
    <tr valign="top">
      <td>Email:</td>
      <td>
        <input type="text" name="email">
        <br><br>
      </td>
    </tr>
    <!-- 添加Radio按钮组 -->
    <tr valign="top">
      <td>Gender:</td>
      <td>
        <input type="radio" name="gender" value="male" id="male">
        <label for="male">Male</label>
        <input type="radio" name="gender" value="female" id="female">
        <label for="female">Female</label>
        <br><br>
      </td>
    </tr>
    <tr valign="top">
      <td>News Type:</td>
      <td>
        <!-- 给select添加name属性，方便提交后获取值 -->
        <select name="news_type">
          <option value="tech">Tech</option>
          <option value="gaming">Gaming</option>
          <option value="homepage">Homepage</option>
          <option value="stocks">Stocks</option>
          <option value="sports">Sports</option>
        </select>
        <br><br>
      </td>
    </tr>
    <tr valign="top">
      <td>Comments:</td>
      <td>
        <!-- 建议用placeholder替代默认文本，避免用户需要删除默认内容 -->
        <textarea cols="50" rows="5" placeholder="Give Feedback"></textarea>
        <br><br>
      </td>
    </tr>
    <tr>
      <td>
        <input type="reset" value="Reset">
      </td>
      <td align="right">
        <input type="submit" value="Submit">
      </td>
    </tr>
  </table>
</form>

关键修改和注意点： #

• 修复表单标签：把<forms>改成<form>，这是按钮恢复功能的核心。
• 添加表单必要属性：action="#"表示提交到当前页面（你可以换成实际的后端接口地址），method="POST"是更安全的提交方式（默认是GET，会把参数暴露在URL里）。
• Radio按钮使用规范：
  • 同一组的Radio按钮必须拥有相同的name属性（比如示例里的gender），这样浏览器才会把它们视为一组，只能选中一个。
  • 每个Radio按钮最好搭配<label>标签，点击文字也能选中对应按钮，提升用户体验；for属性要和Radio的id对应。
• 表单元素命名优化：给每个输入元素设置有意义的name（比如把f1改成username），方便后端获取数据；给<select>添加name属性，否则提交后无法获取下拉框的选择值。
• 文本域优化：用placeholder替代默认文本，用户点击文本域时不会需要手动删除预设内容，体验更好。

现在你可以测试一下，reset按钮会清空所有表单内容，submit按钮会触发表单提交（如果是action="#"的话会刷新页面，你可以根据实际需求修改action地址）。

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