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

 

出处:https://www.zhangxinxu.com/wordpress/2022/10/2022-new-form-property/

版权声明:本文版权归作者所有,遵循 CC 4.0 BY-SA 许可协议, 转载请注明原文链接
https://www.cnblogs.com/mengff/p/17441246.html