38

テキストと画像を含む送信ボタンが欲しいです。これは可能ですか？

次のようなコードで、必要な正確な外観を得ることができます。

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

...しかし、フォームにそれらのいずれかを含める方法が見つかりませんでした。でそれを行う方法はありますか

<input type="submit" ...>

エレメント？それとも、画像やテキストを使わざるを得ないのでしょうか?

4

9 に答える 9

61

画像が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>

これにより、画像がテキストの左側に配置されます。

于 2009-10-25T20:28:31.053 に答える
30

input type="submit"フォームに送信ボタンを配置する最良の方法です。これの欠点は、テキスト以外のものを値として指定できないことです。ボタン要素には、他の HTML 要素とコンテンツを含めることができます。

要素 ( sourcetype="submit" )の代わりに入れてみてtype="button"ください。button

ただし、そのページの次の点に特に注意してください。

HTML フォームでボタン要素を使用する場合、異なるブラウザーは異なる値を送信します。Internet Explorer は<button>と</button>タグの間のテキストを送信しますが、他のブラウザーは value 属性のコンテンツを送信します。input 要素を使用して、HTML フォームでボタンを作成します。

于 2009-10-25T19:56:12.713 に答える
11

絵文字/アイコン フォントがオプションの場合は、画像の代わりにそれらを使用できます。

以下の組み合わせを使用します

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;
}

jsフィドル

仕様に注意してくださいfont-family: すべての文字/コード ポイントは を使用georgiaしFontAwesomeますgeorgia。アイコンを配置した正確な場所に、私的使用範囲内georgiaの文字を提供しません。FontAwesome

于 2013-07-02T15:39:02.357 に答える
10

あなたは自分自身で答えに本当に近づいています

<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>
于 2009-10-25T20:49:12.210 に答える
5

とても簡単な解決策を見つけました！フォームがあり、カスタム送信ボタンが必要な場合は、次のようなコードを使用できます。

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

または、ページのリンクに誘導するだけです。

于 2013-01-02T18:13:36.367 に答える
2

<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-26T01:45:32.610 に答える
1

あなたはこれを行うことができます：

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 や入力したテキストなど、同じものを入力するときに必ず入力してください。同じ場所 (java スクリプトと HTML コード) で置き換えます。

Java スクリプト コード:

    var form=document.getElementById("form");        
    function submitForm()        
    {        
    form.submit();       
    }
于 2013-11-07T04:11:38.690 に答える