html——form表单提交⽅法及表单提交注意点
表单提交⽅法
1、type=“submit”
<form name=”form”method="post"action="#">
<input type="submit"name="submit"value="提交">
</form>
2、type=“image”
<form name=”form”method=”post”action=”#">
<input type=”image”name=”submit”src=”btnSubmit.jpg”>
</form>
3、使⽤链接来提交表单，javascript的DOM模型：
<form name=”form”method=”post”action=”#”>
<a href=”javascript:form.submit();”>提交</a>
</form>
这种⽅法实际上是调⽤了⼀个javascript函数，使⽤javacript函数来提交表单，⽅法就⾮常多⾮常灵活了，⽐如可以把它加⼊到任意⼀个标签的onclick事件中：
<form name=”form”method=”post”action=”#”>
<div onclick=”javascript:form.submit();”>
<span>提交</span>
</div>
</form>
html中提交表单用什么属性但是，如果⼀个表单⾥有需要有多个提交按钮怎么办呢？
⽐如⼀个表单⾥的提交按钮所指向的处理页⾯不同，这样由于表单在定义的时候就已经确定下表单数据的处理页⾯，所以单纯地在表单⾥放多个提交按钮是没有办法达到⽬的的。这就需要javascript。
⾸先定义⼀个函数：
代码如下:
<script language=javascript>
function query(){
form.action=”query.php”;
form.submit();}
function update(){
form.action=”update.php”;
form.submit();}
</script>
通过javascript改变form的action属性值，这样就可以实现多提交按钮⽽且功能不同了，页⾯内代码如下：
代码如下:
<form name=”form”method=”post”action=”#”>
<input type=”button”name=”query”onclick=”query();”value=”查询”>
<input type=”button”name=”update”onclick=”update();”value=”更新”>
</form>
上⾯⼀段代码，使⽤的是普通的按钮，⽽提交功能的实现⽅法是在它的onclick事件中调⽤javascript函数.
有了上⾯这⼏种提交表单的⽅法，我想差不多够应付复杂的表单了.
表单提交注意点
注意：每个input标签都要有name属性，form要有action和method。
当然，这⾥也可以使⽤button代替input作为提交的按钮：
button的type属性有两个值：button和submit。当不写type属性时，其type的默认值是submit，点击的话也会直接提交数据
使⽤form的onsubmit()⽅法对表单数据进⾏ 验证后 再提交
<form id="form1"action="/test"method="post"onsubmit="return checkForm()">
<input type="submit"value="提交">
//或者
<button type="submit">提交</button>
<script type="text/javascript">
function checkForm(){
var user= ElementById('user').value;
var psw= ElementById('psd').value;
if(...){
//如果验证不通过
return false;
}else{
//验证通过
return true;
}
}
</script>
这⾥给form元素加上了onsubmit()⽅法，它会在“提交”按钮点击的时候被触发，该⽅法⼀定要有return返回值，如果值为false则不进⾏提交，如果为true则提交。
给input type='button’添加onclick事件，验证通过则调⽤submit()⽅法提交
<form id="form1"action="/test"method="post">
<input type="button"value="提交"onclick="checkForm();">
function checkForm(){
var user= ElementById('user').value;
var psw= ElementById('psd').value;
if(...){
//验证不通过
return false;
}
}
使⽤ajax对数据进⾏ 验证后 再提交
<form id="form1"action="/test"method="post">
<input type="submit"value="提交"onclick="login()">
//或者
<button type="button"onclick="login()">提交</button>
<script type="text/javascript">
function login(){
$.ajax({
type:"POST",
dataType:"json",
url:"/users/login",
data:$('#form1').serialize(),//提交的数据
success:function(result){
console.log(result);//打印服务端返回的数据(调试⽤)
sultCode ==200){
alert("提交成功");
}
;
},
error :function(){
alert("提交失败");
}
});
}
</script>
注意：
如果使⽤button，要先进⾏数据验证的话，就必须要将type的值设置为”button”，即表⽰它是⼀个按钮
这⾥提交的数据’data’，使⽤了serialize()⽅法将提交的表单值序列化（即a=1&b=2格式），当然你也可以写成：
{
"username":username,
"password":password
}
表单的 input、select 默认的样式是不同的，所以就造成了width设置的⼀样，但就是对不齐，可以设置box-sizing:border-box；来解决不⼀致问题
补充
表单具有默认的提交⾏为，默认是同步的，同步表单提交，浏览器会锁死（转圈⼉）等待服务端的响应结果。
表单的同步提交之后，⽆论服务端响应的是什么，都会直接把响应的结果覆盖掉当前页⾯。
后来有⼈想到了⼀种办法，来解决这个问题，那边是服务端重定向（服务端重定向针对异步请求⽆效）
消除⾃动填充：通过添加readonly＆onfocus =“veAttribute（'readonly'）;
解决了这个问题。
<input type="password"name="Password"autocomplete="off"readonly
onfocus="veAttribute('readonly');">

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。