HTML表单提交按钮异常：点击打开本地C盘且无法提交表单

核心问题：提交后跳转本地C盘 #

你表单里的action="/"是问题根源。当直接在本地打开HTML文件（以file://协议访问）时，浏览器会把/解析成本地文件系统的根目录，也就是你的C盘根目录，这就是点击提交后打开C盘的原因。

修复步骤 #

1. 修正form的action属性 #

• 若仅在本地测试表单验证逻辑、不想跳转页面：可以移除action属性，或设为action="#"，同时用JavaScript阻止默认提交行为：

  <form id="form" action="#">
    <!-- 表单内容 -->
    <button type="submit">Sign up</button>
  </form>
  <script>
    document.getElementById('form').addEventListener('submit', function(e) {
      e.preventDefault(); // 阻止默认跳转
      // 可在此添加表单验证、数据处理逻辑
      console.log('表单已提交，未跳转');
    });
  </script>
  

• 若要提交到后端接口：把action替换成你的后端接口地址，比如action="https://your-server.com/submit-form"。

2. 修复代码中的其他错误 #

你的代码还有几处语法/逻辑问题，会影响表单功能：

• 输入框name属性重复：Email和Message的name都错误写成了username，需改成对应名称，同时Email的type建议改为email更规范：

  <input id="email" name="email" type="email">
  <input id="Message" name="message" type="text">
  

• label与input的关联错误：Email对应的label标签for="username"应改为for="email"，确保点击标签能聚焦对应输入框。
• 标签未闭合：div.input-control、form等标签没有正确闭合，浏览器解析易出错，需补全闭合标签：

  <div class="input-control">
    <label for="Message">Message </label>  
    <input id="Message" name="message" type="text">
    <div class="error"> </div>
  </div> <!-- 补上该div的闭合标签 -->
  <button type="submit">Sign up</button>
  </form> <!-- 确保form标签闭合 -->
  

完整修正后的代码示例 #

<div class="container">
    <form id="form" action="#">
        <h1>Registration</h1>
        <div class="input-control">
            <label for="username">Username</label>
            <input id="username" name="username" type="text">
            <div class="error"> </div>
        </div>

        <div class="input-control">
            <label for="email">Email</label>  
            <input id="email" name="email" type="email">
            <div class="error"> </div>
        </div>
        <div class="input-control">
            <label for="Message">Message </label>  
            <input id="Message" name="message" type="text">
            <div class="error"> </div>
        </div>

        <button type="submit">Sign up</button>
    </form>
</div>
<script>
    document.getElementById('form').addEventListener('submit', function(e) {
        e.preventDefault();
        // 可在此添加表单验证逻辑，比如检查输入合法性
        console.log('表单提交成功，数据:', new FormData(this));
    });
</script>

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