Categories
HTML Programming

HTML Form in Hindi – HTML Form Element की हिंदी में जानकारी

Websites HTML Documents यानि Webpages का संकलन हैं. और एक HTML Document अनेक HTML Elements से मिलकर बना होता हैं. इसमे Headings, Paragraphs, Lists, Images आदि शामिल होते हैं.

इनके अलावा भी कई अन्य महत्वपूर्ण HTML Elements होते हैं. जिनमे एक HTML Form Element भी शामिल हैं. इस Tutorial में हम आपको HTML Form Element की पूरी जानकारी देंगे. आप जानेंगे कि HTML से Form कैसे बनाया जाता हैं? इस Lesson को सुविधा की दृष्टि से छोटे-छोटे भागों में बांटा गया हैं.

HTML Form का परिचय

Users से जानकारी लेने के लिए HTML Forms का इस्तेमाल किया जाता हैं. इस जानकारी में फीडबैक, निजि जानकारी, संदेश, शिकायत या अन्य कुछ सुझाव आदि हो सकते हैं.

आपको Websites में HTML Forms कई रूपों में मिल जाऐंगे. आप इन्हे Sign Up Forms, Log in Forms, Payment Details Forms, Survey Forms आदि के रूप में देख सकते हैं. क्या आप जानते हैं कि Google का Search Box भी एक HTML Form ही हैं?

Forms में Users द्वारा जरूरी जानकारी को भरा जाता हैं. और इस जानकारी को Server पर भेज दिया जाता हैं. जहाँ से इसे Webmasters Access कर पाते हैं.

सभी Form Elements की जानकारी

HTML Forms को Form Element द्वारा Define किया जाता हैं. Form एक Container Tag की तरह काम करता हैं. जिसके अंदर अन्य Form Elements को Define करके Forms को बनाया जाता हैं. Form Element के अलावा भी कई अन्य Important Form Elements भी होते हैं. जिनके बारे में नीचे बताया जा रहा हैं.

  • input – Input Element HTML Form का दूसरा Required Element हैं. Input Element के द्वारा Form में विभिन्न प्रकार के Data Fields को Define किया जाता हैं. जिनका निर्धारण type Attribute करता हैं.
  • select – Select Element से Form में एक Drop-down List को Define किया जाता हैं. इससे अधिक जानकारी एक Field में ही समाहित हो जाती हैं.
  • textarea – वैसे तो Input Element द्वारा Text Field Define किए जा सकते हैं. लेकिन, Multiline Data Fields को textarea Element द्वारा ही Define किया जा सकता हैं. क्योंकि Input Element से सिर्फ Single-line Data Field ही बनाए जा सकते हैं.

Form Elements के प्रमुख Attributes

Form Tag के साथ आप Global Attributes और Event Attributes को Define कर सकते हैं. क्योंकि Form Tag Global और Event Attributes को Support करता हैं.

इन दोनों के अलावा कुछ Attributes को सिर्फ Form Tag में ही Define किया जा सकता हैं, जो Element-specific Attribute कहलाते हैं. जिनके बारे में नीचे बताया जा रहा हैं.

  • action – User द्वारा Form Submit करने के बाद जो कार्य आप Server से करवाना चाहते हैं से action Attribute द्वारा Define किया जाता हैं.
  • Method – आप Form Data को जिस Method से Submit करवाना चाहते हैं उसे Method Attribute से Define किया जाता हैं. यदि आपका Data में संवेदनशील या निजि जानकारी शामिल हैं तो आपको Post Method Define करनी चाहिए. नही तो आप Get Method को Use कर सकते हैं.
  • Target – आप Result Page को जिस Window में Open करना चाहते हैं, उसे target Attribute द्वारा Define किया जाता हैं.

एक HTML Form बनाना

अब तक आप जान चुके हैं कि HTML Form को Form Element द्वारा Define किया जाता हैं. और अब हम एक HTML Form बनाने का तरीका बताने जा रहे हैं.

HTML Form बनाने से पहले हम आपको Form Syntax की जानकारी दे रहे हैं. ताकि आप सही तरह से HTML Form बना सके.

HTML Form का Syntax

नीचे Form Syntax दिया जा रहा हैं.

<form>

Form Elements

</form>

Syntax को समझिए

