# 表单

# 表单提交 submit 和 button

  • button 是普通按钮,submit 是提交按钮
  • submit 是 button 的特例,也是 button 的一种,他把提交这个动作自动集成,submit 和 button 二者都以按钮的形式展现,看起来都是按钮,所不同的是 type 属性和触发响应的事件上

# 具体场景分析

  • 网页上需要提交信息到服务器 submit ✔️ button
  • 网页上执行一个普通事件,如重置、清空等 submit button ✔️
  • 提交表单 submit ✔️ button 需要绑定事件才能提交表单数据
  • 局部刷新 submit 不可以使用,在触发事件的同时 button ✔️
  • 没有表单,却要提交数据 submit 需要有表单时,提交时才会带数据,当然使用 submit 也可以,但前提要拦截 onclick 事件 button 默认是不提交任何数据。可以绑定事件的方式来提交数据。
  • 表单数据太多的时候 submit 推荐 button 需要写很多数据的获取动作
  • 提交数据是要使用 JS 进行校验,但如果这时用户禁用 js,那校验就会失效,如果后台也没校验,就会出 bug submit 不推荐 button 推荐,通过 button 提交数据,如果用户禁用 js,那数据提交动作也激活不了。

# submit 提交前加校验的话,加return

function check() {
  var name = document.getElementById("name").value;
  if (name === null || name === "") {
    alert("用户名不能为空");
    return false;
  }
  return true;
}
<form name="form" action="跳转的页面" method="post" onsubmit="return check()">
  <input type="text" id="name" />
  <input type="submit" value="提交" />
</form>;