📝

HTML Forms के मूल तत्वों का सार

Nov 12, 2025

Overview

इस लेक्चर में HTML Forms की मूल अवधारणा, आवश्यक टैग्स और सामान्य इनपुट प्रकारों की समझ दी गई।
फॉर्म का लक्ष्य: यूज़र से डेटा कलेक्ट करना; अगले लेक्चर में जटिल फॉर्म बनाना कवर होगा।

HTML Form का परिचय

फॉर्म: यूज़र इनपुट इकट्ठा करने का स्ट्रक्चर; लॉगिन, साइनअप, सर्च जैसी जगहों पर उपयोग।
मुख्य विचार: फॉर्म में विभिन्न इनपुट एलिमेंट्स रखकर डेटा लिया जाता है।

आधारभूत टैग्स: form, input, label

form टैग: HTML फॉर्म का कंटेनर; सभी फॉर्म फ़ील्ड इसके अंदर।
input टैग: यूज़र इनपुट लेने के लिए; कई प्रकारों में दिख सकता है।
label टैग: फ़ील्ड का वर्णन/टेक्स्ट; यूज़र को बताता है क्या भरना है।

label-for और input-id का लिंक

नियम: label का for एट्रिब्यूट = संबंधित input की id वैल्यू।
लाभ: लेबल पर क्लिक करने से संबंधित इनपुट फोकस/सेलेक्ट होता है; एक्सेसिबिलिटी सुधरती है।

अक्सर उपयोग होने वाले input types

text: साधारण एक-लाइन टेक्स्ट इनपुट (जैसे नाम, ईमेल टेक्स्ट रूप में)।
password: टाइप किया टेक्स्ट डॉट्स में दिखता है; सुरक्षा हेतु।
radio: एक समूह में से केवल एक विकल्प चुनने हेतु।
checkbox: एक या अनेक विकल्प चुनने हेतु।
date: डेट पिकर से तारीख़ चुनने हेतु।
file: फ़ाइल चुनकर अपलोड के लिए।
submit/button: फॉर्म सबमिट या कस्टम एक्शन वाले बटन।
image: इमेज को बटन की तरह उपयोग; src, alt, width/height सेट कर सकते हैं।

Input के महत्वपूर्ण attributes

type: इनपुट का प्रकार तय करता है (text, password, date आदि)।
id: यूनिक पहचान; लेबल लिंक और JS/स्टाइलिंग के लिए।
name: डेटा की कुंजी; सबमिशन पर सर्वर को इसी नाम से वैल्यू जाती है।
value: डिफॉल्ट वैल्यू; submit/button पर बटन का टेक्स्ट भी सेट कर सकता है।
placeholder: फेडेड हिंट-टेक्स्ट; यूज़र को बताता है क्या भरना है।

Dropdown: select और option

select: ड्रॉपडाउन मेन्यू बनाता है; name/id सेट करें।
option: ड्रॉपडाउन के विकल्प; value और दृश्य टेक्स्ट दे सकते हैं।
एकल चयन डिफॉल्ट; मल्टी-सेलेक्ट संभव, शोध हेतु कार्य सौंपा गया।

मल्टी-लाइन इनपुट: textarea

उद्देश्य: मल्टी-लाइन टेक्स्ट लेना; फीडबैक/एड्रेस आदि के लिए।
rows, cols: दृश्य आकार नियंत्रित; सेट करना अच्छी प्रैक्टिस।
id, name, placeholder: अन्य इनपुट की तरह उपयोग करें।

फॉर्म संरचना: fieldset और legend

fieldset: संबंधित फ़ील्ड्स को एक सेक्शन में समूहित करता है; बॉक्स जैसा दिखता है।
legend: fieldset का शीर्षक/कैप्शन; सेक्शन का उद्देश्य स्पष्ट करता है।

फॉर्म सबमिशन का आधार

type="submit": क्लिक पर फॉर्म डेटा सर्वर को भेजने की तैयारी।
form का action: सबमिट होने पर डेटा कहाँ/कैसे प्रोसेस होगा; आगे कवर होगा।
कस्टम बटन से भी JS द्वारा सबमिट/हैंडल किया जा सकता है।

उदाहरणतः बनाए गए एलिमेंट्स

टेक्स्ट फील्ड: नाम/ईमेल इनपुट के लिए।
पासवर्ड फील्ड: गोपनीय इनपुट हेतु।
रेडियो बटन्स: gender जैसे एक-चयन विकल्प।
चेकबॉक्स: भाषाओं जैसे बहु-चयन विकल्प।
डेट पिकर: तारीख़ चयन।
फाइल अपलोड: choose file बटन।
इमेज बटन: src के साथ क्लिकेबल इमेज।
ड्रॉपडाउन: स्नैक्स विकल्पों का चयन।
टेक्स्टएरिया: मल्टी-लाइन कमेंट्स/टेक्स्ट।

संरचित सारांश तालिका

एलिमेंट/टैग	मुख्य उपयोग	महत्वपूर्ण एट्रिब्यूट्स	टिप्पणी
form	फॉर्म कंटेनर	action, method	सभी फ़ील्ड्स इसी के भीतर
input (text)	एक-लाइन टेक्स्ट	type, id, name, placeholder, value	साधारण इनपुट
input (password)	छुपा टेक्स्ट	type="password", id, name	डॉट्स रूप में दिखता है
input (radio)	एक-चयन विकल्प	type="radio", id, name	ग्रुपिंग हेतु name समान
input (checkbox)	बहु-चयन विकल्प	type="checkbox", id, name	एक से अधिक टिक संभव
input (date)	तारीख़ चयन	type="date", id, name	नेटिव डेट पिकर
input (file)	फाइल चयन	type="file", id, name	ब्राउज़र फाइल डायलॉग
input (submit/button)	सबमिशन/एक्शन	type, value, id	बटन लेबल value से
input (image)	इमेज बटन	type="image", src, alt, width/height	क्लिक पर एक्शन
label	फ़ील्ड वर्णन	for	for = संबंधित input की id
select	ड्रॉपडाउन	id, name	भीतर option आवश्यक
option	ड्रॉपडाउन विकल्प	value	दृश्य टेक्स्ट अलग हो सकता
textarea	मल्टी-लाइन इनपुट	rows, cols, id, name, placeholder	आकार rows/cols से
fieldset	फ़ील्ड समूह	—	दृश्य बॉक्स बनता
legend	समूह शीर्षक	—	fieldset का कैप्शन

Key Terms & Definitions

Form: यूज़र इनपुट कलेक्ट करने का HTML स्ट्रक्चर।
Input Type: इनपुट का प्रदर्शन एवं व्यवहार तय करने वाला प्रकार।
Label-for: लेबल को इनपुट से जोड़ने वाला एट्रिब्यूट; for=id।
Placeholder: इनपुट के भीतर फेडेड हिंट टेक्स्ट।
Fieldset/Legend: फ़ील्ड समूह और उसका शीर्षक।

Action Items / Next Steps

रेडियो बटन में केवल एक चयन सक्षम करने का तरीका खोजें; कारण सहित लागू करें।
select में multiple विकल्प चयन सक्षम करने का तरीका ढूंढ़ें और टेस्ट करें।
MDN डॉक्यूमेंटेशन पर HTML forms, input types, textarea, fieldset/legend पढ़कर एट्रिब्यूट्स एक्सप्लोर करें।
अभ्यास: एक मिनी फॉर्म बनाएं जिसमें text, password, radio, checkbox, date, file, select, textarea, submit शामिल हों; label-for/id सही लिंक करें।

Full transcript