提交按鈕圖片 - 哪種方式最好？

爲了使用圖像作爲表單的提交按鈕，我遇到了兩種方法，並想知道哪一個是正確的/最佳實踐。提交按鈕圖片 - 哪種方式最好？

版本1：

<button type="submit"> 
    <img src="mybutton.jpg" alt="Submit" /> 
</button>

版本2：

<input type="image" src="mybutton.jpg" border="0" alt="Submit" />

我個人覺得，第一個版本是更好，因爲它使語義意義，有一種類型的「提交」。在第二個版本中，它說輸入是類型「圖像」，這對我來說並不意味着對人類很重要。

我應該選擇哪一個？

來源

2014-10-06 volume one

您還可以在圖像onClick事件上使用Javascript，以使用this.submit（）提交表單。這有助於當您使用非標準圖像（它不會適合放入按鈕）。 – Tim 2014-10-06 14:48:43

我不喜歡使用圖像，不確定你想要如何設計你的按鈕樣式，但如果圖像包含字形，那麼你可以使用網絡字體，或者如果你的按鈕很花哨，你可以使用一些設計CSS – 2014-10-06 14:49:00

我認爲使用帶CSS的背景圖片是最好的方法 – 2014-10-06 15:17:27

就我個人而言，我會將它設置爲背景而不是按鈕內的圖像。所以你會得到以下。

<button type="submit" class="styledButton></button> 

<style> 
     .styledButton { 
      background: url('mybutton.jpg') no-repeat; 

     } 
</style>

來源

2014-10-06 14:46:48

是的我認爲這似乎更好 – 2014-10-06 15:16:38

我個人使用CSS來應用圖像提交按鈕

背後的原因是這樣的：你不需要到處寫相同的代碼，只需調用css class將足以

而不是上面提到的2個版本。

試試這個：

<div id="submitForm"> 
<input type="submit" value="Submit" name="submit"> 
</div>

CSS

div#submitForm input { 
background: url("mybutton.jpg") no-repeat scroll 0 0 transparent; 
color: #000000; 
cursor: pointer; 
font-weight: bold; 
height: 20px; 
padding-bottom: 2px; 
width: 75px; 
}

來源

2014-10-06 14:47:46

@先生阿里恩我已經做了。 – 2014-10-06 14:52:02

是的我同意這個版本更好。 – 2014-10-06 15:16:57

這只是一個風格問題，沒有一個真正的「更好」的方式，使用方法，你感覺你的代碼用更乾淨。

我的個人意見是，所有的表單元素應該是「<輸入>」，因爲這對我來說更自然。我不喜歡它，當事情做同樣的事情（在這種情況下是表單元素）看起來不同的是有不同的語法，所以我按照我個人的標準來聲明這一點。

然而，最令人討厭的是，當提交表單時，圖像或< input type =「image」>將不會傳遞name =「」和value =「」，這就是爲什麼使用incase將多個「按鈕」裝飾爲表單中的圖像，並且您想知道哪個按鈕被按下。

在這種情況下，最好的意見是使<輸入類型=「提交」>，並讓它看起來像使用CSS的圖像。

但是，我對這個問題的陳述是：以你最好的方式去做，但保持這種方式，不要轉過身來。決定一個「標準」並始終使用它。將使您的代碼更加嚴格，更易於閱讀。

來源

2014-10-06 14:48:08 Steini

提交按鈕圖片 - 哪種方式最好？

回答

相關問題