<form method =「link」>或<a>？有什麼不同？

我saw，我們可以這樣寫：<form method =「link」>或<a>？有什麼不同？

<form method="link" action="foo.html" > 
<input type="submit" /> 
</form>

做一個「鏈接按鈕」。

但我知道，我們可以這樣寫：

<a href="foo.html" ><input type="button" /></a>

這也將這樣做。

有什麼區別？他們的瀏覽器兼容性如何？

來源

2012-07-20 Mageek

如果你正在創建一個看起來像一個按鈕的鏈接，這看起來像一個CSS的工作。 – ajm 2012-07-20 15:34:17

在我意識到的情況下，在'

您鏈接到的頁面有誤。沒有method="LINK"值。這將導致表單回退到默認方法GET，該方法無論如何都等同於具有href屬性的錨元素。

<form method="GET" action="foo.html"> 
    <input type="submit" /> 
</form>

這與您的示例相同，但是有效;並相當於：

<a href="foo.html">

您應該使用語義來確定實現表單的方式。由於沒有表單字段供用戶填寫，因此這不是真正的表單，因此您無需使用<form>即可獲得該效果。

何時使用一個GET形式的一個例子是一個搜索框：

<form action="/search"> 
    <input type="search" name="q" placeholder="Search" value="dog" /> 
    <button type="submit">Search</button> 
</form>

上述允許訪問者輸入自己的搜索查詢，而該錨元件並不：

<a href="https://stackoverflow.com/search?q=dog">Search for "dog"</a>

然而，當提交/點擊時，兩者都將進入相同的頁面（假設用戶不改變第一個文本字段

順便說一句，我用下面的CSS讓看起來像按鈕鏈接：

button, 
.buttons a { 
    cursor: pointer; 
    font-size: 9.75pt; /* maximum size in WebKit to get native look buttons without using zoom */ 
    -moz-user-select: none; 
    -webkit-user-select: none; 
    -webkit-tap-highlight-color: transparent; 
} 
.buttons a { 
    margin: 2px; 
    padding: 3px 6px 3px; 
    border: 2px outset buttonface; 
    background-color: buttonface; 
    color: buttontext; 
    text-align: center; 
    text-decoration: none; 
    -webkit-appearance: button; 
} 
button img, 
.buttons a img { 
    -webkit-user-drag: none; 
    -ms-user-drag: none; 
} 
.buttons form { 
    display: inline; 
    display: inline-block; 
}

來源

2012-07-20 15:30:59

@DavidPassmore：因爲我從來沒有聽說過它，我試圖找到它.. HTML 4.01規範當然沒有定義它，MDN也沒有提到它。這個定義在哪裏？ – Evert 2012-07-20 15:38:36

+1額外的CSS :) – varela 2012-07-20 15:48:31

所有提到的方法達到同樣的效果，除非它們包含多個參數，如：

<input type="button" value="Cancel"> 
<input type="button" value="Submit">

對於參考我使用：

<form> 
<INPUT TYPE='button' onClick="parent.location='location'"> 
</form>

對於按鈕鏈路

來源

2012-07-20 15:31:34

第二種情況不會在A標籤內處理添加輸入參數。它只會跟在href後，而表單會添加所有輸入來請求GET字符串。

<form action='http://localhost/?' method='get'><input type="text" name="test"><input type="submit" value="GO"/></form>

和

<a href='http://localhost/?'><input type="text" name="test"><input type="submit" value="GO"/></a>

會工作在功能不同

來源

2012-07-20 15:32:24 varela

謝謝。如果我不需要論證，我應該選擇哪一個？（主要用於兼容性） – Mageek 2012-07-20 15:40:42

如果您只需要點擊按鈕，請使用帶有CSS或按鈕的錨點，並使用onclick。如果它的行爲像一個帶有輸入的表單，請使用表單。 – varela 2012-07-20 15:43:50

但無論如何，@尼古拉斯是正確的，這是正確的方法得到。 – varela 2012-07-20 15:46:22

差異。

雖然是的，但它們的表現有點像另一個，仍然有一些原因使用元素來表示它們的意思。大多數情況下，您會失去使用按鈕鏈接的功能;例如，您不能右鍵單擊並在新選項卡或窗口中打開。

還要考慮語義和規格：按鈕元素（無論使用哪種變體; <input type="button">或<button></button>）都是爲表單使用而設計的。

來源

2012-07-20 15:32:52

使用<a name="markname"></a>，您可以使用URL（例如， http://example.com/index.html#markname。我不認爲這種形式或意見是這樣做的。我認爲，對於使用<input type="button" window.location.href='foo.html'/>，JavaScript將不得不被激活。另外，<form>s通常會導致換行，<a>s不會。

來源

2012-07-20 15:36:30 PhilMasterG

<form method =「link」>或<a>？有什麼不同？

回答

相關問題