HTML फॉर्म डिज़ाइन: इनपुट टाइप्स, HTML5 फीचर्स और उदाहरण

HTML फॉर्म्स तब आवश्यक होते हैं जब आप साइट विज़िटर से डेटा एकत्र करना चाहते हैं। उदाहरण के लिए, उपयोगकर्ता पंजीकरण के दौरान आप नाम, ईमेल पता, क्रेडिट कार्ड आदि जैसी जानकारी एकत्र करना चाहेंगे।

एक फॉर्म साइट विज़िटर से इनपुट लेता है और फिर इसे बैक-एंड एप्लिकेशन (जैसे CGI, ASP स्क्रिप्ट या PHP स्क्रिप्ट) पर पोस्ट करता है। बैक-एंड एप्लिकेशन परिभाषित बिजनेस लॉजिक के आधार पर पास किए गए डेटा पर आवश्यक प्रोसेसिंग करता है।

बेसिक फॉर्म सिंटैक्स

<form action="Script URL" method="GET|POST"> 
  फॉर्म एलिमेंट्स जैसे input, textarea आदि 
</form>

सामान्य इनपुट टाइप्स (HTML4)

क्र.सं.	प्रकार और विवरण
1	text एक फ्री-फॉर्म टेक्स्ट फील्ड, नाममात्र रूप से लाइन ब्रेक से मुक्त।
2	password संवेदनशील जानकारी के लिए फ्री-फॉर्म टेक्स्ट फील्ड, नाममात्र रूप से लाइन ब्रेक से मुक्त।
3	checkbox प्रीडिफाइंड लिस्ट से शून्य या अधिक मान।
4	radio एक गणना मान (एक समय में एक चयन)।
5	submit फॉर्म सबमिशन शुरू करने वाला बटन।
6	file एक मनमाना फाइल MIME टाइप और वैकल्पिक फाइल नाम के साथ।
7	image एक विशेष इमेज के आकार के सापेक्ष कोऑर्डिनेट, फॉर्म सबमिशन शुरू करता है।
8	hidden एक मनमाना स्ट्रिंग जो सामान्य रूप से उपयोगकर्ता को प्रदर्शित नहीं होती।
9	select एक गणना मान, रेडियो टाइप की तरह।
10	textarea एक फ्री-फॉर्म टेक्स्ट फील्ड, नाममात्र रूप से बिना लाइन ब्रेक प्रतिबंधों के।
11	button एक बटन जो बटन से संबंधित किसी भी इवेंट को शुरू कर सकता है।

HTML5 में नए इनपुट टाइप्स

क्र.सं.	प्रकार और विवरण
1	datetime UTC टाइम ज़ोन के साथ ISO 8601 के अनुसार दिनांक और समय।
2	datetime-local टाइम ज़ोन जानकारी के बिना ISO 8601 के अनुसार दिनांक और समय।
3	date ISO 8601 के अनुसार दिनांक (वर्ष, महीना, दिन)।
4	month ISO 8601 के अनुसार वर्ष और महीना।
5	week ISO 8601 के अनुसार वर्ष और सप्ताह संख्या।
6	time ISO 8601 के अनुसार समय (घंटा, मिनट, सेकंड)।
7	number केवल संख्यात्मक मान स्वीकार करता है। step एट्रिब्यूट सटीकता निर्दिष्ट करता है (डिफ़ॉल्ट 1)।
8	range संख्याओं की एक रेंज से मान के लिए इनपुट फील्ड।
9	email केवल ईमेल मान स्वीकार करता है। ईमेल एड्रेस फॉर्मेट मान्य करता है।
10	url केवल URL मान स्वीकार करता है। URL फॉर्मेट मान्य करता है।

उदाहरण 1: बेसिक रजिस्ट्रेशन फॉर्म

<!DOCTYPE html>
<html>
<body>
  <h2>रजिस्टर</h2>
  <form action="" method="get">
    आईडी: <input type="text" name="id" placeholder="यूज़र आईडी यहाँ दर्ज करें..."><br>
    पासवर्ड: <input type="password" name="pwd" placeholder="पासवर्ड यहाँ दर्ज करें..."><br>
    जन्म तिथि: <input type="date" name="dob"><br>
    टेलीफोन: <input type="tel" name="tel" placeholder="मोबाइल नंबर यहाँ दर्ज करें..."><br>
    ईमेल: <input type="email" name="email" placeholder="ईमेल यहाँ दर्ज करें..."><br><br>
    <button type="submit" value="Submit">सबमिट</button>
  </form>
</body>
</html>

उदाहरण 2: चेकबॉक्स के साथ फॉर्म

<!DOCTYPE html>
<html>
<body>
  <h2>रजिस्टर</h2>
  <form action="" method="get">
    आईडी: <input type="text" name="id" placeholder="यूज़र आईडी यहाँ दर्ज करें..." size="25"><br>
    पासवर्ड: <input type="password" name="pwd" placeholder="पासवर्ड यहाँ दर्ज करें..."><br>
    जन्म तिथि: <input type="date" name="dob" placeholder="जन्म तिथि यहाँ दर्ज करें..."><br>
    टेलीफोन: <input type="tel" name="tel" placeholder="मोबाइल नंबर यहाँ दर्ज करें..."><br>
    ईमेल: <input type="email" name="email" placeholder="ईमेल यहाँ दर्ज करें..." size="35"><br><br>
    <input type="checkbox" name="vehicle" value="Bike" checked> न्यूज़लेटर सब्सक्रिप्शन: <br>
    <button type="submit" value="Submit">सबमिट</button>
  </form>
</body>
</html>

फॉर्म डिज़ाइन के सर्वोत्तम अभ्यास

हमेशा <label> टैग का उपयोग करें for एट्रिब्यूट के साथ
आवश्यक फील्ड्स के लिए required एट्रिब्यूट जोड़ें
उपयोगकर्ता मार्गदर्शन के लिए placeholder का उपयोग करें
संबंधित फील्ड्स को <fieldset> और <legend> से समूहित करें
सर्वर-साइड मान्यकरण हमेशा करें (क्लाइंट-साइड के अतिरिक्त)