HTML:テキストと画像を含む送信ボタンを作成する方法は?
質問
テキスト 画像を含む送信ボタンが欲しい。これは可能ですか?
次のようなコードで、希望どおりの外観を得ることができます。
<button type="button">
<img src="save.gif" alt="Save icon"/>
<br/>
Save
</button>
...しかし、私は自分のフォーム用にそれらの1つを持つ方法を見つけていません。
でそれを行う方法はありますか<input type="submit" ...>
element?または、画像またはテキストの方法で移動する必要がありますか? ご協力ありがとうございます!
解決
input type="submit"
は、フォームに送信ボタンを配置する最良の方法です。これの欠点は、テキスト以外の値を値として配置できないことです。 button要素には、他のHTML要素とコンテンツを含めることができます。
type="submit"
要素にtype="button"
の代わりにbutton
を入れてみてください( source )。
ただし、そのページから次のことに特に注意してください:
HTMLフォームでボタン要素を使用する場合、ブラウザごとに異なる値が送信されます。 Internet Explorerは
<button>
タグと</button>
タグの間のテキストを送信しますが、他のブラウザーはvalue属性のコンテンツを送信します。 input要素を使用して、HTMLフォームにボタンを作成します。
他のヒント
画像がicon.pngという16x16 .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>
これにより、画像がテキストの左側に配置されます。
dingbats / iconフォントがオプションの場合、画像の代わりに使用できます。
以下では次の組み合わせを使用しています
- アイコンフォント(例:Font Awesome)、
- HTMLの文字エンコード(例:

) - 使用するアイコンのUnicodeコードポイント(たとえば、署名の
font-family
ロゴ)、 - CSS:
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=" your username" class="stylish"/><br/>
<input type="submit" value=" sign in" class="stylish"/>
</form>
CSSの場合:
.stylish {
font-family: georgia, FontAwesome;
}
georgia
の指定に注意してください。すべての文字/コードポイントはFontAwesome
を使用し、コードポイント<=>が文字を提供しない場合は<=>にフォールバックします。 <=>は 私的使用範囲の文字を提供しません。 正確に<=>がアイコンを配置した場所。
自分で答えに本当に近づいている
<button type="submit">
<img src="save.gif" alt="Save icon"/>
<br/>
Save
</button>
または、type-attributeを削除することもできます
<button>
<img src="save.gif" alt="Save icon"/>
<br/>
Save
</button>
非常に簡単な解決策を見つけました!フォームがあり、カスタム送信ボタンが必要な場合は、次のようなコードを使用できます。
<button type="submit">
<img src="login.png" onmouseover="this.src='login2.png';" onmouseout="this.src='login.png';" />
</button>
または単にページのリンクにそれを向けます。
<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;" />
必要なボタンを取得するために、入力スタイル要素を変更します。
お役に立てば幸いです。
このリンクを参照してください。 JavaScriptを使用してフォームを送信するだけのボタンを使用できます
非常に興味深い。 フォームを機能させることはできましたが、結果のメールが表示されます:
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>
これはあなたと私にも役立つかもしれません。
:-)
これを行うことができます:
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 = <!> quot; javascript:から()<!> quotまでの任意のテキストを使用できます。ただし、idやテキストなど同じものを入力するときは、同じ場所(javaスクリプトとHTMLコード)で置換するように入力してください。
javaスクリプトコード:
var form=document.getElementById("form");
function submitForm()
{
form.submit();
}
他の例を次に示します。
<button type="submit" name="submit" style="border: none; background-color: white">