HTML फ़ॉर्म: फ़ॉर्म बनाने के बुनियादी हिस्से

फ़ॉर्म बनाते समय आप फ़्रेमवर्क या फ़ॉर्म बिल्डर इस्तेमाल करते हैं। पर अंदर से वे सब HTML फ़ॉर्म ही इस्तेमाल करते हैं। अगर आप समझ जाएं कि HTML फ़ॉर्म कैसे काम करते हैं, तो बाकी सब समझ आ जाता है। फिर आप किसी टूल या फ़्रेमवर्क पर निर्भर नहीं रहते। आपको बुनियाद पता होती है।

इस लेख में HTML फ़ॉर्म एलिमेंट, इनपुट टाइप, लेबल, वैलिडेशन और फ़ॉर्म असल में कैसे सबमिट होते हैं, यह बताया गया है। कोई फ़्रेमवर्क नहीं। कोई लाइब्रेरी नहीं। बस HTML और वे सिद्धांत जिन पर बाकी सब टिका है।

HTML फ़ॉर्म एलिमेंट

फ़ॉर्म एक HTML एलिमेंट है जो फ़ॉर्म फ़ील्ड को घेरता है और उनका डेटा कहीं भेजता है। बुनियादी ढांचा यह है:

<form action="/submit" method="POST">

<input type="text" name="email">

<button type="submit">Send</button>

</form>

तीन एट्रिब्यूट मायने रखते हैं। action एट्रिब्यूट बताता है कि फ़ॉर्म डेटा कहां भेजे। "/submit" का मतलब है अपने सर्वर के /submit एंडपॉइंट पर भेजना। अगर action खाली है, तो फ़ॉर्म मौजूदा पेज पर ही सबमिट होता है। method एट्रिब्यूट बताता है कि डेटा कैसे जाएगा। POST डेटा को रिक्वेस्ट बॉडी में भेजता है (ज़्यादा सुरक्षित, URL में नहीं दिखता)। GET डेटा को URL के अंत में जोड़ता है (संवेदनशील डेटा के लिए असुरक्षित, सर्च क्वेरी के लिए उपयोगी)। enctype एट्रिब्यूट सिर्फ़ फ़ाइल अपलोड के लिए चाहिए। जब आपके फ़ॉर्म में फ़ाइल इनपुट फ़ील्ड हो, तो enctype="multipart/form-data" सेट करें।

फ़ॉर्म टैग के अंदर की हर चीज़ सबमिशन का हिस्सा होती है। जब यूज़र सबमिट बटन दबाता है, तो ब्राउज़र सभी नाम वाले फ़ील्ड इकट्ठा करता है और बताए गए method से action URL पर भेज देता है।

इनपुट टाइप और उनका काम

text

<input type="text" name="first_name">

एक लाइन वाला टेक्स्ट फ़ील्ड। ब्राउज़र एक साधारण टेक्स्ट बॉक्स दिखाता है। कोई वैलिडेशन नहीं। कोई भी अक्षर चलता है।

email

<input type="email" name="email">

ईमेल पते के लिए फ़ील्ड। डेस्कटॉप पर यह टेक्स्ट फ़ील्ड जैसा दिखता है। मोबाइल पर ब्राउज़र ईमेल कीबोर्ड दिखाता है। सबमिट पर ब्राउज़र जांचता है कि वैल्यू ईमेल जैसी दिखती है (उसमें @ है)। सिर्फ़ बुनियादी वैलिडेशन।

password

<input type="password" name="password">

टाइप करते समय टेक्स्ट बिंदुओं या तारों के रूप में छिपा रहता है। वैल्यू फिर भी सादे टेक्स्ट में जाती है, इसलिए पासवर्ड फ़ील्ड वाले फ़ॉर्म पर हमेशा HTTPS इस्तेमाल करें।

number

<input type="number" name="age">

डेस्कटॉप पर यह टेक्स्ट फ़ील्ड है जो सिर्फ़ संख्याएं लेता है। मोबाइल पर ब्राउज़र नंबर कीबोर्ड दिखाता है। ब्राउज़र संख्या के अलावा कुछ भी डालने नहीं देता।

date

<input type="date" name="birth_date">

डेट पिकर। जिन ब्राउज़र और डिवाइस पर यह सपोर्ट है, वहां फ़ील्ड पर क्लिक करने से कैलेंडर खुलता है। वैल्यू YYYY-MM-DD फ़ॉर्मेट में होती है।

checkbox

<input type="checkbox" name="agree" value="yes">

एक बॉक्स जो ऑन और ऑफ़ होता है। अगर चुना हुआ है, तो सबमिट पर फ़ील्ड की वैल्यू भेजी जाती है। अगर चुना नहीं है, तो फ़ील्ड बिल्कुल नहीं भेजा जाता।

radio

<input type="radio" name="plan" value="starter"> Starter

<input type="radio" name="plan" value="pro"> Pro

एक ही name वाले कई रेडियो बटन एक ग्रुप की तरह काम करते हैं। एक समय में सिर्फ़ एक चुना जा सकता है। चुने हुए की वैल्यू सबमिट पर भेजी जाती है।

select (ड्रॉपडाउन)

<select name="country">

<option value="us">United States</option>

<option value="ca">Canada</option>

</select>

ड्रॉपडाउन मेन्यू। चुने हुए ऑप्शन की वैल्यू सबमिट पर भेजी जाती है।

textarea

<textarea name="message"></textarea>

कई लाइन वाला टेक्स्ट फ़ील्ड। यूज़र पूरे पैराग्राफ़ लिख सकते हैं। वैल्यू में लाइन ब्रेक शामिल होते हैं।

file

<input type="file" name="resume">

एक बटन जो डिवाइस का फ़ाइल पिकर खोलता है। चुनी हुई फ़ाइल सर्वर को भेजी जाती है। इसके लिए फ़ॉर्म एलिमेंट पर enctype="multipart/form-data" ज़रूरी है।

hidden

<input type="hidden" name="user_id" value="12345">

ऐसा फ़ील्ड जो दिखता नहीं पर सबमिट पर भेजा जाता है। उस ट्रैकिंग डेटा के लिए उपयोगी है जो शामिल होना चाहिए पर यूज़र को बदलना नहीं चाहिए।

लेबल और एक्सेसिबिलिटी

इनपुट फ़ील्ड के साथ हमेशा लेबल जोड़ें।

<label for="email">Email address</label>

<input type="email" id="email" name="email">

लेबल का for एट्रिब्यूट इनपुट के id से मेल खाना चाहिए। जब आप इसे सही करते हैं:

स्क्रीन रीडर लेबल और फ़ील्ड को साथ बोलते हैं, लेबल पर क्लिक करने से इनपुट फ़ील्ड फ़ोकस में आता है, और मोबाइल यूज़र को छूने के लिए बड़ा हिस्सा मिलता है।

लेबल कभी न छोड़ें। अगर लेबल को दिखने से छिपाना हो, तो CSS से छिपाएं पर उसे HTML में रखें। इसे "visually hidden" लेबल कहते हैं।

जुड़े हुए फ़ील्ड को ग्रुप करना

जुड़े हुए फ़ील्ड के लिए fieldset और legend इस्तेमाल करें।

<fieldset>

<legend>Shipping address</legend>

<input type="text" name="street">

<input type="text" name="city">

</fieldset>

legend एलिमेंट स्क्रीन रीडर को ग्रुप के बारे में बताता है। फ़ील्डसेट रेडियो बटन और चेकबॉक्स को दिखने और अर्थ, दोनों तरह से व्यवस्थित करने में मदद करते हैं।

फ़ॉर्म सबमिशन और HTTP मेथड

जब यूज़र सबमिट बटन दबाता है, तो ब्राउज़र सभी नाम वाले फ़ील्ड इकट्ठा करता है, डेटा को एनकोड करता है (डिफ़ॉल्ट रूप से application/x-www-form-urlencoded), method (POST या GET) के साथ action URL पर HTTP रिक्वेस्ट भेजता है और जवाब का इंतज़ार करता है।

सर्वर रिक्वेस्ट पाता है और डेटा प्रोसेस कर सकता है। डेटा की-वैल्यू जोड़ों के रूप में आता है। अगर फ़ॉर्म method POST है और action "/submit" है, तो रिक्वेस्ट इस तरह दिखती है। POST /submit HTTP/1.1, जिसमें Content-Type application/x-www-form-urlencoded होता है, फिर डेटा email=user@example.com&name=John के रूप में दिखता है।

