html 表单提交完成,html——form表单提交方法及表单提交注意点

表单提交方法

一、type=“submit”javascript

二、type=“image”php

三、使用连接来提交表单，javascript的DOM模型：html

提交

这种方法其实是调用了一个javascript函数，使用javacript函数来提交表单，方法就很是多很是灵活了，好比能够把它加入到任意一个标签的onclick事件中：java

提交

可是，若是一个表单里有须要有多个提交按钮怎么办呢？

好比一个表单里的提交按钮所指向的处理页面不一样，这样因为表单在定义的时候就已经肯定下表单数据的处理页面，因此单纯地在表单里放多个提交按钮是没有办法达到目的的。这就须要javascript。

首先定义一个函数：web

代码以下:ajax

经过javascript改变form的action属性值，这样就能够实现多提交按钮并且功能不一样了，页面内代码以下：json

代码以下:浏览器

上面一段代码，使用的是普通的按钮，而提交功能的实现方法是在它的onclick事件中调用javascript函数.

有了上面这几种提交表单的方法,我想差很少够应付复杂的表单了.异步

表单提交注意点

注意：每一个input标签都要有name属性，form要有action和method。

固然，这里也可使用button代替input做为提交的按钮：

button的type属性有两个值：button和submit。当不写type属性时，其type的默认值是submit，点击的话也会直接提交数据svg

使用form的onsubmit()方法对表单数据进行 验证后 再提交

//或者

提交

这里给form元素加上了onsubmit()方法，它会在“提交”按钮点击的时候被触发，该方法必定要有return返回值，若是值为false则不进行提交，若是为true则提交。

给input type='button’添加onclick事件，验证经过则调用submit()方法提交

function checkForm(){

var user= document.getElementById('user').value;

var psw= document.getElementById('psd').value;

if(...){

//验证不经过

return false;

}

document.getElementById("form1").submit();

}

使用ajax对数据进行 验证后 再提交

//或者

提交

注意：

若是使用button，要先进行数据验证的话，就必需要将type的值设置为”button”，即表示它是一个按钮

这里提交的数据’data’，使用了serialize()方法将提交的表单值序列化(即a=1&b=2格式)，固然你也能够写成：

{

"username":username,

"password":password

}

表单的 input、select 默认的样式是不一样的，因此就形成了width设置的同样，但就是对不齐，能够设置box-sizing:border-box;来解决不一致问题

补充

表单具备默认的提交行为，默认是同步的，同步表单提交，浏览器会锁死(转圈儿)等待服务端的响应结果。

表单的同步提交以后，不管服务端响应的是什么，都会直接把响应的结果覆盖掉当前页面。

后来有人想到了一种办法，来解决这个问题，那边是服务端重定向(服务端重定向针对异步请求无效)

消除自动填充：经过添加readonly＆onfocus =“this.removeAttribute('readonly');

解决了这个问题。