ऊपर आपने देखा कि Form Syntax बिल्कुल आसान हैं. जिसमें सिर्फ Opening Form Tag और Closing Form Tag का इस्तेमाल किया गया हैं. इन दोनों Tags के बीच में अन्य Form Elements के द्वारा Data Fields को Define किया जाता हैं.

HTML Form Define करना

अब हम एक HTML Form बनाऐंगे. यह एक साधारण HTML Form हैं. जिसे सिर्फ आपको समझाने के लिए बनाया गया हैं. नीचे दिए गए HTML Code को किसी Text Editor जैसे Notepad में लिखिए या फिर इसे Copy करके Paste कर दिजिए और इसे form.html के नाम से Save कीजिए.

<!DOCTYPE html>
<html>
<head><title>HTML Form Example</title></head>
<body>
<form>First Name: <input type=”text” name=”firstname”>
Last Name: <input type=”text” name=”lastname”>
<input type=”submit” value=”Submit”></form>
</body>
</html>

अब आप ऊपर दिए गए HTML Code को Save करके ब्राउजर में Open कीजिए तो आपके सामने कुछ इस प्रकार का परिणाम आएगा.



First Name:

Last Name:

Form में विभिन्न प्रकार के Data Fields बनाना

HTML Form द्वारा Users से कई प्रकार की जानकारी प्राप्त की जाती हैं. इस कार्य के लिए अलग-अलग प्रकार के Data के लिए भिन्न-भिन्न Data Fields की जरूरत होती हैं. ताकि Users से प्राप्त Data को छांटा जा सके. नीचे हम आपको एक फॉर्म में इस्तेमाल होने वाले Data Input Fields के नाम और उपयोग बता रहे हैं.

Text Input Controls

Text Input Controls सबसे ज्यादा उपयोग होने वाला Data Fields हैं. जब Users से Text के रूप में जानकारी प्राप्त करनी होती हैं तो इस प्रकार के Input Controls को Form में Define किया जाता हैं. Text Input Controls के तीन प्रकार होते हैं.

  • Single-line Text Input Control – जब Users से केवल एक Line का Data Input करवाने की जरूरत होती हैं, तब इस प्रकार के Data Fields को Define किया जाता हैं. इसके लिए <input> Tag में type Attribute की Value को text लिखा जाता हैं.
  • Password Text Input Control – यह भी एक प्रकार का Single-line Text Input Control ही हैं. इसमे जब Users Data को लिखता हैं तो इसमे Data किसी खास प्रकार के Characters में बदल जाता हैं. इसके लिए <input> Tag में type Attribute की Value को password लिखा जाता हैं.
  • Multi-line Text Input Control – जब Users से एक से ज्यादा Lines में Data Input करवाने की जरुरत होती हैं, तब Multi-line Text Input Controls को HTML Forms में Define किया जाता हैं. इसके लिए <textarea> Tag का इस्तेमाल किया जाता हैं. जिसमे हम Rows और Columns Define कर सकते हैं.

Text और Password Input Control Define करना

नीचे दिए गए HTML Code को नोटपेड या किसी अन्य Text Editor में लिखिए या इसे Copy करके Paste कीजिए और इसे input-form.html के नाम से Save कर दीजिए.

<!DOCTYPE html>
<html>
<head><title> Single-line Text Input Control Example</title></head>
<body>
<form>User ID: <input type=”text” name=”id”>
Password: <input type=”password” name=”password”>
<input type=”submit” value=”Submit”></form>
</body>
</html>

जब आप ऊपर दिए गए HTML File को ब्राउजर में खोलेंगे तो आपक सामने इस प्रकार का परिणाम आएगा. इसमे हमने आपको Single-line और Password Input Controls दोनों को एक साथ Define करना बताया हैं.



  User ID:

 

Password:

Multi-line Text Input Control Define करना

नीचे दिए गए HTML Code को ऊपर बनाई गई HTML File में लिखिए या इसे Copy करके Paste कीजिए और इसे Save कर दीजिए. आप चाहे तो एक नई फाईल भी बना सकते हैं.

<!DOCTYPE html>
<html>
<head><title> Multi-line Text Input Control Example</title></head>
<body>
<form>Message:
<textarea rows=”5″ cols=”30″ name=”message”>
Write your message here…
</textarea></form>
</body>
</html>

जब आप ऊपर दिए गए HTML File को ब्राउजर में खोलेंगे तो आपक सामने इस प्रकार का परिणाम आएगा. इसमे हमने आपको Multi-line Text Input Control को Define करना बताया हैं. आप इसकी लंबाई और चौडाई को क्रमश: rows और cols Attribute द्वारा Define कर सकते हैं.



