Android Development Hindi By - Technical Next: HTML

Showing posts with label HTML. Show all posts

Home > Posts filed under HTML

Sunday, 17 September 2017

HTML (hr) Tag

m HTML September 17, 2017

Introduction to HTML <hr> tag in Hindi
Syntax of HTML <hr> tag in Hindi
Attributes of HTML <hr> tag in Hindi
Example of HTML <hr> tag in Hindi

Introduction to HTML <hr> Tag

HTML में <hr> tag thematic break (विषय अंतराल) को दर्शाने के लिए use किया जाता है। यह tag एक horizontal line generate करता है जिसे अलग अलग विषयों को separate करने के लिए use किया जा सकता है। इसे HTML में horizontal rule भी कहा जाता है।

HTML5 में <hr> tag thematic break को define करता है और पुराने versions में यह horizontal rule (line) create करने के लिए use किया जाता था।

उदाहरण के लिए आप कोई story लिख रहे तो उस story में किसी दृश्य के बदलाव को आप <hr> tag द्वारा separate करके लिख सकते है। यदि आप कोई article लिख रहे है जिसमें आप अलग अलग विषयों पर अपने विचार दे रहे है तो उन विषयों को भी आप <hr> tag द्वारा separate कर सकते है।

हालाँकि <hr> tag HTML5 में भी horizontal line generate करता है लेकिन HTML5 में इसके अर्थ (separating content change) पर ज़ोर दिया गया है और पुराने versions में इस tag के presentation (drawing line) पर ज़ोर दिया गया था।

<hr> tag को <section> tag के साथ confuse नहीं किया जाना चाहिए। <hr> tag एक article के अलग अलग topics को separate करता है। जबकि <section> tag एक web page में अलग अलग sections define करने के लिए use किया जाता है।

Syntax of HTML <hr> Tag

<hr> tag का general syntax निचे दिया जा रहा है।

<hr>

जैसा की आप ऊपर दिए गए syntax में देख सकते है <hr> tag का कोई end tag नहीं होता है। यह एक empty tag होता है। लेकिन यदि आप इसका प्रयोग XHTML में कर रहे है तो इसे आपको इस प्रकार close करना होता है।

<hr />

XHTML में आप opening tag में ही forward slash लगा देते है जो opening और ending दोनों ही tags को दर्शाता है।

Attributes of HTML <hr> Tag

<hr> tag के 4 element specific attributes है। लेकिन इन attributes को HTML5 में disable कर दिया गया है।

align - इस attribute द्वारा आप <hr> tag का alignment set कर सकते है। इस attribute की left, centre और right तीन possible values हो सकती है।
noshade - इस tag के द्वारा आप define कर सकते है की <hr> tag सिर्फ एक ही color में show हो और कोई shade ना use की जाए। इस attribute की value आप noshade ही define करते है।
size - इस attribute द्वारा आप <hr> tag की height define कर सकते है। इसकी value आप pixels में define करते है।
width - इस attribute द्वारा आप <hr> tag की width define करते है। इसकी value भी आप pixels में ही define करते है।

<hr> tag सभी HTML versions में सभी global और event attributes को support करता है।

Example of HTML <hr> Tag

<hr> tag का उदाहरण निचे दिया जा रहा है।

<html>
<head>
<title>hr tag Demo</title>
</head>

<body>

<h1>hr tag Demo</h1>

<article>
This is first part of article and I am talking about fruits here.
<hr>
This is second part of article and I am talking about cars here.
<hr>
This is another part of article and I am talking about different topic here.
</article>
</body>

</html>

ऊपर दिया गया उदाहरण निचे दिया गया output generate करता है।

HTML (menu) Tag

m HTML September 17, 2017

HTML <menu> Tag

Introduction to HTML <menu> tag in Hindi
Syntax of HTML <menu> tag in Hindi
Attributes of HTML <menu> tag in Hindi
Example of HTML <menu> tag in Hindi

Introduction to HTML <menu> Tag

HTML <menu> tag HTML के पुराने versions में included था। लेकिन इसे बाद में HTML version 4.0.1 में exclude कर दिया गया था। अब इस tag को वापस HTML5 में redefine करके include किया गया है।

