HTML:كيفية جعل زر مع نص + صورة ؟

Question

وأود أن يكون لها زر الإرسال الذي يحتوي على النص و صورة.هل هذا ممكن ؟

يمكنني الحصول على نظرة بالضبط أريد مع رمز التي تبدو مثل:

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

...ولكن لم أجد طريقة واحدة من تلك النماذج.هل هناك طريقة للقيام بذلك مع

<input type="submit" ...> 

العنصر ؟ أو أنا اضطر للذهاب صورة أو نص الطريقة ؟ شكرا على مساعدتكم!

Answer 1

وinput type="submit" هو أفضل طريقة لجعل زر إرسال في نموذج. الجانب السلبي من هذا هو أنه لا يمكن وضع أي شيء آخر غير النص كقيمة لها. العنصر زر يمكن أن تحتوي على عناصر HTML الأخرى والمحتوى.

ومحاولة وضع type="submit" بدلا من type="button" في العنصر button الخاص بك ( مصدر ).

وإيلاء اهتمام خاص لكن لما يلي من تلك الصفحة:

<اقتباس فقرة>   

إذا كنت تستخدم عنصر زر في شكل HTML، ومختلف المتصفحات تقديم قيم مختلفة. سوف إنترنت إكسبلورر تقديم النص بين <button> و</button> العلامات، في حين المتصفحات الأخرى ستقدم محتوى السمة القيمة. استخدام عنصر المدخلات لإنشاء أزرار في شكل HTML.

Answer 2

ودعونا نقول صورتك رمز ل16X16 بابوا نيو غينيا ودعا icon.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>

وهذا سوف يضع الصورة على يسار النص.

Answer 3

في حالة دينغ باتس/رمز الخطوط هي الخيار ، يمكنك استخدامها بدلا من الصور.

التالية يستخدم مزيج من

• رمز الخط (على سبيل المثالالخط ممتاز),
• حرف ترميزات في HTML (مثل &#xf090)
• نقطة رمز Unicode الرمز الذي تريد استخدامه (على سبيل المثال &#xf090 عن تسجيل الدخول الشعار),
• 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="&#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 وقد وضعت الرموز.

Answer 4

وأنت قريب حقا أن الجواب نفسك

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

وأو يمكنك إزالة مجرد نوع السمة

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

Answer 5

ولقد وجدت الحل السهل جدا! إذا كان لديك نموذج وكنت تريد أن يكون العرف تقديم زر يمكنك استخدام بعض الرموز مثل هذا:

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

وأو مجرد توجيهها إلى ارتباط صفحة.

Answer 6

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

وعناصر النمط تغيير المدخلات كما كنت ترغب في الحصول على زر التي تحتاج إليها.

وآمل أن كان مفيدا.

Answer 7

يرجى الرجوع إلى هذا الرابط. هل يمكن أن يكون أي الزر الذي تريد مجرد استخدام جافا سكريبت لتقديم النموذج

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

Answer 8

ومثيرة جدا للاهتمام. لقد كنت قادرا على الحصول على شكل لي للعمل ولكن يترتب على ذلك من عرض البريد الإلكتروني:

و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>

وربما هذا سوف يساعد لي ولكم أيضا.

: -)

Answer 9

ويمكنك القيام بذلك:

كود HTML:

    <form action="submit.php" method="get" id="form">        
    <a href="javascript: submitForm()">        
    <img src="save.gif" alt="Save icon"/>        
    <br/>        
    save        
    </a>        
    </form>        

ملحوظة: يمكنك استخدام والعمل وطريقة اختيارك ورقم وأي نص بدءا من أ href = "جافا سكريبت: وتنتهي إلى ()" ولكن تأكد أنني عندما اكتب نفس الأشياء مثل الهوية وبعض النص الذي اكتب في الاستبدال في نفس المكان (جافا سكريبت ورمز HTML).

وكود جافا سكريبت:

    var form=document.getElementById("form");        
    function submitForm()        
    {        
    form.submit();       
    }         

Answer 10

وهنا مثال آخر:

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