HTML：如何製作一個包含文字+圖片的提交按鈕？

我想要一個提交按鈕，其中包含文字和的圖像。這可能嗎？HTML：如何製作一個包含文字+圖片的提交按鈕？

我能得到確切的外觀我想與代碼看起來像：

<button type="button"> 
<img src="save.gif" alt="Save icon"/> 
<br/> 
Save 
</button>

...但我還沒有找到辦法讓那些對我的形式之一。有沒有辦法做到這一點

<input type="submit" ...>

元素？還是我被迫去圖片或文字的方式？感謝您的幫助！

來源

2009-10-25 David

http://stackoverflow.com/a/12435570/1491212 – 2013-07-09 11:30:31

input type="submit"是在表單中提交提交按鈕的最佳方式。這樣做的缺點是你不能把除文本以外的任何東西作爲它的值。按鈕元素可以包含其他HTML元素和內容。

嘗試在您的button元素（source）中將type="submit"代替爲type="button"。然而

要特別注意從該頁面的以下內容：

如果您在HTML表單中使用按鈕元素，不同的瀏覽器將提交不同的值。 Internet Explorer將提交<button>和</button>標記之間的文本，而其他瀏覽器將提交value屬性的內容。使用輸入元素在HTML表單中創建按鈕。

來源

2009-10-25 19:56:12 adrianbanks

HTTP：// stackoverflow.com/a/12435570/1491212 – 2013-07-09 11:31:24

讓我們假設你的圖像是一個16x16.png icon icon.png使用CSS的強大功能！

CSS：

input#image-button{ 
    background: #ccc url('icon.png') no-repeat top left; 
    padding-left: 16px; 
    height: 16px; 
}

HTML：

<input type="submit" id="image-button" value="Text"></input>

這將使圖像到文本的左側。

來源

2009-10-25 20:28:31

你真正貼近自己回答

<button type="submit"> 
<img src="save.gif" alt="Save icon"/> 
<br/> 
Save 
</button>

或者，你可以刪除該類型屬性

<button> 
<img src="save.gif" alt="Save icon"/> 
<br/> 
Save 
</button>

來源

2009-10-25 20:49:12 elzapp

非常有趣。我已經能夠讓我的形式來工作，但所得的電子郵件顯示：

imageField_x：80 imageField_y：17

在我得到的電子郵件的底部。

這是我的按鈕代碼。

<tr> 
     <td><input type="image" src="images/sendmessage.gif"/></td> 
     <td colspan="2"><input type="image" src="images/printmessage.gif"onclick="window.print()"></td> 
    </tr>

也許這會幫助你和我。

:-)

來源

2009-10-27 18:52:33 MoJo

<input type="button" id="btnTexWrapped" style="background:url('http://i0006.photobucket.com/albums/0006/findstuff22/Backgrounds/bokeh2backgrounds.jpg');background-size:30px;width:50px;height:3em;" />

變更輸入的風格元素，你想要得到你需要的按鈕。

我希望它有幫助。

來源

2012-10-26 01:45:32

我發現了一個非常簡單的解決方案！如果你有一個表單，你想有一個自定義提交按鈕，你可以使用一些這樣的代碼：

<button type="submit"> 
    <img src="login.png" onmouseover="this.src='login2.png';" onmouseout="this.src='login.png';" /> 
</button>

或者只是把它引導到一個頁面的鏈接。

來源

2013-01-02 18:13:36 LucaSpeedStack

如果dingbats/icon fonts是一個選項，您可以使用它們而不是圖像。

下面使用的

在HTML：

<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.no-icons.min.css" rel="stylesheet"> 
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet"> 

<form name="signin" action="#" method="POST"> 
    <input type="text" name="text-input" placeholder="&#xf183; your username" class="stylish"/><br/> 
    <input type="submit" value="&#xf090; sign in" class="stylish"/> 
</form>

在CSS：

.stylish { 
    font-family: georgia, FontAwesome; 
}

jsFiddle

通知的font-family規範：所有字符/代碼點會使用georgia，回落至FontAwesome任何代碼點georgia對於不提供的字符。 georgia不提供private use range,exactly where FontAwesome has placed its icons中的任何字符。

來源

2013-07-02 15:39:02 Abdull

請參閱此鏈接。你可以有你只想使用JavaScript提交表單，任何按鈕

http://www.w3schools.com/jsref/met_form_submit.asp

來源

2013-08-06 21:09:33 user1363516

你可以這樣做：

HTML代碼：

<form action="submit.php" method="get" id="form">   
    <a href="javascript: submitForm()">   
    <img src="save.gif" alt="Save icon"/>   
    <br/>   
    save   
    </a>   
    </form>

注意：您可以使用和行動你選擇的方法和Id以及從href =「javascript：結尾到（）」開始的任何文本，但要確保當我輸入相同的東西，如id和一些文本時，和HTML代碼）。

Java腳本代碼：

var form=document.getElementById("form");   
    function submitForm()   
    {   
    form.submit();  
    }

來源

2013-11-07 04:11:38 user2921779

下面是一個其他例子：

<button type="submit" name="submit" style="border: none; background-color: white">

來源

2017-08-24 18:54:57 Abdi

HTML：如何製作一個包含文字+圖片的提交按鈕？

回答

相關問題