form表单特性总结

足球世界杯规则

1. 表单控件的form属性

年龄:

外部元素可以与非父级表单关联表单提交,可以携带表单外部元素的值

2. 提交按钮的form相关属性

包括

formaction: 覆盖form的action,使用提交按钮的formaction提交地址formtarget: 覆盖form的target,使用提交按钮的target设置formenctype: 覆盖form的enctypeformmethod: 覆盖form的methodformnovalidate: 覆盖form的novalidate, 按钮提交的表单不进行原生的数据验证

例如:

表单序号:

不同按钮可以提交不同地址

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');

});

出处:2022年新出了哪些form表单新特性