web-dev-qa-db-ja.com

HTML：テキストと画像を含む送信ボタンを作成する方法

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

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

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

...しかし、私は自分のフォーム用にそれらの1つを持つ方法を見つけていません。それを行う方法はありますか

<input type="submit" ...>

素子？または、私はイメージまたはテキストの方法を強制されますか？ご協力いただきありがとうございます！

htmlimagebuttoninputsubmit
33
David

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

type="submit" の代わりに type="button"はbutton要素にあります（ source ）。

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

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

27
adrianbanks

あなたの画像が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>

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

57
Adam Bard

dingbats/icon fonts がオプションの場合、画像の代わりにそれらを使用できます。

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

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

jsFiddle

font-family仕様：すべての文字/コードポイントはgeorgiaを使用し、すべてのコードポイントに対してFontAwesomeにフォールバックしますgeorgiaは文字を提供しません。 georgiaは に文字を提供しませんプライベート使用範囲 、 まさにFontAwesomeはアイコンを配置しました 。

11
Abdull

あなたは本当に自分の答えに近い

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

または、タイプ属性を削除することもできます

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

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

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

または、単にページのリンクに誘導します。

4
LucaSpeedStack

このリンクを参照してください。 JavaScriptを使用してフォームを送信するだけの任意のボタンを使用できます

http://www.w3schools.com/jsref/met_form_submit.asp

2
user1363516

_<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;" />

必要なボタンを取得するために、入力スタイル要素を変更します。

お役に立てば幸いです。

2
Abdallah Barghouti

とても興味深い。フォームを機能させることができましたが、結果の電子メールが表示されます：

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>

たぶんこれはあなたと私にも役立つでしょう。

:-)

1
MoJo

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

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();       
    }
1
user2921779

他の例を次に示します。

<button type="submit" name="submit" style="border: none; background-color: white">
0
Abdi