fieldset and legend Tags in HTML Forms: Used for Better Structuring of HTML Forms

HTML5 with CSS3 in Hindiये Article इस वेबसाईट पर Selling हेतु उपलब्‍ध EBook HTML5 with CSS3 in Hindi से लिया गया है। इसलिए यदि ये Article आपके लिए उपयोगी रहा, तो निश्चित रूप से ये पुस्तक भी आपके लिए काफी उपयोगी साबित होगी। 

HTML5 with CSS3 in Hindi | Page: 481 | Format: PDF

BUY NOW DOWNLOAD READ ONLINE

fieldset and legend Tags in HTML Formsबडे HTML Form User के लिए Confusing हो सकते हैं, इसलिए ये जरूरी होता है कि हम Related Form Controls को Group कर लें। ये काम हम इन दोनों Elements का प्रयोग करके कर सकते हैं। <fieldset> Element आपस में Logically Related Group Controls के चारों ओर एक Border Create कर देता है, जबकि <legend> Element हमें ये सुविधा प्रदान करते हैं कि हम <fieldset> Element को एक Caption प्रदान कर सकें, जो कि Group Form Controls के एक Title की तरह काम करे।

जब हम <legend> Element को उपयोग में लेते हैं, तब ये जरूरी होता है कि हम इस Element को <fieldset> Element के पहले Child Element की तरह उपयोग में लें। निम्‍न उदाहरण द्वारा हम समझ सकते हैं कि हम किस तरह से चार अलग प्रकार की जानकारियों के Controls को चार अलग प्रकार के Group Form Controls के रूप में Define कर सकते हैं।

<html>
 <body>
 <form action="http://www.example.org/competition.asp" method="post" name="frmComp">
 <fieldset>
 <legend><em>Contact Information</em></legend>
 <label>First name: <input type="text" name="txtFName" size="20" /></label><br />
 <label>Last name: <input type="text" name="txtLName" size="20" /></label><br />
 <label>E-mail: <input type="text" name="txtEmail" size="20" /></label><br />
 </fieldset>

 <fieldset>
 <legend><em>Competition Question</em></legend>
 How tall is the Eiffel Tower in Paris, France? <br />
 <label><input type="radio" name="radAnswer" value="584" />584 ft</label><br />
 <label><input type="radio" name="radAnswer" value="784" />784 ft</label><br />
 <label><input type="radio" name="radAnswer" value="984" />984 ft</label><br />
 <label><input type="radio" name="radAnswer" value="1184" />1184 ft</label><br />
 </fieldset>

 <fieldset>
 <legend><em>Tiebreaker Question</em></legend>
 <label>In 25 words or less, say why you would like to win $10,000:
 <textarea name="txtTiebreaker" rows="10" cols="40"></textarea>
 </label>
 </fieldset>

 <fieldset>
 <legend><em>Enter competition</em></legend>
 <input type="submit" value="Enter Competition" />
 </fieldset>
 </form>
 <body>
<html>
Structuring Forms with fieldset and legend Elements - HTML in Hindi

Structuring Forms with fieldset and legend Elements – HTML in Hindi

हम देख सकते हैं कि किस तरह से <fieldset> Element Group Form Controls के चारों ओर एक Border Create कर देता है और किस तरह से <legened> Element इन Group Form Controls को एक Title प्रदान कर देता है। एक <fieldset> Element सभी प्रकार के Universal Attributes व Basic Event Attributes को उपयोग में ले सकता है।

एक बात ध्‍यान रखें कि यदि हम अपनी Table को Format करने के लिए <table> Element का प्रयोग करते हैं, तो ये जरूरी हो जाता है कि हम हमारे Table Elements को Fieldset Element के अन्‍दर उपयोग में लें।

इसी तरह से यदि हम जो Fieldset Element उपयोग में ले रहे हैं, वह किसी Table Element के बीच हो, तो ये जरूरी हो जाता है कि सभी Fieldset Elements समान Cell में हों। एक <legend> Element में हम सभी तरह के Universal Attributes, UI Attributes, accesskey Attribute व align Attributes को उपयोग में ले सकते हैं। (fieldset and legend Tags in HTML Forms)

Label in HTML: Used to Associate a name with HTML Form Controls
focus and tabindex HTML: To setup Tab Order of Web Form

HTML5 with CSS3 in Hindiये Article इस वेबसाईट पर Selling हेतु उपलब्‍ध EBook HTML5 with CSS3 in Hindi से लिया गया है। इसलिए यदि ये Article आपके लिए उपयोगी रहा, तो निश्चित रूप से ये पुस्तक भी आपके लिए काफी उपयोगी साबित होगी। 

HTML5 with CSS3 in Hindi | Page: 481 | Format: PDF

BUY NOW DOWNLOAD READ ONLINE

Download All Hindi EBooks

सभी हिन्दी EBooks C, C++, Java, C#, ASP.NET, Oracle, Data Structure, VB6, PHP, HTML5, JavaScript, jQuery, WordPress, etc... के DOWNLOAD LINKS प्राप्‍त करें, अपने EMail पर।

Register करके Login करें। इस Popup से छुटकारा पाएें।