सर्वर इस डेटा को पार्स करता है और जवाब देता है। अगर जवाब एक पेज है, तो ब्राउज़र उसे लोड करता है। अगर जवाब रीडायरेक्ट है, तो ब्राउज़र नए URL पर चला जाता है।

क्लाइंट-साइड वैलिडेशन

HTML में बिल्ट-इन वैलिडेशन एट्रिब्यूट होते हैं। ब्राउज़र फ़ॉर्म भेजने से पहले इन्हें जांचता है।

required

<input type="text" name="email" required>

फ़ील्ड में वैल्यू होना ज़रूरी है। अगर खाली छोड़ा जाए, तो फ़ॉर्म सबमिट नहीं होगा और ब्राउज़र एरर दिखाएगा।

minlength और maxlength

<input type="password" name="password" minlength="8" maxlength="128">

वैल्यू में अक्षरों की गिनती बताई गई सीमा के बीच होनी चाहिए।

min और max

<input type="number" name="age" min="18" max="120">

नंबर फ़ील्ड के लिए वैल्यू इस रेंज के अंदर होनी चाहिए।

pattern

<input type="text" name="zip_code" pattern="[0-9]{5}">

एक रेगुलर एक्सप्रेशन जिससे वैल्यू मेल खानी चाहिए। पांच अंकों का ज़िप कोड [0-9]{5} से मेल खाता है।

क्लाइंट-साइड वैलिडेशन यूज़र की सुविधा के लिए है। यह उन्हें गलत डेटा भेजने और सर्वर से एरर देखने से रोकता है। पर सुरक्षा के लिए कभी क्लाइंट-साइड वैलिडेशन पर भरोसा न करें। सर्वर पर भी हमेशा वैलिडेट करें।

type="submit" और type="button" का फ़र्क समझें

<button type="submit">Send</button>

<button type="button">Save</button>

type="submit" वाला बटन क्लिक करने पर फ़ॉर्म सबमिट करता है। type="button" वाला बटन डिफ़ॉल्ट रूप से कुछ नहीं करता। जब आप JavaScript इवेंट हैंडलर जोड़ना चाहें, तब type="button" इस्तेमाल करें।

कई डेवलपर <button> को बिना type बताए इस्तेमाल करते हैं। इसका डिफ़ॉल्ट type="submit" होता है, जो आमतौर पर वही है जो आप चाहते हैं। फिर भी साफ़ लिखें ताकि कोई चौंकाने वाली बात न हो।

HTML फ़ॉर्म समझना क्यों ज़रूरी है

अगर आप किसी JavaScript फ़्रेमवर्क का इस्तेमाल करते हैं, तो आप HTML फ़ॉर्म के ऊपर ही बना रहे हैं। फ़्रेमवर्क ब्योरे छिपा देते हैं, पर बुनियादी सिद्धांत वही रहते हैं। फ़ॉर्म अब भी किसी एंडपॉइंट पर सबमिट होता है। वैलिडेशन अब भी करना पड़ता है। सर्वर को डेटा अब भी संभालना पड़ता है।

जब आपके फ़ॉर्म हैंडलिंग में कुछ टूटता है, तो HTML की समझ डीबग करने में मदद करती है। आपको पता होता है कि डेटा कहां से आता है, कैसे एनकोड होता है और सर्वर को क्या मिलना चाहिए। यही बुनियाद है।

ज़्यादातर आधुनिक वेब ऐप अब पारंपरिक फ़ॉर्म सबमिशन इस्तेमाल नहीं करते। वे JavaScript से फ़ॉर्म को पकड़ते हैं, वैलिडेट करते हैं और _blocked_ या किसी HTTP लाइब्रेरी से डेटा भेजते हैं। पर पहले HTML वाला तरीका जान लें, तो ये पैटर्न समझ आने लगते हैं।

WEMASY में फ़ॉर्म

WEMASY में फ़ॉर्म टूल है, और आप फ़ॉर्म सीधे अपनी वेबसाइट पर बना सकते हैं। आप मुफ़्त में शुरू कर सकते हैं और पेड प्लान 7 दिन आज़मा सकते हैं।

प्लान की जानकारी के लिए WEMASY प्राइसिंग पेज देखें।

अक्सर पूछे जाने वाले सवाल