4

画像を使用して送信ボタンのスタイルを設定しようとしています。CSS を使用しますが、ボタンのデザインが複雑すぎます。ボタンに背景画像を追加しようとしましたが、画像の位置が適切ではありませんでした。私も使ってみました

<input type="image" src="myimage.png">

残念ながら、これは送信ボタンではないため、機能しません。私は可能な限りすべてを調べて試しましたが、ボタンをフォームに送信させる解決策が見つかりません。ありがとう。

4

5 に答える 5

4

<input type="image">期待どおりに動作しない場合は、代わりに試してください

<button type="submit"><img src="myimage.png"></button>

しかし、上記のコメントとして書いたように、コードも正常に動作するはずです

于 2012-04-26T08:34:40.163 に答える
3

送信ボタンにはさまざまな可能性があります。

<input type="image">
<input type="submit">
<button></button> <!-- no type needed, since submit is the default type -->

これらはすべて送信ボタンです。あなたに最も適したものを選んでください。

ボタンの間に画像を配置するか、背景画像を使用して適切に配置するかを選択できるようになりました。

背景画像付きのボタンの例:

button {
  background:url(data:image/gif;base64,R0lGODlhEgASAPYAAAAA/2NFB4tsE7KKCtCiDbWMCpFwDotwGdCgAe65FvjFKvjGLffDJNuqC5V1EaqJGPjHMPbKPvfOTLuRCo5yG+q3F/bEKG1SFdGjBvrcbeGuD2NFCY5wFfG+JPfNRpp1CLSOEfnJNPbOS/rPRsCSBmdJC8+mGvnLOv3ni/3nj/zkgPrUU9uqDWNCA9GoHfjSVfvie/rXW96tEmVHCreQFPnLP/fTXfrbdPzihf3qlP3mhsSYD5VzEPXEOffSWvrbcfzigP3rkqJ8DXFWFd2tFPrQSfnYYvvfdQAAAO7CNGVHDJh3DfLCK/nSUPraZ/zjfv3qkvzlhfvecqiCD2pNEL6TC/fGLvrSTfrbav3pjv3ojPzlgv3TT82kIWpOEZ55C+OyFfnMPvzdb/zda/3XWe/FOqiDEGpKAWZJDXNWEZt2B8KXDt6vHd+yIcifHKN+EXRTAmtQFmlMD2JCBWdIBmdIAQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH/C05FVFNDQVBFMi4wAwEAAAAh+QQF+gAAACwAAAAAEgASAAYH/4AAgoN1dHNzcnGDi4Rwb25tbGtqaWiMgmdmZWRjYmNkYWBfXoxnXVxiW1pZWltYV1ZVVIRTXFJRWVC6WU9OTUxLSoJwSWO4SEi6yEdGRURDAHRCV0+5yFBByEA/Pj08SnQ7ZDrWSDlQyDg3NjU0M3MyMTrK5lnIMFgvNS4tLSwrKqCcS4FiC5AnUoxcOWGiRQkSI6ToQKFjy5OLR7DEEBECxBwvH6zEQALjIgwYGUd66MBhA4A0Gkb4QJIhgxQsTkaKOIHhgiAlXyyIaIKsKBIPNSpQmDPIy4QOYUSIkCDCQwQIFR7MYCTHQQMGC6woYJAAwYGtl2ZcMFCAAIEBAg0utLi0aMOGfgHmMgoEACH5BAkFAAAALAYABQAGAAMABgcMgFCCg1BBhodBgoaBACH5BAkKAAAALAYABQAGAAMABgcOgEhIUFCCgkFBhoOFSIEAIfkEAQUAAAAsBgAFAAYAAwAGBwyAUIKDUEGGh0GChoEAOw==) no-repeat 5px center;
  padding:5px 5px 5px 27px;
}
<button type='submit'>Submit</button>

（またはフィドルとして）

于 2012-04-26T08:51:54.077 に答える
2

ボタン要素を使用し、css でスタイルを設定します。テキストを省略しないでください。フォームは画像や CSS なしでアクセスできる必要があります。

<button type='submit'>Informative submit text</button>

button {
    background-image:url('myimage.png');
}
于 2012-04-26T08:40:37.497 に答える
1

誰かが新しいhtml5の良い答えを必要とする場合:

<button id='' name=''  value='' ><img src='img.jpg' /></button>
于 2016-11-17T23:50:06.840 に答える
0 
<input type="image" src="myimage.png">

また

<input type="submit" style="background:url(myimage.png)">
于 2012-04-26T08:53:08.523 に答える