表單提交按鈕input和button、a的差異


現在普遍的在網頁中,表單提交數據的按鈕最常見實用有三種,一種是input,一種是button,最后一種,是其他如a標簽,div標簽,span標簽代替而來。在以前的日子里,大家都習慣於用input,因為他直接擁有type=submit,而button沒有,它更適合於表達 button。
然而。。。

首先我們說說:input標簽;這個最常見了,不多說:當type="submit"時,提交表單數據!

button標簽:經過測試:在<IE8瀏覽器,button的默認type="button",所以我們要使它能夠進行表單數據提交需要設置type="submit";而從IE8開始就默認為type="submit",也算是微軟一步一步的前進吧。

你可以自己去測試:

先創建一個php文件demo.php, 用來接收表單數據:

<?php
var_dump($_POST);
?>

 再創建一個html文件demo.html, 用來顯示表單:

<form method="post" action="demo.php">
<input type="submit" name="foo" value="提交">
<input type="submit" name="bar" value="保存">
</form>

<form method="post" action="demo.php">
<button type="submit" name="foo" value="foo_value">提交</button>
<button type="submit" name="bar" value="bar_value">保存</button>
</form>

使用Firefox依次瀏覽,就能看到input和button的區別:input提交按鈕顯示的文字就是value,而button提交按鈕顯示的文字 和value是獨立的,從這個意義上來看,button更有表現力,是更值得推薦的提交按鈕實現方式。

還有關於它們在不同瀏覽器下顯示的效果,也會影響我們的選擇(下面就會介紹用其他標簽,更好維持表現層的統一):這個主要是ff和opera下line-height對input['button'],button不起作用

小結:從理論上來看,button形式的提交按鈕優於input形式的提交按鈕。但如果考慮瀏覽器通用性,很多時候還是只能使用input形式的提交按鈕。

再來說:a標簽(以下為轉載:)

之前看過一些文章,說是用a標簽來代替submit按鈕更好一些,因為submit按鈕在IE6下會有一些兼容的問題,不好統一,而且input的行高在各瀏覽器參差不齊,還不能用line-height控制,在按鈕有一些交互效果的時候,a標簽更容易實現,hover效果便可,所以許多前端喜歡用a標簽來代替input。

    但是涉及到一點,input submit可以用來提交表單的值,而a標簽似乎不太好傳值,所以好多程序要求前端開發人員再把a標簽改成input的,后來經過查找,發現a標簽是一樣的可以提交表單的,下面附上方法,也希望那些被程序要求把頁面改來改去的前端人員告訴程序a標簽一樣可以提交表單的。
  a標簽提交表單的方式其實很簡單的,首先你寫一個方法
   function tosubmit(){
  var myform=document.getElementByIdx_x("myform");
  myform.submit();
  }
  然后用這個方法提交提交
  這樣就可以提交表單了,是不是很簡單。
----------------------------------------------------------------------------------------------------------


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM