网页设计作业HTML表单提交时提示文件未找到错误如何解决？

问题原因及修复方案 #

核心问题1：表单默认提交触发跳转 #

你使用了type="submit"的按钮，点击后除了执行你绑定的display()函数，还会触发表单默认提交逻辑，向action属性指定的index.html地址发送请求，当你本地项目目录下没有index.html文件时，就会触发文件未找到错误。

核心问题2：DOM取值逻辑不匹配 #

你在JS中通过document.test.firstname.value的方式读取表单值，该语法是按表单元素的name属性取值，但你的姓名输入框name属性是first、last，和JS中调用的firstname、lastname不匹配，会导致读取值时报错。

核心问题3：属性引号格式错误 #

你的form标签里的name、method、action属性用的是中文弯引号，浏览器解析时会识别异常，导致表单属性不生效。

修复步骤 #

• 替换form标签所有中文引号为英文半角引号，如果你不需要把表单提交到后端服务，可以直接去掉method和action属性。
• 阻止表单默认提交行为：将提交按钮的type从submit改为button，或者在onClick事件中加return false。
• 统一表单元素name属性和JS取值逻辑：要么把姓名输入框的name改为firstname、lastname，要么修改JS里的取值字段为document.test.first.value、document.test.last.value。

修正后代码示例 #

JavaScript代码

function display() {
  const DispWin = window.open('', 'NewWin', 'toolbar=no,status=no,width=300,height=200')
  let message = "<ul><li><b>First Name: </b>" + document.test.firstname.value;
  message += "<li><b>Last Name: </b>" + document.test.lastname.value;
  message += "<li><b>E-Mail: </b>" + document.test.email.value;
  message += "<li><b>Understanding Level: </b>" + document.test.understanding.value;
  message += "<li><b>Pass/Fail: </b>" + document.test.passfail.value;
  message += "<li><b>Comments: </b>" + document.test.comments.value + "</ul>";
  DispWin.document.write(message);
}

HTML代码

<p>HTML Forms Test</p>
<form name="test">
  <p>
    <label>First Name: </label><input type="text" name="firstname" id="firstname">
  </p>
  <p>
    <label>Last Name: </label><input type="text" name="lastname" id="lastname">
  </p>
  <p>
    <label>E-Mail: </label><input type="text" name="email" id="email">
  </p>
  <p>
    <label>How well do you understand HTML code? (1-10) </label><input type="range" name="understanding" id="understanding" min="1" max="10" value="5">
  </p>
  <p>
    How do you think you'll do in this class?
  </p>
  <p>
    <input type="radio" name="passfail" value="pass" id="passfail_0"> <label>Pass </label>
    <br>
    <input type="radio" name="passfail" value="fail" id="passfail_1"> <label>Fail </label>
    <br>
  </p>
  <p>
    <label>Comments: </label><textarea name="comments" id="comments"></textarea>
  </p>
  <p>
    <input type="button" name="submit" id="submit" value="Submit" onClick="display();">
  </p>
</form>

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