網頁表單提交方式有哪些

這篇文章主要介紹了網頁表單提交方式有哪些，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

大家先來看看表單提交的幾種方式：
1、<!--通用提交按鈕-->
<input type="submit" value="提交">
2、<!--自定義提交按鈕-->
<button type="Submit">提交</button>
3、<!--圖像按鈕-->
<input type="image" src = "btn.png">
說明：用戶提交按鈕或圖像按鈕時，就會提交表單。使用<input>或<button>都可以定義提交按鈕，只要將其特性的值設置為“submit”即可，而圖像按鈕則是通過<input>的type特性值設置為”image”來定義的。因此，只要我們單擊一下代碼生成的按鈕，就可以提交表單。
4、阻止表單提交
只要在表單中存在上面列出的任何一種按鈕，那么相應表單控件擁有焦點的情況下，按回車鍵就可以提交表單。如果表單里沒有提交按鈕，按回車鍵不會提交表單。
以這種方式提交表單時，瀏覽器會在將請求發送給服務器之前觸發submit事件。這樣，我們就有機會驗證表單數據，并據以決定是否允許表單提交。阻止這個事件的默認行為就可以取消表單提交。例如，下面代碼會阻止表單提交：

代碼如下:

var EventUtil = {
addHandler: function (element, type, handler) {
if (element.addEventListener) {
element.addEventListener(type, handler, false);
} else if (element.attachEvent) {
element.attachEvent("on" + type, handler);
} else {
element["on" + type] = handler;
}
},
getEvent: function (event) {
return event ? event : window.event;
},
preventDefault: function (event) {
if (event.preventDefault) {
event.preventDefault();
} else {
event.returnValue = false;
}
}
}；
var form = document.getElementById("myForm");
EventUtil.addHandler(form, "submit", function () {
//取得事件對象
event = EventUtil.getEvent(event);
//阻止默認事件
EventUtil.preventDefault(event);
});

調用preventDefault()方法阻止了表單提交。一般來說，在表單數據無效而不能發送給服務器時，可以使用這一技術。
5、在JavaScript中，以編程方式調用submit()方法也可以提交表單。
這種方式無需表單包含提交按鈕，任何時候都可以正常提交表單。來看一個例子：
var form = document.getElementById("myForm");
//提交表單
form.submit();
在以調用submit()方法的形式提交表單時，不會觸發submit事件，因此要記得在調用此方法之前先驗證表單數字據。
提交表單時可能出現的最大問題，就是重復提交表單。在第一次提交表單后，如果長時間沒有反映，用戶可能會變得不耐煩。這時候，他們也許會反復單擊提交按鈕。結果往往很麻煩（因為服務器要處理重復請求），或者造成錯誤（如果是下了訂單，那么可能會多定好幾份）。
解決這一問題的辦法有兩個：
在第一次提交表單后就禁用提交按鈕；
利用onsubmit事件處理程序取消后續的表單提交操作。
接下來將詳細介紹通過form提交的幾種方法
方法一：利用form的onsubmit()函數（經常使用），代碼如下：

代碼如下:

<script type="text/javascript">
function validateForm(){
if(document.reply.title.value == ""){ //通過form名來獲取form
alert("please input the title!");
document.reply.title.focus();
return false;
}
if(document.forms[0].cont.value == ""){ //通過forms數組獲取form
alert("please input the content!");
document.reply.cont.focus();
return false;
}
return true;
}
<form name="reply" method="post" onsubmit="return validateForm( );">
<input type="text" name="title" size="80" />

<textarea name="cont" cols="80" rows="12"></textarea>

<input type="submit" value="提交" >
</form>
注意：
1.onsubmit屬性內容一定要有return關鍵字，否則函數會直接執行，不會返回
2.validateForm一定要返回一個boolean類型的返回值
3.提交按鈕要寫成submit類型的

方法二：利用input類型為submit組件的onclick()函數
將上面form標簽中的onsubmit="return validateForm()"屬性，去掉。
為“提交”按鈕添加onclick事件，如下：
<input type="submit" value="提交" onclick="return validateForm();">
方法三：利用button組件的onclick()函數，手動提交，代碼如下：

代碼如下:

<script type="text/javascript">
function modifyItem() {
if (trim(document.getElementById("itemName").value) == "") {
alert("物料名稱不能為空！");
document.getElementById("itemName").focus();
return;
}
with (document.getElementById("itemForm")) {
method = "post";
action = "item.do?command=modify&pageNo=${itemForm.pageNo}";
submit();
}
}
//返回
function goBack() {
window.self.location = "item.do?command=list&pageNo=${itemForm.pageNo}";
}
</script>
<form name="itemForm" id="itemForm">
<input name="itemNo" type="text" id="itemNo" value="${ item.itemNo }" >
<input name="itemName" type="text" id="itemName" value="${ item.itemName }" >
<input name="btnModify" type="button" id="btnModify" value=“修改" onclick="modifyItem()">
</form>
注意：
1.提交時，設置form的action和methods屬性，然后利用form.submit()函數提交。

感謝你能夠認真閱讀完這篇文章，希望小編分享的“網頁表單提交方式有哪些”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，更多相關知識等著你來學習!