前端小测DOM基础(表单)

DOM 基础

已知有如下 HTML 代码:

1
2
3
4
5
<form id="loginForm" action="/account/login" method="post">
  <p>账号:<input name="username" required /></p>
  <p>密码:<input type="password" name="username" required /></p>
  <p>账号:<input type="submit" value="登录" /></p>
</form>

  • 获取<form>元素

  • <form>表单元素提交的时候组织默认的表单提交行为

  • <form>表单提交改成Ajax提交,这里不需要写 Ajax 请求代码,只需写下如何获取<form>表单元素下所有需要提交的数据

  • Ajax提交的时候需要阻止二次点击提交,请通过改变上面某个元素的某个属性实现防止二次提交

  • 页面上有个影藏的输入框可以显示用户来源,产品经理希望用户登录的时候,这个<form>表单元素外面的这个影藏输入框的数据也能一起提交上去(HTML 示意如下)
    <input name="form" type="hidden">

表单相关知识

相关要点:

获取表单 form 元素
1
2
3
4
document.getElementById("loginForm"); //方法1:经典id选择器
document.querySelect("#loginForm"); //方法2: 万能的querySelector
document.forms.loginForm; //方法3: 表单原生方法,还可以写作:document.form['loginForm']
loginForm; //方法4:标签的id可以直接当变量来用
阻止默认行为
1
2
3
4
loginForm.addEventListener("submit", function (event) {
  event.preventDefault();
  // 其他操作...
});
获取表单元素下所有需要提交的数据
1
new FormData(loginForm);
防止二次提交数据
1
setAttribute('disabled', '')或者loginForm.querySelector('[type="submit"]').disabled = true;
表单以外数据提交
1
<input name="from" type="hidden" form="loginForm" /> // IE10+

表单相关属性:

from 表单可以有以下属性:name,id,method,action,enctype(文件上传)

默认情况下，单个输入框，无论按钮的type="submit"还是type="button"类型，回车即提交

当type="submit"时，无论有几个type="text"输入框，回车均表示提交。（<button>按钮默认的 type 为submit）

当type="button"时，且存在多个输入框，回车不提交。（button）