誰かがこれを変更して、標準のsubmit
ボタンの代わりにBUTTON1.JPG
という画像を組み込むのを手伝ってもらえますか?
<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>
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="https://jekyllcodex.org/uploads/grumpycat.jpg" border="0" alt="Submit" style="width: 50px;" />
</div>
</form>
何故なの:
<button type="submit">
<img src="mybutton.jpg" />
</button>
CSSを使用:
input[type=submit] {
background:url("BUTTON1.jpg");
}
HTMLの場合:
<input type="submit" value="Login" style="background:url("BUTTON1.jpg");">
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>
<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>