JS之表单脚本🤞💕💕

表单之基础

1. web表单在HTML中以<form>元素表示，在js中则以HTMLFPRMElement类型表示。

   其属性和方法有如下：

   target 用于发送请求和接收响应的窗口的名字

   submit() 提交表单

   reset() 把表单字段重置为各自的默认值

   name 表单的名字

   method HTTP请求的方法类型通常为‘get’ 或 ‘post’

   length 表单中控件的数量

   enctype 请求的编码类型

   action 请求的URL

   acceptCharset 服务器可以接收的字符集

   表单可以同时拥有id和name而且两者可以不同。

   a. 表单提交

   form.submit();

   通过submit()提交表单时候，submit事件不会触发，因此在调用这个方法之前要先做数据验证；表单提交的一个最大问题是可能会提交两次表单，如果提交表单之后没有反应，那么没有耐心的用户可能会多次点击提交按钮，结果是很烦人的（因为服务器哟昂处理重复的请求），甚至可能造成损失（如果用户正在购物，可能会多次下单），解决这个问题的主要有两种方式，在表单提交后禁用提交按钮，或者通过onsubmit事件处理取消之后的表单提交。

   b. 重置表单

   用户单击重置按钮可以重置表单，重置按钮可以使用type属性为reset的元素来创建。

   <input type='reset' value ='reset form'>

   <button type=reset'> RESET FROM </button>

   用户单击重置按钮重置表单会触发reset事件，这个事件为取消重置提供机会，例如： 阻止重置表单

   let kkb = document.getElementById("myForm");
   
   kkb.addEventListenter('reset',(event) = > {
   
   	event.preventDefault();
   }); 
   
   

重置表单 form.reset();

2.表单序列化

javascript中可以使用表单字段的type属性连同name和value属性来进行序列化，在写代码之前需要理解浏览器如何确定在提交表单时要把什么发送给服务器。

字段名和值时URL编码的并以&号分隔

禁用字段不会发送

复选框或者单选按钮只在被选中时发送

类型为reset和button的按钮不会发送

多选字段的每个选中项都有一个值

通过点击提交按钮提交表单时，会发送该提交按钮，否则，不会发送提交按钮。

select 元素的值是被选中option元素value属性。如果option元素没有value属性，则该值为他的文本。