Different Types of Button in HTML Forms. Simply Explained

Different Types of Button in HTML Forms: Buttons का सबसे ज्‍यादा प्रयोग किसी HTML Form को Send या Submit करने के लिए किया जाता है। हालांकि हम इसका प्रयोग Form को Reset अथवा Clear करने के लिए भी कर सकते हैं या फिर किसी Client-Side Script को Trigger करने के लिए भी कर सकते हैं। हम किसी Button को तीन तरह से Create कर सकते हैं:

<input> Element का प्रयोग करके, जिसमें type Attribute के Value के रूप में submit, reset अथवा button का प्रयोग किया जाता है।
<input> Element का प्रयोग करके, जिसमें type Attribute के Value के रूप में image का प्रयोग किया जाता है।
<button> Element का प्रयोग करके।

Button Creation Using <input> Element

जब हम <input> Element का प्रयोग करके कोई Button Create करना चाहते हैं, तब इस Element के type Attribute में मान के रूप में हमें submit, reset अथवा button शब्‍द को उपयोग में लेना होता है। जब हम

submit शब्‍द का प्रयोग करते हैं, तब Automatically एक Submit Button Create होता है, जो Form को Web Server पर Send करने का काम करता है।
reset शब्‍द का प्रयोग करते हैं, तब Automatically एक Reset Button Create होता है, जो Form पर स्थित सभी Controls को उनके Initial मान से Reset करने का काम करता है।
button शब्‍द का प्रयोग करते हैं, तब एक ऐसा Button Create होता है, जिसे Click करके हम किसी Client-Side Script को Trigger करने का काम कर सकते हैं।

आगे दिए जा रहे उदाहरण में हम इन तीनों तरह के Buttons को देख सकते हैं:

<html>
 <body>
<form action="http://www.example.org/comment.asp" method="post">
 Please tell us what you think of the site and then click submit: <br />
 <textarea name="txtComment" rows="5" cols="50">
 Enter your comment here.
 </textarea>
 <br />
 <input type="submit" name="btnVoteRed" value="Vote for reds" />
 <input type="submit" name="btnVoteBlue" value="Vote for blues" />
 <br /><br />
 <input type="reset" value="Clear form" /> <br /><br />
 <input type="button" value="calculate" onclick="calculate()" />
 </form>
</body>
 </html>

जिस तरह से User के किसी Button को Click करने पर हम किसी Script को Trigger कर सकते हैं, उसी तरह से किसी Button पर Focus के आने अथवा किसी Button से Focus के जाने पर भी हम किसी Script को Trigger कर सकते हैं, क्‍योंकि Focus के Button पर आने पर onfocus Event Generate होता है और Focus के Button पर से जाने पर onblur Event Generate होता है। इसलिए जब हम इन Events के Generate होने के Response में किसी Script को Trigger करना चाहते हैं, तब हम उस Script को इन Event Attribute में Value के रूप में Specify करते हैं। <input> Element के साथ हम निम्‍न Attributes का प्रयोग कर सकते हैं:

type Attribute

इस Attribute में submit, reset व button मान Specify करके हम Create होने वाले Button का Type तय करते हैं।

name Attribute

इस Attribute द्वारा हम एक Button का एक Unique नाम तय करते हैं। सामान्‍यतया इस Attribute का प्रयोग तब किया जाता है, जब एक ही Form पर एक से ज्‍यादा Buttons होते हैं, ताकि ये पता लगाया जा सके कि किस Button को Click किया गया है।

value Attribute

इस Attribute में जो भी Text लिखते हैं, वह Text Button पर Caption की तरह दिखाई देता है। यदि हम name Attribute Specify करते हैं, तो इस value Attribute की Value, इस Form Control के लिए, Web Server पर name/value Pair के रूप में जाती है। जबकि यदि इस Attribute में कोई मान Specify ना किया जाए, तो Web Server पर इस Button के लिए कोई भी name/value Pair Send नहीं होता है।

size Attribute

इस Attribute के Numerical मान द्वारा हम Button की Width को Specify करते हैं। हालांकि अभी भी Netscape 7 व IE 6 इस Attribute को Support नहीं करते हैं।

onclick Attribute

Button के Click होने पर हम जिस Script को Trigger करना चाहते हैं, उस Script को हम इस Attribute में Specify करते हैं।

इस <input> Element के साथ हम सभी तरह के Universal Attributes, User Interface Attributes, disabled, readonly, tabindex व accesskey Attributes का भी प्रयोग कर सकते हैं।

Using Images for Button

हम किसी Image को भी Button की तरह उपयोग में ले सकते हैं। जब हम किसी Image को Button की तरह उपयोग में लेते हैं, तब भी Button Create करने का तरीका समान ही होता है, लेकिन जब हम Image को Button की तरह उपयोग में लेना चाहते हैं, तब <input> Element के type Attribute में Value के रूप में हमें “image” शब्‍द को उपयोग में लेना होता है। जैसे:

<input type="image" src="submit.gif" alt="Submit" name="btnSubmit"/>

चूंकि हम एक ऐसा Button Create कर रहे हैं, जो कि एक Image है, इसलिए हमें दो Additional Attributes को उपयोग में लेना पडता है, जो कि निम्‍नानुसार हैं:

src Attribute

ये Attribute Button के रूप में उपयोग में आने वाली Image की Source File की Location को Address या URL के रूप में Specify करता है।

alt Attribute

ये Attribute Button के Alternative Text को Specify करता है, जो उस समय दिखाई देता है, जब किसी कारणवश Image Web Browser में Load नहीं हो पाता है।

यदि Button में name Attribute को Specify किया गया हो, तो इस Button पर Click करने पर Web Server पर एक name/value Pair Send होता है, जहां name में वह नाम होता है, जिसे हमने name Attribute में Specify किया है, जबकि value में Button के उस x वy Coordinate Position का मान होता है, जहां पर User ने Mouse से Click किया है।

Button Creation Using <button> Element

ये एक नया Element है, जिसके Opening व Closing Tag के बीच लिखा गया Text Button पर Caption के रूप में दिखाई देता है। इसलिए हम इस Element के बीच Textual Markup अथवा Image किसी को भी Include कर सकते हैं। जो Web Browsers इस Element को Support करते हैं, उनमें इस Element द्वारा Create होने वाले Buttons 3D Effect के साथ दिखाई देते हैं। इस Element को हम निम्‍नानुसार उपयोग में ले सकते हैं:

<html>
 <body>
 <form>
 <button type="submit">Submit</button>
 <br /><br />
 <button type="reset"><b>Clear this form</b> I want to start again</button>
 <br /><br />
 <button type="button"><img src="submit.gif" alt="submit" /></button>
 </form>
 <body>
<html>

इस Coding में हम देख सकते हैं कि Submit Button में Text भी लिखा गया है और दूसरे reset Button में Text के साथ ही एक अन्‍य <img> Markup का भी प्रयोग किया गया है।