VS Code Live Server环境下表单提交URL无参数及验证失效问题

核心问题 #

你的提交按钮设置了type="button"，这种类型的按钮只会触发自定义JS事件，不会触发表单的默认提交逻辑，也不会激活HTML5的必填项验证规则。

修复步骤 #

1. 修改提交按钮类型
   将提交按钮的type从button改为submit，这样点击时会自动触发浏览器的表单提交流程，同时激活必填项验证：

   <button type="submit" id="Submit"> Send </button>
   

   另外注意你的代码里<label>标签未闭合，要补上</label>，否则可能影响表单元素的正常关联和渲染：

   <label> 
       First name:
       <input type=text name="first-name" required >     
   </label>
   

2. 关于action和method属性的说明

   • action="."是合法写法，代表表单提交到当前页面的URL，在Live Server的本地环境下可以正常工作。
   • method="GET"会把表单参数拼接到URL末尾显示，如果你希望数据以请求体形式发送，可以改为method="POST"，静态页面场景下两种方式都适用。

验证效果 #

修改完成后，测试以下场景：

• 未填写必填项点击提交：浏览器会自动弹出必填提示
• 填写完成提交：URL会带上表单参数（例如http://127.0.0.1:5500/?first-name=xxx），符合预期

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