<menu> tag commands की list define करने के लिए use किया जाता है। उदाहरण के लिए आप web page में कोई image add करते है। आप चाहते है की जब कोई इस image पर right click करे तो default menu display ना हो और आपके द्वारा define की गयी commands की menu display हो तो इसके लिए आप HTML <menu> tag को use कर सकते है।

Commands की list में हर command एक specific task perform करती है। जैसे की जब आप windows operating system में desktop पर right click करते है तो आपको कुछ commands की list show होती है जो अलग अलग tasks perform करती है। उसी प्रकार आप HTML elements के लिए भी commands की list create कर सकते है जो user को right click करने पर show होगी।

<menu> tag के द्वारा context menus, popup menus, toolbars और form controls create किये जा सकते है।

जिस भी HTML element पर आप menu apply करना चाहते है उस element में आप contextmenu attribute define करते है और उसमे <menu> tag की id value के रूप में pass करते है।

HTML <menuitem> Tag

<menu> tag commands की list के लिए एक container का काम करता है। इसके अंदर हर command को <menuitem> द्वारा define किया जाता है। <menuitem> tag के label और icon दो मुख्य attributes होते है।

इनमें label attribute द्वारा command का display name define किया जाता है और icon attribute द्वारा command का icon define किया जाता है। Command का icon define करना अनिवार्य नहीं है। इस tag का general syntax निचे दिया जा रहा है।

किसी command को click करने पर क्या action लिया जाएगा ये आप HTML event attributes द्वारा define करते है। उदाहरण के लिए आप onclick event attribute से define कर सकते है की command को click करने पर क्या action लिया जाएगा।

Syntax of HTML <menu> Tag

HTML <menu> tag का general syntax निचे दिया जा रहा है।

जैसा की आप ऊपर गए syntax में देख सकते है <menuitem> tag <menu> tag के अंदर define किया जाता है। इसे <menu> tag का sub tag भी कहा जा सकता है।

Attributes of HTML <menu> Tag

<menu> tag के साथ available attributes के बारे में निचे बताया जा रहा है।

label - इस attribute द्वारा आप menu का एक display नाम define कर सकते है। इसे define करना अनिवार्य नहीं है।
type - इस attribute द्वारा आप define करते है की आप किस प्रकार की menu show करना चाहते है। इस attribute की निचे दी गयी 3 possible values हो सकती है।

list - जब आप commands की list create करना चाहते है।
toolbar - जब आप एक toolbar create करना चाहते है।
context - जब आप एक context menu create करना चाहते है।

<menu> tag HTML के सभी global और event attributes को भी support करता है।

Example

<menu> tag का उदाहरण निचे दिया जा रहा है।

ऊपर दिए गए उदाहरण एक image add की गयी है। इस image पर myMenu नाम की context menu apply की गयी है। इस menu में refresh command दी गयी है जो click करने पर image को reload करती है। यह उदाहरण निचे दिया गया output generate करता है।

यह उदाहरण अभी सिर्फ morzilla firefox web browser में ही work करता है।

HTML (meta) Tag

m HTML September 17, 2017

HTML <meta> Tag

Introduction to HTML <meta> tag in Hindi
Syntax of HTML <meta> tag in Hindi
Attributes of HTML <meta> tag in Hindi
Example of HTML <meta> tag in Hindi

Introduction to HTML <meta> Tag

Description - <meta> tag द्वारा आप web page का description provide कर सकते है। यह description search engines द्वारा search results में show किया जाता है। जब आपका web page search results में show होता है तो page title के निचे यही description show होता है। यदि आप <meta> tag द्वारा description define नहीं करते है तो search engines article के शुरू की कुछ lines को description के रूप में use करते है।
Keywords - अपने web page से संबधित keywords की जानकारी आप <meta> tag द्वारा search engines को provide कर सकते है। Keywords search results में ranking के लिए महत्वपूर्ण होते है। Keywords से search engines को पता चलता है की किसी particular page पर किस topic से related information provide की गयी है।
Author - Web page के author की जानकारी भी <meta> tag द्वारा provide की जाती है।
Last Modified - Web page को आखिरी बार कब modify किया गया था यह जानकारी भी आप <meta> tag द्वारा provide कर सकते है।
Character Set - Document में use होने वाले character encoding की जानकारी भी आप <meta> tag द्वारा provide कर सकते है।

Syntax of HTML <meta> Tag

निचे HTML <meta> tag का general syntax दिया जा रहा है।

HTML में <meta> tag का कोई end tag नहीं है। लेकिन यदि आप XHTML में coding कर रहे है तो आपको इसे ending tag से close करना होगा।

Attributes of HTML <meta> Tag

charset - इस attribute द्वारा document की character encoding define की जाती है।
content - इस attribute द्वारा name और http-equiv attributes की value define की जाती है।
http-equiv - इस attribute से content attribute द्वारा define की गयी information के लिए आप header provide करते है। इस attribute की content-type, default-style और refresh possible values हो सकती है।
name - इस attribute द्वारा meta-data का नाम define किया जाता है। इस attribute की application-name, author, description, viewport, keywords और generator possible values हो सकती है।

Example

निचे <meta> tag द्वारा web page का author और description define करने का उदाहरण दिया जा रहा है।

<html>
<head>
<meta name="author" content="Vipin Sharma">
<meta name="description" content="Learn about HTML meta tag in Hindi.">
</head>

<body>
<h1>Introduction to HTML</h1>
<p>HTML is very easy language. One can learn it easily and use it quickly. If you want to learn HTML in Hindi then please visit Best Hindi Tutorials.</p>
</body>

</html>

HTML address Tag

m HTML September 17, 2017

HTML <address> Tag

Introduction to HTML <address> tag in Hindi
Syntax of HTML <address> tag in Hindi
Attributes of HTML <address> tag in Hindi
Example of HTML <address> tag in Hindi

Introduction to HTML <address> Tag

HTML <address> tag किसी document के author या owner की contact information define करने के लिए use किया जाता है। <address> tag को HTML3 में add किया गया था। HTML3 के बाद के सभी versions में यह tag available है। इसे HTML5 में भी include किया गया है।

कई बार web developers <address> tag के use को लेकर confuse हो जाते है। <address> tag को document के author से related contact information जैसे की author का email, mailing address और social media links आदि provide करने के लिए use किया जाना चाहिए।

<address> tag को पूरी website की contact information provide करने के लिए नहीं use किया जाना चाहिए। इसके लिए आपको <footer> tag use करना चाहिए। <address> tag को किसी organization का postal address provide करने के लिए नहीं use किया जाना चाहिए।

यदि आपकी website में कई authors publish करते है तो address tag को आप सभी authors के articles के साथ attach कर सकते है और उनकी contact information provide कर सकते है।

<address> tag readers के लिए बहुत ही उपयोगी होता है। <address> tag द्वारा provide की गयी information से readers उस article के author से आसानी से संपर्क कर सकते है।

हालाँकि author की contact information <p> या <span> tag से भी provide की जा सकती है। लेकिन SEO की दृष्टि से <address> tag को use किया जाना महत्वपूर्ण है। Search engines <address> tag को author ranking के लिए use करते है। यदि कोई person उस author के बारे में search करता है तो search engines ये information knowledge graph द्वारा show कर सकते है।

HTML <address> tag द्वारा provide की गयी information web page में italic style में show होती है।

Syntax of HTML <address> Tag

निचे <address> का general syntax दिया जा रहा है।

<address>
//author email address
//author mailing address
//author social media profile links
</address>

जैसा की आप ऊपर दिए गए syntax में देख सकते है <address> tag को closing tag द्वारा properly close किया जाना आवश्यक है। <address> tag में आप <span> <p> और <a> tags को आसानी से use कर सकते है।

Attributes of HTML <address> Tag

HTML <address> का कोई element specific attribute नहीं है। यह tag HTML के सभी global और event attributes को support करता है।

Example

<address> tag का उदाहरण निचे दिया जा रहा है।

<html>
<head>
<title>HTML address Tag Demo</title>
</head>

<body>

<article>
This is an article. This article is written by an author. <br />If you want to show the authors contact information you can do it with HTML address tag. <br /> <br />

<address>
Best Hindi Tutorials - conatct@besthinditutorials.com
</address>

</article>

</body>

</html>

ऊपर दिया गया उदाहरण निचे दिया गया output generate करता है।

HTML Tags

m HTML September 17, 2017

HTML <script> & <noscript> Tags

Introduction to HTML <script> tag in Hindi
Syntax of HTML <script> tag in Hindi
Attributes of HTML <script> tag in Hindi
Using HTML <script> tag in Hindi
HTML <noscript> tag in Hindi

Introduction to HTML <script> Tag

HTML का <script> tag web pages में client side script define करने के लिए use किया जाता है। उदाहरण के लिए <script> tag के माध्यम से आप अपने HTML document में JavaScript add कर सकते है। JavaScript एक client side scripting language है। इसकी मदद से आप dynamic content generate कर सकते है और forms आदि को validate भी कर सकते है।

Attributes of HTML <script> Tag

Script tag में use किये जाने वाले attributes के बारे में निचे दिया जा रहा है।

Attributes	Explanation
src	इस attribute के द्वारा आप external javascript का URL define करते है। इसकी value double quotes में दी जाती है।
type	इस attribute के द्वारा आप script का type define करते है। यदि आप javascript use कर रहे है तो इसकी value text/javascript define करते है।
async	इस attribute की value आप true और false की form में देते है। यदि आप इस attribute को true set करते है तो script HTML page के सभी elements के load होने के बाद asynchronously load होती है। इसे page load time reduce करने के लिए use किया जाता है।
defer	इस attribute की value भी आप true और false की form में ही देते है। जब आप इस attribute को true set करते है तो script HTML document के parse होने के बाद load होती है।

Syntax of HTML <script> Tag

Script tag को आप किसी भी normal HTML tag की तरह define करते है। इसका general syntax निचे दिया जा रहा है।

किसी external javascript को include करने के लिए आप src attribute use करते है। इसका general syntax निचे दिया जा रहा है।

जैसा की आप ऊपर दिए गए syntax में देख सकते है जब आप किसी external javascript को अपने page में include करते है तो आपको script page में define करने की आवश्यकता नहीं होती है।

Script को anonymously load करने के लिए आप async attribute को true set करते है। इसका general syntax निचे दिया जा रहा है।

किसी script को page के parse होने के बाद load करने के लिए आप defer attribute को true set करते है। इसका general syntax निचे दिया जा रहा है।

Using HTML <script> Tag

Script tag को आप HTML document में 2 प्रकार से use कर सकते है।

Embedding Script

इस तरीके में आप script को HTML document में ही define करते है। वैसे तो आप <script> tag को HTML के <body> tag में भी define कर सकते है लेकिन ज्यादातर इसे <head> tag में ही define किया जाता है। इसे निचे उदाहरण के द्वारा समझाया जा रहा है।

<html>
<head>
<title> Embedding Javascript Demo</title>

<script type="text/javascript">
document.write("Hello readers, this script is embedded in document");
</script>

</head>

<body>
<h1> This is normal HTML </h1>
</body>

</html>

ऊपर दिए गए उदाहरण में script को page में ही embedded किया गया है। ये script निचे दिया गया output generate करती है।

Linking Script

इस तरीके में आप की script किसी server पर stored रहती है और आप उसे अपने HTML document से link करते है। इसके लिए आप <script> tag का src attribute use करते है। यदि आप अपनी script को hidden और secure रखना चाहते है तो उसके लिए आप इस तरीके को use कर सकते है। इसे external javascript भी कहा जाता है। इसे निचे उदाहरण के द्वारा समझाया जा रहा है।

<html>
<head>
<title>Linking Script Demo</title>

<script type="text/javascript" src="MyFile.js"> </script>

</head>

<body>
<h1>This is normal HTML.</h1>
</body>

</html>

ऊपर दिए गए उदाहरण में एक external javascript को page से link किया गया है। जब आप external java script define करते है तो उसे .js extension के साथ save करते है। External javascript define करते समय आपको <script> tag define करने की आवश्यकता नहीं होती है। अधिक जानकारी के लिए आप java script से related tutorials देख सकते है। ऊपर दी गयी script निचे दिया गया output generate करती है।

HTML <noscript> Tag

कई बार page में script load नहीं हो पाती है। ऐसा कई कारणों से हो सकता है। उदाहरण के लिए user कोई पुराना web browser use कर रहा है जो script को support नहीं करता है या फिर user ने स्वयं ही script disable कर रखी है। कारण कोई भी हो ऐसी situation में आप <noscript> tag use कर सकते है जो script नहीं load होने पर user को appropriate message show करने के लिए use किया जाता है। इस tag को आप head section में या body section में कँही भी use कर सकते है। इसका उदाहरण निचे दिया जा रहा है।

<html>
<head>
<title>HTML no script Demo</title>
</head>

<body>
<h1>This is normal HTML.</h1>

<script type="text/javascript">
document.write("Hello Readers,")
</script>

<noscript> Your script is disabled. Please update your browser or enable it.</noscript>

</body>

</html>

ऊपर दी गयी script निचे दिया गया output generate करती है।

HTML Font Tag

m HTML September 17, 2017

HTML Font Tag

Introduction to HTML font tag in Hindi
Attributes of HTML font tag in Hindi
Examples of HTML font tag in Hindi
Commenting in HTML in Hindi

Introduction to HTML Font Tag

अपनी website के fonts को configure करके आप उसे और भी attractive, readable और structured बना सकते है। By default आपकी website की font family कुछ भी हो सकती है। लेकिन इसे आप अपनी website के हिसाब से configure करके कोई दूसरी font family भी यूज़ कर सकते है। साथ ही आप font का color भी change कर सकते है।

Fonts को configure करने के लिए HTML <font> tag provide करती हैं। इस tag को आप किसी paragraph पर भी apply कर सकते है और आप चाहे तो किसी paragraph में particular text पर भी इसे apply किया जा सकता है। <font> tag को HTML 5 में include नहीं किया गया है। HTML 5 में इसकी जगह CSS का प्रयोग किया जाता है।

<font> tag के 3 attributes होते है।

size - इस attribute से आप font की size change कर सकते है। Font की size numbers में दी जाती है।
face - इस attribute के द्वारा font family change की जाती है। आप जो font family चाहते है उसे inverted commas में define करते है।
color - ये attribute font का कलर change करने के लिए यूज़ किया जाता है। आप color का hex code लिख सकते है या फिर color का नाम भी दे सकते है।

Setting Font Size

Font की size आप size attribute से define करते है। इसका उदाहरण नीचे दिया जा रहा है।

<html>

<head>

</head>

<body>

<font size="10" > HTML in Hindi</font>

</body>

</html>

ऊपर दी गयी script निचे दिया गया web page generate करती है।

Setting Font Family

Font family set करने के लिए आप face attribute यूज़ करते है। इसका उदाहरण नीचे दिया जा रहा है।

<html>

<head>

<title>font family demo</title>

</head>

<body>

<font size="10" face="Verdana">Learn HTML In Hindi</font>

</body>

</html>

ऊपर दी गयी script निचे दिया गया web page generate करती है।

Setting Font Color

Font का color आप color attribute से change करते है। इसका उदाहरण नीचे दिया गया है।

<html>

<head>

<title>font color demo </title>

</head>

<body>

<font color="red">HTML tutorial in Hindi</font>

</body>

</html>

ऊपर दी गयी script निचे दिया गया web page generate करती है।

Commenting in HTML

कई बार ऐसा होता है की एक developer के द्वारा लिखी हुई script को दूसरे developers भी यूज़ करते है। इसलिए उस script को explain करना necessary हो जाता है ताकि दूसरे developers को आपकी script यूज़ करने में कोई problems ना हो।

Script को explain करने के लिए आप comments को यूज़ कर सकते है। HTML में comments define करना बहुत ही आसान है। Comments interpret नहीं होते है। HTML interpreter comments को skip कर जाता है। यानि comments में लिखा हुआ कोई भी text आपके webpage पर कोई भी असर नहीं डालता है। अपनी script लिखते समय comment करना एक बहुत ही professional habit है।

HTML में comments भी tags के द्वारा किये जाते है। इसके लिए HTML आपको एक unique tag provide करती है।

इसका उदाहरण नीचे दिया जा रहा है।

<html>

<head>

<title>commenting demo</title>

</head>

<body>

<p> Hello </p>

</body>

</html>

HTML Forms

m HTML September 17, 2017

HTML Forms

Introduction to HTML forms in Hindi
<form> tag in HTML forms in Hindi
<input> tag in HTML forms in Hindi
Attributes of form tag in Hindi

Introduction to HTML Forms

किसी भी webpage पर यदि आप यूज़र से कोई information लेना चाहते है तो इसके लिए आप forms का इस्तेमाल करते है। उदाहरण के लिए जब भी आप कोई नयी email id create करते है तो सबसे पहले sign up form भरते है। ऐसा करके आप अपनी information webpage के द्वारा provide करते है। Forms यूज़र से input प्राप्त करने का सबसे common तरीका होता है। कोई भी form यूज़र से input लेता है और जब यूज़र उस form को submit करता है तो ये सारी information किसी database में store कर ली जाती है। User से information input करवाने के लिए आप कई प्रकार के form elements यूज़ कर सकते है। जैसे की text-box, radio button, drop-down list आदि।

किसी भी webpage में forms create करने के लिए आप <form> tag यूज़ करते है। ये container tag होता है जो की पुरे form की beginning और ending define करता है। इस tag के अंदर अलग अलग form elements define किये जाते है। <form> tag के कुछ attributes के बारे में नीचे दिया जा रहा है।

Attribute	Explanation
action	इस attribute से आप define करते है की form submit होने पर क्या करना है। जैसे की यूज़र के form submit करते ही आप कोई दूसरे webpage में thank you message शो कर सकते है या कोई php script execute करवा सकते है।
method	इस attribute से आप data को store करने का method define करते है। इस attribute की केवल 2 values GET या POST हो सकती है।
target	इससे आप form submission के बाद जो window show होगी वह define करते है।

Form elements आप <input> tag के द्वारा define करते है। इस tag के कुछ attributes होते है जो आप elements को configure करने के लिए यूज़ करते है। इनके बारे में नीचे दिया जा रहा है।

Attribute	Explanation
name	इस attribute से particular form element का नाम define किया जाता है। बाद में यही नाम server पर values को store करने के लिए यूज़ किया जाता है।
type	ये element का type show करता है। इससे ये भी पता चलता है की किस तरह की value input की जा सकती है। जैसे text-boxes के लिए type text होता है।
size	इससे आप किसी form element की size width में define करते है। जैसे की आप किसी text-box को अपने according width दे सकते है।
value	ये किसी element की default value हो सकती है। जैसे की आप किसी text box के अंदर first name लिखा हुआ देखते है।

आइये अब देखते है की इन tags और attributes को यूज़ करते हुए आप कैसे एक complete form create कर सकते है।

Creating Text Boxes

HTML में forms के लिए text-boxes क्रिएट करना बहुत ही easy है। इसके लिए आप <input> tag के type attribute में text value define करते है। कोई भी default value देने के लिए जो text-box के अंदर show होगी आप value attribute यूज़ कर सकते है। यदि आप password input करने के लिए text-box बना रहे है तो type password देना होगा। इसका उदाहरण नीचे दिया जा रहा है।

<html>

<head>

</head>

<body>

<form>

Enter your email :<input type="text" value="Email..." name="email" size=" 20"> <br><br>

Enter your password :<input type="password" value="Password..." name="pass" size="20">

</form>

</body>

</html>

ऊपर दी गयी script निचे दिया गया web page generate करेगी।

Creating Buttons