Message:

Form Check Box

जब Users को एक से ज्यादा विकल्प को चुनना पडता हैं तो इसके लिए Check Boxes का इस्तेमाल किया जाता हैं. इसे भी <input> Tag द्वारा ही Define किया जाता हैं. लेकिन, type Attribute की Value को checkbox लिख दिया जाता हैं.

HTML Form में Check Box Define करना

नीचे दिए गए HTML Code को ऊपर बनाई गई HTML File में लिखिए या इसे Copy करके Paste कीजिए और इसे Save कर दीजिए. आप चाहे तो एक नई फाईल भी बना सकते हैं.

<!DOCTYPE html>
<html>
<head><title> Check Box Input Control Example</title></head>
<body>
<form>Choose Your Subjects:
<input type=”checkbox” name=”hindi”> Hindi
<input type=”checkbox” name=”english”> English
<input type=”checkbox” name=”maths”> Maths
<input type=”checkbox” name=”science”> Science
<input type=”checkbox” name=”ss”> Social Sciences</form>
</body>
</html>

जब आप ऊपर दिए गए HTML File को ब्राउजर में खोलेंगे तो आपक सामने इस प्रकार का परिणाम आएगा.



Select Your Subjects:
Hindi
English
Maths
Science
Social Sciences

Form में Radio Buttons बनाना

जब एक से ज्यादा विकल्पों में से सिर्फ एक ही विकल्प Users द्वारा Select करवाया जाए तो इसके लिए Radio Buttons को फॉर्म में Define किया जाता हैं. Radio Buttons को भी <input> Tag द्वारा ही Define किया जाता हैं. बस type Attribute में Value को radio लिख दिया जाता हैं.

HTML Form में Radio Button Define करना

नीचे दिए गए HTML Code को ऊपर बनाई गई HTML File में लिखिए या इसे Copy करके Paste कीजिए और इसे Save कर दीजिए. आप चाहे तो एक नई फाईल भी बना सकते हैं.

<!DOCTYPE html>
<html>
<head><title> Radio Buttons Input Control Example</title></head>
<body>
<form>Select Your Official Language:
<input type=”radio” value=”hindi” name=”subject”> Hindi
<input type=”radio” value=”english” name=”subject”> English
<input type=”radio” value=”tamil” name=”subject”> Tamil
<input type=”radio” value=”urdu” name=”subject”> Urdu
<input type=”radio” value=”bangla” name=”subject”> Bangla</form>
</body>
</html>

जब आप ऊपर दिए गए HTML File को ब्राउजर में खोलेंगे तो आपक सामने इस प्रकार का परिणाम आएगा.



Select Your Official Language:
Hindi
English
Tamil
Urdu
Bangla

आप फॉर्म में Drop-down List भी बना सकते हैं, इसे Select Box Control के नाम से भी जाना जाता हैं. इस प्रकार के Input Control को <select> Tag द्वारा Define किया जाता हैं, और <option> Tag द्वारा विकल्पों को Define किया जाता हैं.

Form में Drop-down List Define करना

नीचे दिए गए HTML Code को ऊपर बनाई गई HTML File में लिखिए या इसे Copy करके Paste कीजिए और इसे Save कर दीजिए. आप चाहे तो एक नई फाईल भी बना सकते हैं.

<!DOCTYPE html>
<html>
<head><title> Drop-down List Input Control Example</title></head>
<body>
<form>Select Your State:
<select name=”dropdown”>
<option value=”delhi”> Delhi&lt/option>
<option value=”rajasthan”< Rajasthan</option>
<option value=”haryana”> Urdu<option>
</select></form>
</body>
</html>

जब आप ऊपर दिए गए HTML File को ब्राउजर में खोलेंगे तो आपक सामने इस प्रकार का परिणाम आएगा.



Select Your State:

File Upload Controls

Users से किसी प्रकार की फाईल Upload करवाने के लिए File Upload Control भी एक फॉर्म में Define किया जाता हैं. आप फोटो, Text File या किसी अन्य प्रकार की फाईल फॉर्म द्वारा Upload करवा सकते हैं. इसके लिए <input> Tag का ही इस्तेमाल किया जाता हैं. लेकिन, type Attribute में Value को file लिख दिया जाता हैं.

