关于form与表单操作

form表单自动提交规则

1. form表单中只有一个type=text的input，在input中按enter键，会自动提交；
2. form表单中有多个type=text的input，且无type=submit的按钮元素，则在input中按enter键，不会自动提交
3. form表单中有type=submit的按钮元素，点击按钮元素或者在input中按enter键，会自动提交
4. form表单中有type=button的按钮元素且有多个input元素，点击按钮元素或者在input中按enter键，不会自动提交

form表单提交方法总结

方法一：浏览器默认提交表单的方法

<form action="/login" method="post" onsubmit="return toValid();">
  <input type="text" name="phone" placeholder="请输入手机号" />
  <input type="password" name="password" placeholder="输入密码" />
  <button type="submit">登录</button>
</form>

通过点击type="submit"的提交按钮来触发form表单的onsubmit事件。form表单自动提交规则1，3也是通过触发onsubmit事件来进行表单提交的。因此，若要阻止表单提交，可以通过return false;，当return true;时则会提交表单；通常我们会在html代码中返回一个函数，函数通过验证表单数据的完整性来决定返回true或者false。这里的提交按钮既可以是button标签也可以是input标签，只要type="submit"就可以。

需要注意的是，<input type="submit" value="提交" name="btn" />和<button type="submit" name="btn" value="提交">提交</button>这两种方式会导致浏览器将value作为name对应的值提交给服务器。因此最好不要这样使用。另外，button和input的相似之处不止于此，button也可以设置type=reset，此时点击按钮会导致表单被重置。
方法二：submit()方法
该方法是用js来实现对表单的提交，但是表单的 onsubmit 事件句柄不会被调用，该方法一般用于通过点击某个普通按钮来进行表单提交。例如：

document.getElementById('form-id').submit();
document.myForm.submit();//通过表单的name属性值来获取表单元素
document.forms['formName'].submit();//通过返回当前文档中<form>元素的集合来获取表单元素

这两种方法都需要指定action属性和method方法(默认是get)，才能把数据以正确的方法发送到指定的服务器地址，否则将会出现404页面。
方法三：ajax方式进行异步提交
前两种方式会使得页面跳转，后端会控制页面的跳转及数据传递，但是在某些时候不希望页面跳转，或者说想要将控制权放在前端，通过js来操作页面的跳转或者数据变化。这个时候就需要用到ajax异步提交并获取数据了，目前现在很多网站也是采用这种方法。通过XMLHttpRequest生成的请求可以有两种方式来获取数据，异步模式或同步模式。请求的类型是由这个XMLHttpRequest对象的open()方法的第三个参数async的值决定的。如果该参数的值为false，则该XMLHttpRequest请求以同步模式进行，否则该过程将以异步模式完成。
例如：

let xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
  if(xhr.readyState == 4) {
    if(xhr.status == 200) {
      let resText = JSON.parse(xhr.responseText);
      if(resText.code == 1) {
        //其他操作
      }
    }
  }
}
xhr.open('POST','/api/code',true);
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");//在这里来设置
xhr.send(`phone=${phoneNumber.value}`);

区别：表单提交时，页面是整体刷新，且由后端来控制页面跳转；而ajax方式提交时，页面是局部刷新，可由js来控制页面跳转。

文件上传的三种方法

方法一：利用表单实现文件上传

注意：1：post方式提交， 2：enctype="multipart/form-data"

方法二：使用ajax和FormData对象异步上传文件
例如：代码来自MDN

var form = document.forms.namedItem("fileinfo");
form.addEventListener('submit', function(ev) {
  var oOutput = document.querySelector("div"),
      oData = new FormData(form);

  oData.append("CustomField", "This is some extra data");

  var oReq = new XMLHttpRequest();
  oReq.open("POST", "stash.php", true);
  oReq.onload = function() {
    if (oReq.status == 200) {
      oOutput.innerHTML = "Uploaded!";
    } else {
      oOutput.innerHTML = "Error " + oReq.status + " occurred when trying to upload your file.<br />";
    }
  };

  oReq.send(oData);
  ev.preventDefault();
}, false);

方法三：iframe上传
未使用过这种方法，google搜索怎么实现。

js阻止form表单自动提交方法

方法一：return false;
方法二：event.preventDefault();这种方法一般是用在监听form表单的submit事件或者监听提交按钮的点击事件从而获取到事件对象event。