jshtml提交表单(htmlform表单提交)

　　原创专栏｜司徒正美

　　司徒正美，本名钟钦成，著名的Java专家，去哪儿网前端架构师，立志做考古学家的日语系工程师，穿梭于二次元与二进制间的“魔法师”，做过陶艺，写过小说，涉猎Java、Ruby、 Java。曾出版《Java框架设计》一书。

　　引言

　　可以说，JS 最早是为表单而发明的，因此在没有JS之前，所有操作都需要提交后端验证，发现有误再重定向回原页面，加上之前1,2KB的网速，这用户体验真是奇差无比。因此JS最初发明出来，就是做表单验证的。围绕表单，添加了各种语义化的元素，事件，属性．

　　比如说label，在某个radio外围上它，既能说明它是什么东西，也能扩大点击范围。

　　比如说fieldset，它拥有默认的框框，方便圈定某个区域，表明这里面的东西是表单（form本身默认不可见，而CSS要在稍晚的时候才发明出来）；

　　比如说， onchange, oninput, onsubmit等事件,提交与用户交互的友好度；

　　比如说， readOnly, disabled, checked, 为表单元素增加各种状态。

　　我们可以给一个定义，何谓表单元素？就是能向后端提供数据的元素，而这些元素通过都放在form元素中，但如果将它们单个拎出来,这个不好判定,我们还可以通过其他"外观"特征获得,就是它们的tagName都是input, button, select, textarea.其实option元素也算是表单元素,但它的数据需要提交到select 元素进行过滤,才能提交。

　　function isFormElement(el){

　　return /input|button|select|textarea/i.test(el.tagName)

　　}

　　在HTML5中，还添加类似datalist, output等元素, 但它们只是辅助设施,没有直接给form提交数据的能力,因此不算是表单元素。 form元素作为AJAX出现前唯一的提交通道,我们在这里着重说一下：

　　它上面拥有如下属性

jshtml提交表单(htmlform表单提交),jshtml提交表单(htmlform表单提交),jshtml提交表单,文章,浏览器,源码,第1张

　　其中三个重要属性说明一下：

action指定该表单发送时接受操作的地址

method指定表单数据发送的方法。可选值:get、post。get发送则表单内的数据将附加到url后发送。post则是在HTTP请求中发送。

enctype指定表单数据在发送的服务器之前如何编码，特别注意的是，当含有上传域时要设置编码方式为enctype="multipart/form-data"，否则后台无法获取到浏览器发送的文件数据。是设置表单的MIME编码。默认情况，这个编码格式是application/x-www-form-urlencoded，不能用于文件上传；只有使用了multipart/form-data，form里面的input的值以2进制的方式传过去。才能完整的传递文件数据。FTP上传大文件的时候，也有个选项是以二进制方式上传。

　　表单里面的元素布置有一定的要求，如form里面一定放着fieldset, fielset里面包着legend, label包着说明文字与input, textearea...., label里要指定tabindex，就是tab切换的顺序。

　　不同的表单拥有不同的外形，它们的用法也各有不同，序列化数据也不一样，因此我们将分开以下几种细细讨论：

　　输入系，选择系，下拉系，搭车系，图形系

　　输入系

　　输入系的元素主要是说input[type=text]，input[type=password]，textarea这三种元素。通常第一个输入用户名，第二个输入密码，第三个输入详细消息。

　　它们都表现为一个凹入的框框,里面可以让用户输入内容，不同的是输入域只能输入一条，输入区可以输入多行，密码域使用圆点来遮掩用户的输入。

　　由于是一个框框，它就存在焦点获得与失去的时机，还有输入法切换的时机，于是衍生了一大堆事件。

　　首先是focus， blur事件，其次是keydown， keyup， keypress事件，然后是针对输入内容的监听事件， input是每添加或删除一个字符时触发， change是所有内容输入好，用户点击页面其他元素，让当前表单元素失去焦点时触发！从IE9开始，添加了compositionstart，compositionupdate，compositionend用来监听用户切换输入法。因此像中文，我们用五笔或拼音敲了好几下，才生成一个中文，没有这监听，我们恰恰好为元素添加了maxlength属性时，可能输入不了内容。

　　有关输入法监听事件的更详细的认识，可以看这篇文章《经验总结：应对中文输入法的字符串截断方案》（https://www.cnblogs.com/chyingp/p/3599641.html）

　　因此输入系表单元素主要纠缠在用什么事件上，前面几个事件还好办，难点是输入法监听事件，这个特别难兼容，目前我在facebook的react库中有发现兼容处理（https://github.com/facebook/react/blob/master/src/renderers/dom/client/eventPlugins/BeforeInputEventPlugin.js#L175）

　　但这个很难抽取出来，并且在各浏览器中的表现也不太好，详见这文章：

　　DOM COMPOSITION EVENTS COMPATIBILITY NOTES（https://blog.evanyou.me/2014/01/03/composition-event/）

　　那么剩下能处理的事件就是oninput。oninput也是IE9才支持的事件，在IE6-8中，拥有一个无敌能监听所有属性变动的事件onpropertychange事件。

　　但这个也不完美，在avalon源码中，兼容input事件涉及更多东西，大家可以用这个jquery插件实现相应的功能。

　　jquery.inputevent（https://github.com/dodo/jquery-inputevent）

　　此外，输入系表单元素还有一个其他元素没有东西——光标

　　默认光标总在我们输入内容的后面，但等我们用程序直接对input.value赋值时，光标位置就会丢失。

　　此外光标的高度可能也受字体影响，可以根据以下描述处理一下。

　　关于调整input里面的输入光标大小

　　以前在项目里碰到过一个问题

　　input输入框用一个背景图模拟，设置height和line-height一样的高度，使里面的输入文字能够居中，

　　在FF下出现的情况是：点击input时，输入光标其实上跟input的height一样高，但当开始输入文字时，光标又变得跟文字一样高，