एचटीएमएल डिजाइन फॉर्म

<घंटा/>

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

एक फॉर्म साइट विज़िटर से इनपुट लेगा और फिर इसे सीजीआई, एएसपी स्क्रिप्ट या पीएचपी स्क्रिप्ट आदि जैसे बैक-एंड एप्लिकेशन पर पोस्ट करेगा। बैक-एंड एप्लिकेशन परिभाषित व्यावसायिक तर्क के आधार पर पास किए गए डेटा पर आवश्यक प्रसंस्करण करेगा। आवेदन।

HTML में

टैग का उपयोग फॉर्म बनाने के लिए किया जाता है और इसमें विभिन्न फॉर्म तत्व जैसे इनपुट, टेक्स्टरेरा आदि शामिल होते हैं -

<form action = "Script URL" method = "GET|POST">
form elements like input, textarea etc.
</form>

एक फॉर्म बनाने के लिए, आपको टेक्स्ट, पासवर्ड, जन्म तिथि के लिए फ़ील्ड, टेलीफोन, ईमेल, बटन आदि जैसे फ़ील्ड जोड़ने होंगे। इन सभी को हम <इनपुट> तत्वों के साथ जोड़ सकते हैं -

<टेबल> <थेड> क्रमांक <थ> टाइप और विवरण 1 पाठ
एक फ्री-फॉर्म टेक्स्ट फ़ील्ड, नाममात्र रूप से लाइन ब्रेक से मुक्त।
2 पासवर्ड
संवेदनशील जानकारी के लिए एक फ्री-फॉर्म टेक्स्ट फ़ील्ड, नाममात्र रूप से लाइन ब्रेक से मुक्त।
3 चेकबॉक्स
पूर्वनिर्धारित सूची से शून्य या अधिक मानों का एक सेट।
4 रेडियो
एक गणना मूल्य।
5 सबमिट करें
बटन का एक मुक्त रूप फॉर्म जमा करने की पहल करता है।
6 फ़ाइल
MIME प्रकार के साथ एक मनमाना फ़ाइल और वैकल्पिक रूप से एक फ़ाइल नाम।
7 छवि
एक विशेष छवि के आकार के सापेक्ष एक समन्वय, अतिरिक्त अर्थ के साथ कि यह अंतिम चयनित मान होना चाहिए और फॉर्म सबमिशन शुरू करता है।
8 छिपा हुआ
एक मनमाना स्ट्रिंग जो सामान्य रूप से उपयोगकर्ता को प्रदर्शित नहीं होती है।
9 चुनें
एक गणना मूल्य, रेडियो प्रकार की तरह।
10 textarea
एक फ्री-फॉर्म टेक्स्ट फ़ील्ड, नाममात्र रूप से बिना लाइन ब्रेक प्रतिबंध के ..
11 बटन
बटन का एक मुक्त रूप जो बटन से संबंधित किसी भी घटना को आरंभ कर सकता है।

हालांकि, HTML5 ने <इनपुट> तत्व के लिए अधिक विकल्प पेश किए -

<टेबल> <थेड> क्रमांक <थ> टाइप और विवरण 1 डेटाटाइम
एक दिनांक और समय (वर्ष, महीना, दिन, घंटा, मिनट, दूसरा, एक सेकंड का अंश) आईएसओ 8601 के अनुसार एन्कोड किया गया है और समय क्षेत्र यूटीसी पर सेट है।
2 डेटाटाइम-स्थानीय
एक दिनांक और समय (वर्ष, महीना, दिन, घंटा, मिनट, दूसरा, एक सेकंड का अंश) आईएसओ 8601 के अनुसार एन्कोड किया गया, जिसमें कोई समय क्षेत्र जानकारी नहीं है।
3 तारीख
आईएसओ 8601 के अनुसार एक तारीख (वर्ष, महीना, दिन) एन्कोड किया गया।
4 माह
आईएसओ 8601 के अनुसार एन्कोडेड एक वर्ष और एक महीने की तारीख।
5 सप्ताह
आईएसओ 8601 के अनुसार एन्कोडेड एक वर्ष और एक सप्ताह की संख्या वाली एक तिथि।
6 समय
एक समय (घंटा, मिनट, सेकंड, आंशिक सेकंड) आईएसओ 8601 के अनुसार एन्कोड किया गया।
7 संख्या
यह केवल संख्यात्मक मान स्वीकार करता है। चरण विशेषता सटीक निर्दिष्ट करती है, डिफ़ॉल्ट रूप से 1।
8 श्रेणी
श्रेणी प्रकार का उपयोग इनपुट फ़ील्ड के लिए किया जाता है जिसमें संख्याओं की श्रेणी से मान होना चाहिए।
9 ईमेल
यह केवल ईमेल मूल्य स्वीकार करता है। इस प्रकार का उपयोग इनपुट फ़ील्ड के लिए किया जाता है जिसमें एक ई-मेल पता होना चाहिए। यदि आप एक साधारण टेक्स्ट सबमिट करने का प्रयास करते हैं, तो यह केवल ईमेल पता ईमेल@example.com प्रारूप में दर्ज करने के लिए बाध्य करता है।
10 यूआरएल
यह केवल URL मान स्वीकार करता है। इस प्रकार का उपयोग इनपुट फ़ील्ड के लिए किया जाता है जिसमें URL पता होना चाहिए। यदि आप एक साधारण टेक्स्ट सबमिट करने का प्रयास करते हैं, तो यह केवल URL पते को https://www.example.com प्रारूप में या https://example.com प्रारूप में दर्ज करने के लिए बाध्य करता है।

उदाहरण

फ़ॉर्म बनाने के लिए अब एक उदाहरण देखते हैं -

<!DOCTYPE html>
<html>
<body>
<h2>Register</h2>
<form action="" method="get">
Id: <input type="text" name="id" placeholder="Enter UserId here..."><br>
Password: <input type="password" name="pwd" placeholder="Enter password here..."><br>
DOB: <input type="date" name="dob"><br>
Telephone: <input type="tel" name="tel" placeholder="Enter mobile number here..."><br>
Email: <input type="email" name="email" placeholder="Enter email here..."><br><br>
<button type="submit" value="Submit">Submit</button>
</form>
/body>
</html>

आउटपुट

यह निम्नलिखित आउटपुट देगा -

एचटीएमएल डिजाइन फॉर्म

उदाहरण

अब, हम एक और उदाहरण देखेंगे जिसमें हम एक फॉर्म बना रहे हैं, जिसमें से एक फ़ील्ड चेकबॉक्स के रूप में है -

<!DOCTYPE html>
<html>
<body>
<h2>Register</h2>
<form action="" method="get">
Id: <input type="text" name="id" placeholder="Enter UserId here..." size = "25"><br>
Password: <input type="password" name="pwd" placeholder="Enter password here..."><br>
DOB: <input type="date" name="dob" placeholder="Enter date of birth here..."><br>
Telephone: <input type="tel" name="tel" placeholder="Enter mobile number here..."><br>
Email: <input type="email" name="email" placeholder="Enter email here..." size = "35"><br><br>
<input type="checkbox" name="vehicle" value="Bike" checked>Newsletter Subscription: <br>
<button type="submit" value="Submit">Submit</button>
</form>
</body>
</html>

यह निम्नलिखित आउटपुट देगा -

एचटीएमएल डिजाइन फॉर्म