如何使用圖像作爲提交按鈕？

有人可以幫助改變這個以合併名爲BUTTON1.JPG而不是標準submit按鈕的圖像嗎？如何使用圖像作爲提交按鈕？

<form id='formName' name='formName' onsubmit='redirect();return false;'> 
    <div class="style7"> 
     <input type='text' id='userInput' name='userInput' value=''> 
     <input type='submit' name='submit' value='Submit'> 
    </div> 
</form>

來源

2013-01-07 Rolf

我只是想從代碼來區分。我不知道他們已經這樣做了。 – Rolf

使用image類型輸入：

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

完整的HTML：

<form id='formName' name='formName' onsubmit='redirect();return false;'> 
    <div class="style7"> 
     <input type='text' id='userInput' name='userInput' value=''> 
     <input type="image" name="submit" src="/Button1.jpg" border="0" alt="Submit" /> 
    </div> 
</form>

來源

2013-01-07 16:22:45

賈斯廷，最後一個問題，我如何將'userInput'值放到下一頁的表格中以便它可以被提交與下一個表格。我想要隱藏價值。 – Rolf

這是一個真正加載的問題，因爲我不知道你正在使用什麼編程語言或框架。最好將其作爲一個不同的問題發佈，並提供這些信息（例如，ASP.NET，ASP，PHP等），以便專業人士在該領域能夠更全面地幫助您。但首先，我會環顧網站，看看問題是否曾被問過。 –

使用CSS：

input[type=submit] { 

background:url("BUTTON1.jpg"); 

}

對於HTML：

<input type="submit" value="Login" style="background:url("BUTTON1.jpg");">

來源

2013-01-07 16:18:43

我在哪裏粘貼？我需要刪除什麼？（我不是一個程序員） – Rolf

*觀察*：這是不是一個網站的長期利益最大的利益，整個程序員教非程序員如何生存，而不僱用程序員... –

hahahahha：PI也要發佈那個答案你發佈，但我認爲這是不是一個好主意，告訴新的程序員使用古老的腳本！我知道，當我開始時，我還不是一個好幫手，但現在我只是更好：D –

<form id='formName' name='formName' onsubmit='redirect();return false;'> 
     <div class="style7"> 
    <input type='text' id='userInput' name='userInput' value=''> 
    <img src="BUTTON1.JPG" onclick="document.forms['formName'].submit();"> 
</div> 
</form>

來源

2013-01-07 16:23:19 yajakass

爲什麼不：

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

來源

2014-10-06 14:39:49

-3

HTML：

<button type="submit" name="submit" class="button"> 
    <img src="images/free.png" /> 
</button>

CSS：

.button { }

來源

2014-10-10 03:59:16 Shaddy

只是重新移動邊界和CSS添加背景圖片

例子：

$("#form").on('submit', function() { 
 
    alert($("#submit-icon").val()); 
 
});

#submit-icon { 
 
    background-image: url("https://pixabay.com/static/uploads/photo/2016/10/18/21/22/california-1751455__340.jpg"); /* Change url to wanted image */ 
 
    background-size: cover; 
 
    border: none; 
 
    width: 32px; 
 
    height: 32px; 
 
    cursor: pointer; 
 
    color: transparent; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form id="form"> 
 
    <input type="submit" id="submit-icon" value="test"> 
 
</form>

來源

2016-10-27 16:49:03

如何使用圖像作爲提交按鈕？

回答

相關問題