form表单特性总结
1. 表单控件的form属性
<form id="user_form" method="get"> </form> <div> 年龄: <input name="age" form="user_form"></> </div>
外部元素可以与非父级表单关联
表单提交，可以携带表单外部元素的值
2. 提交按钮的form相关属性
包括
formaction: 覆盖form的action，使用提交按钮的formaction提交地址
formtarget: 覆盖form的target，使用提交按钮的target设置
formenctype: 覆盖form的enctype
formmethod: 覆盖form的method
formnovalidate: 覆盖form的novalidate, 按钮提交的表单不进行原生的数据验证
例如:
<form action="a.html" target="_self"> 表单序号：<input name="formIndex" value="1" readonly> <input type="submit" value="提交" formaction="blank.html" formtarget="_blank"> </form>
不同按钮可以提交不同地址
<form action="add.php"> <input type="submit" value="新建"> <input type="submit" value="修改" formaction="edit.php"> </form>
3. requestSubmit表单事件
form.submit() 只触发form原生提交，不触发addEventListener绑定的submit事件，会跳过浏览器内置的表单验证
form.requestSubmit() 不触发form原生提交，会触发addEventListener绑定的submit事件，会触发浏览器内置表单验证
4. submit事件的submitter属性
form.addEventListener('submit', function(event) {
event.preventDefault();
event.submitter.classList.add('loading');
})
submitter属性可以快速找到表单提交的触发源，方便添加loading等样式
5. formdata事件
formdata事件可以修改表单数据，提交到后端的数据会改变
form.addEventListener('formdata', (event) => {
event.formData.append('name', 'xiaoming');
});
在构造 FormData 对象时候，会触发 formdata 事件
form.addEventListener('submit', (e) => {
e.preventDefault();
// 构造 FormData 对象，触发 formdata 事件
const formData = new FormData(form);
console.log(JSON.stringify([...formData]));
});
form.addEventListener('formdata', (e) => {
const { formData } = e;
// 将输入值转成小写
formData.set('field1', formData.get('field1').toLowerCase());
formData.set('field2', formData.get('field2').toLowerCase());
// 追加 name 字段
formData.append('name', 'test');
});