HTML Form में File Upload Box Define करना

नीचे दिए गए HTML Code को ऊपर बनाई गई HTML File में लिखिए या इसे Copy करके Paste कीजिए और इसे Save कर दीजिए. आप चाहे तो एक नई फाईल भी बना सकते हैं.

<!DOCTYPE html>
<html>
<head><title> File Upload Box Example</title></head>
<body>
<form>Upload Your Resume:
<input type=”file” name=”resume”>
</form>
</body>
</html>

जब आप ऊपर दिए गए HTML File को ब्राउजर में खोलेंगे तो आपक सामने इस प्रकार का परिणाम आएगा.



Upload Your Resume:

Submit and Reset Button बनाना

आप एक फॉर्म में विभिन्न प्रकार के HTML Buttons बना सकते हैं. इनमे प्रमुख रूप से Submit और Reset Button का ज्यादा इस्तेमाल किया जाता हैं. आप अन्य प्रकार के Clickable Buttons जैसे Image Button, Send Button आदि भी बना सकते हैं.

HTML Form में Clickable Buttons Define करना

आप Form में Clickable Button <input> Tag द्वारा Define कर सकते हैं. इसके लिए आपको type Attribute में Value को button Define करना हैं. आप नीचे दिए गए HTML Code को ऊपर बनाई गई HTML File में लिखिए या इसे Copy करके Paste कीजिए और इसे Save कर दीजिए. आप चाहे तो एक नई फाईल भी बना सकते हैं.

<!DOCTYPE html>
<html>
<head><title> Clickable Buttons Example</title></head>
<body>
<form><input type=”submit” name=”submit” value=”Submit”>
<input type=”reset” name=”reset” value=”Reset”>
<input type=”button” name=”send” value=”Send”>
<input type=”image” name=”imagebutton” src=”image url”>
</form>
</body>
</html>

जब आप ऊपर दिए गए HTML File को ब्राउजर में खोलेंगे तो आपक सामने इस प्रकार का परिणाम आएगा.






Grouping Form Data

आप एक ही Form में Users से कई प्रकार की जानकारी पाप्त कर सकते हैं. जिसमें निजी जानकारी, शैक्षिक जानकारी, व्यावसायिक जानकारी आदि हो सकती हैं.

एक प्रकार की जानकारी को आप एक नाम विशेष से शीर्षक दे सकते हैं. इस कार्य को Grouping करना कहते हैं. जिसे Fieldset और Legend Element द्वारा Define किया जाता हैं.

इसे Try कीजिए

<!DOCTYPE html>
<html>
<head><title> Grouping form Data Example</title></head>
<body>
<form><fieldset>
<legend>Personal Information:</legend>
First Name
<input type=”text” name=”fname”>
Last Name
<input type=”text” name=”lname”>
</fieldset>
<fieldset>
<legend>Log in Details:</legend>
User ID
<input type=”text” name=”ID”>
Password
<input type=”password” name=”password””>
</fieldset>
</form>
</body>
</html>

जब आप ऊपर दिए गए HTMl Code को सेव करके ब्राउजर में खोलेग तो आपके सामने कुछ इस प्रकार का परिणाम आएगा.



Personal Information:

First Name

Last Name

Log in Details:

User ID

Password

आपने क्या सीखा?

इस Lesson में हमने आपको HTML Form की पूरी जानकारी दी हैं. आपने जाना कि एक HTML Form कैसे बनाया जाता हैं? HTML Form में इस्तेमाल होने वाले विभिन्न Data Controls Fields के बारे में भी आपने जाना हैं. हमे उम्मीद हैं कि यह Lesson आपके लिए उपयोगी साबित होगा.

#BeDigital

लेख आपको पसंद आया?
👍👎

By TP Staff

लेखक: TP Staff

TP Staff, TutorialPandit की कम्प्यूटर और टेक्नोलॉजी पेशेवरों की टीम है, जिसका नेतृत्व जी पी गौतम द्वारा किया जाता है. TutorialPandit के माध्यम से भारत देश में हर साल लाखों लोग फ्री डिजिटल शिक्षा ग्रहण कर रहे है.

12 replies on “HTML Form in Hindi – HTML Form Element की हिंदी में जानकारी”

शोहेल जी, CSS Class या फिर CSS ID देखर सबमिट बटन को स्टाइलिश बना सकते है.

Leave a Reply

Your email address will not be published. Required fields are marked *