एचटीएमएल: टेक्स्ट + छवि के साथ सबमिट बटन कैसे बनाएं?

Question

मैं एक सबमिट बटन रखना चाहता हूं जिसमें टेक्स्ट और एक छवि शामिल है। क्या यह संभव है?

मुझे लगता है कि तरह लग रहा है सही नज़र कोड के साथ मैं चाहता हूँ प्राप्त कर सकते हैं:

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

... लेकिन मैं अपने रूपों के लिए उन में से एक है के लिए एक रास्ता नहीं मिला है। क्या

<input type="submit" ...> 

तत्व के साथ ऐसा करने का कोई तरीका है? या क्या मुझे छवि या पाठ रास्ते पर जाने के लिए मजबूर किया गया है? आपकी मदद के लिए धन्यवाद!

Answer 1

input type="submit" एक फॉर्म में सबमिट बटन रखने का सबसे अच्छा तरीका है। इसका नकारात्मक पक्ष यह है कि आप टेक्स्ट के अलावा किसी अन्य चीज़ को इसके मूल्य के रूप में नहीं डाल सकते हैं। बटन तत्व में अन्य HTML तत्व और सामग्री हो सकती है।

अपने button तत्व (source) में type="button" के बजाय type="submit" डालने का प्रयास करें।

उस पृष्ठ से निम्नलिखित को हालांकि विशेष ध्यान:

आप एक HTML के रूप में बटन तत्व का उपयोग करते हैं, अलग-अलग ब्राउज़र विभिन्न मूल्यों प्रस्तुत करेगा। इंटरनेट एक्सप्लोरर <button> और </button> टैग के बीच टेक्स्ट सबमिट करेगा, जबकि अन्य ब्राउज़र मूल्य विशेषता की सामग्री सबमिट करेंगे। HTML फॉर्म में बटन बनाने के लिए इनपुट तत्व का उपयोग करें।

Answer 2

मान लें कि आपकी छवि 16x16 .png आइकन है आइकन.png। सीएसएस की शक्ति का उपयोग करें!

सीएसएस:

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

आप वास्तव में इस सवाल का जवाब खुद

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

बहुत दिलचस्प निकाल सकते हैं कर रहे हैं। मैं काम करने के लिए मेरी फार्म प्राप्त करने के लिए सक्षम किया गया है लेकिन इसके परिणाम स्वरूप ईमेल प्रदर्शित करता है:

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 5

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

मुझे एक बहुत ही आसान समाधान मिला है! आप एक रूप है और आप एक कस्टम करना चाहते हैं सबमिट बटन आप इस तरह कुछ कोड का उपयोग कर सकते हैं:

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

या सिर्फ एक पेज के लिए एक कड़ी के लिए यह प्रत्यक्ष।

Answer 7

dingbats/icon fonts एक विकल्प है, तो आप छवियों के बजाय उनका उपयोग कर सकते हैं।

निम्नलिखित

character encodings in HTML (e.g. &#xf090)

the Unicode code point of the icon you want to use (e.g. &#xf090 for the sign in logo),

• an icon font (e.g. Font Awesome) का एक संयोजन का उपयोग करता है
• सीएसएस:

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> 

सीएसएस में:

.stylish { 
    font-family: georgia, FontAwesome; 
} 

jsFiddle

सूचना font-family विनिर्देश: सभी पात्रों/कोड अंक किसी भी कोड अंक georgia के लिए georgia का उपयोग करेगा, FontAwesome पर वापस गिरने के लिए पात्रों प्रदान नहीं करता है। georgiaprivate use range, exactly where FontAwesome has placed its icons में कोई भी वर्ण प्रदान नहीं करता है।

Answer 8

कृपया इस लिंक को देखें। आप किसी भी बटन तुम सिर्फ जावास्क्रिप्ट का उपयोग करना चाहते हैं प्रपत्र प्रस्तुत करने के लिए हो सकता है

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

Answer 9

आप ऐसा कर सकते हैं:

एचटीएमएल कोड:

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

नोट: यदि आप उपयोग कर सकते हैं कार्रवाई और आपकी पसंद और आईडी की विधि और href = "जावास्क्रिप्ट: और समाप्त होने()" से शुरू होने वाला कोई भी पाठ, लेकिन यह सुनिश्चित कर लें कि जब मैं वही चीजें टाइप करता हूं जैसे आईडी और कुछ पाठ जो आप अपने स्थान पर उसी स्थान पर टाइप करते हैं (जावा स्क्रिप्ट और एचटीएमएल कोड)।

जावा स्क्रिप्ट कोड:

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

Answer 10

यहाँ एक अन्य उदाहरण है:

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