HTML में आप 4 तरह से buttons क्रिएट कर सकते है। इन्हे आप type attribute के द्वारा define करते है। इनके बारे में नीचे दिया जा रहा है।

Submit - ये button form submit करने के लिए यूज़ किया जाता है। ये button पुरे form के सभी elements की values को एक साथ server पर send कर देता है। आप type attribute में submit value define करके इस तरह का button क्रिएट कर सकते है।
Reset - इस button को पुरे form के सभी fields की values को reset करने के लिए यूज़ किया जाता है। Reset button create करने के लिए आप type attribute में reset value define करते है।
Normal button - ये एक normal button होता है जिस पर click होते ही आप कोई भी action ले सकते है। इस तरह का button क्रिएट करने लिए आप type attribute के value button देते है।
Image button - इस तरह के button में आप button के background में कोई image दे सकते है। इस तरह का button create करने के लिए आप type attribute की value image देते है।

<html>

<head>

<title>Button demo</title>

</head>

<body>

<form>

</form>

</body>

</html>

ऊपर दी गयी script निचे दिया गया web page generate करती है।

Creating Radio Buttons

Radio buttons के द्वारा यूज़र बिना keyboard के webpage को information provide करता है। Radio button एक गोल box होता है जिसे choose करके user अपनी choice बताता है। जैसे की यदि आप user के gender के बारे में जानना चाहते है तो आप 2 radio buttons create करके उनके नाम male और female दे सकते है। यूजर इनमे से कोई भी choose करके अपना gender बता सकता है। आप 2 या 2 से अधिक radio buttons को name attribute के द्वारा connect कर देते है ताकि user एक समय पर केवल एक ही radio button select सके। जिन radio buttons को आप आपस में connect करना चाहते उनके आप name same देते है।

Radio button क्रिएट करने के लिए आप <input> tag के type attribute की value radio देते है। Name attribute में radio button का नाम दिया जाता है। जैसा की मैने ऊपर बताया यदि आप Radio buttons का group बनाना चाहते है ताकि user एक बार में सिर्फ एक ही radio button select कर सके तो ऐसी situation में आप सभी radio buttons को एक ही नाम देते है। इसका उदाहरण नीचे दिया जा रहा है।

<html>

<head>

<title>Radio Button Demo </title>

</head>

<body>

<form>

Select your Gender: <br>

<input type="radio" name="gender"> Male

<input type="radio" name="gender"> Female

</form>

</body>

</html>

ऊपर दी गयी script निचे दिया गया web page generate करती है।

Creating Drop Down List

Drop down list create करने के लिए आप <select> tag इस्तेमाल करते है। इस tag को form tag के अंदर define किया जाता है। ये tag drop down list का structure क्रिएट करता है। Drop down list की values define करने के लिए <option> tag को define किया जाता है। आप जितने list item add करना चाहते है उतने ही <option> tag define करते है। <option> tag को <select> tag में define किया जाता है। इसका उदाहरण नीचे दिया गया है।

<html>

<head>

</head>

<body>

<form>

<option>Select</option>

<option value="Female">Female</option>

</select>

</form>

</body>

</html>

ऊपर दी गयी script निचे दिया गया web page generate करती है।

Creating Check Boxes

Check boxes के द्वारा किसी भी user को multiple options को choose करने के facility दी जाती है। जैसे की यदि आप चाहते है की user multiple courses choose करे तो आप check boxes create कर सकते है और user उन्हें select कर सकता है।

Check boxes क्रिएट करना बहुत ही आसान होता है। इसके लिए आप <input> tag के type attribute में check box value देते है और Name attribute में check-box का नाम देते है। Value attribute की value भी आप दे सकते है। इसका उदाहरण नीचे दिया गया है।

<html>

<head>

<title>Check box demo </title>

</head>

<body>

<form>

<input type="checkbox" name="MCA" > MCA

<input type="checkbox" name="BTECH"> Btech

<input type="checkbox" name="BCA">BCA

<input type="checkbox" name="BCA">M. tech

</form>

</body>

</html>

ऊपर दी गयी script निचे दिया गया web page generate करती है।