Forms & Input Tags Free web designing Course Tutorials #8
इस HTML ट्यूटोरियल में HTML में उपयोग किए जाने वाले फॉर्म और इनपुट टैग की सीख शामिल है। हम "tut8.html" के रूप में एक नई HTML फ़ाइल बनाकर शुरू करने जा रहे हैं और एम्मेट संक्षिप्त नाम के माध्यम से एक बॉयलरप्लेट जोड़ रहे हैं। प्रपत्र HTML का एक बहुत महत्वपूर्ण हिस्सा हैं। यह दस्तावेज़ अनुभाग का प्रतिनिधित्व करता है जिसमें सूचनाओं को प्रस्तुत करने के लिए संवादात्मक नियंत्रण होता है।
जब भी हम HTML में एक <form> टैग जोड़ते हैं, तो यह भविष्य के संदर्भ के लिए बैकेंड में उस विशेष फॉर्म को सबमिट करने के लिए कुछ कार्रवाई के लिए पूछने वाला है। इसलिए, अब हम इसे backend.php के रूप में लिखेंगे। एक फॉर्म में जमा किया गया सभी डेटा इसे सबमिट करने के बाद बैकएंड "बैकएंड.पीपी" में अपने आप स्टोर हो जाएगा।
टेम्पलेट जैसा दिखेगा-
<form action= “backend.php”>
फिर <इनपुट> टैग आता है जो फॉर्म के अंदर मौजूद होता है, जहां उपयोगकर्ता इनपुट प्रदान करता है। ये इनपुट किसी भी प्रकार के हो सकते हैं चाहे टेक्स्ट, बटन, चेकबॉक्स, दिनांक, समय, आदि। इनपुट टैग का उपयोग उपयोगकर्ता से डेटा स्वीकार करने के लिए वेब-आधारित रूपों के लिए इंटरैक्टिव नियंत्रण बनाने के लिए किया जाता है।
<Span> एक इन-लाइन तत्व है और <div> एक ब्लॉक तत्व है। जिसका अर्थ है, यदि हम अलग-अलग इनपुट के लिए दो अलग-अलग div टैग का उपयोग करते हैं, तो सभी इनपुट अलग-अलग लाइनों पर आएंगे। हम आगामी ट्यूटोरियल में विस्तार और डिव के बारे में जानेंगे। तब तक हम लाइन को तोड़ने के लिए <br> टैग का उपयोग करेंगे।
- पाठ के रूप में इनपुट प्राप्त करने के लिए, वाक्यविन्यास है-
<input type= “text”>
- फार्म में एक ईमेल के रूप में इनपुट प्रकार प्राप्त करने के लिए, वाक्यविन्यास है-
<div>
Email: <input type="email" name="myEmail">
</div>
यहां नाम का उपयोग किया जाता है ताकि बैकेंड उस टैग को पहचान सके जो हम उपयोग कर रहे हैं।
- फॉर्म में सबमिट बटन प्राप्त करने के लिए, सिंटैक्स है-
<div>
<input type= “submit” value= “submit now”>
</div>
- हम फॉर्म में तारीख और समय भी जोड़ सकते हैं। इन्हें जोड़ने के लिए, सामान्य वाक्यविन्यास है-
<div>
<input type= “date” name= ”myDate” id= “”>
</div>
यह "dd / mm / yyyy" के प्रारूप में पूर्ण तिथि प्रपत्र देगा। "
- HTML फॉर्म में किसी भी संख्यात्मक पाठ को जोड़ने के लिए, वाक्य रचना है-
<div>
Number: <input type= “number” name “myNumber”>
</div>
कई ऑनलाइन फॉर्म भरते समय, आपने फॉर्म में रेडियो बटन और चेकबॉक्स देखे होंगे। रेडियो बटन ऐसे बटन हैं जो सभी में से किसी एक विकल्प का चयन करने की अनुमति देते हैं। उदाहरण के लिए, लिंग का चयन करते समय, हम केवल पुरुष या महिला का चयन कर सकते हैं। जबकि चेकबॉक्स उपलब्ध कई विकल्पों को चुनने की अनुमति देता है। दोनों स्वरूपों का उदाहरण इस प्रकार है-
- चेकबॉक्स के लिए-
<div>
Are you eligible?: <input type="checkbox" name="myEligibility" checked>
</div>
- रेडियो बटन के लिए-
<div>
Gender: Male <input type="radio" name="myGender"> Female <input type="radio" name="myGender">
Other <input type="radio" name="myGender">
</div>
फॉर्म में दर्ज सभी जानकारी को रीसेट करने के लिए, हम एक रीसेट बटन की मदद लेते हैं। रीसेट बटन प्राप्त करने के लिए, हमें लिखना होगा-
<div>
Input type= “reset” value= “Reset Now”
</div>
- इन सभी इनपुट टैगों को डालने के बाद, हमारा फॉर्म इस तरह दिखेगा-
ये HTML में फ़ॉर्म के अंदर उपयोग किए जाने वाले बुनियादी इनपुट टैग के कुछ उदाहरण हैं। इनके अलावा, कई और इनपुट टैग उपलब्ध हैं, लेकिन आपको इन सभी को एक बार में सीखने की आवश्यकता नहीं है। आप हमेशा उपलब्ध संदर्भों की मदद ले सकते हैं। और एक और सलाह, कभी भी सभी चीजों को समझने की कोशिश न करें। अभ्यास मनुष्य को परिपूर्ण बनाता है।
Code:-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Forms</title>
</head>
<body>
<h2>This is HTML forms tutorial</h2>
<form action="backend.php">
<label for="name"> Name</label>
<div>
<input type="text" name="myName" id="name">
</div>
<br>
<div>
Role: <input type="text" name="myRole">
</div>
<br>
<div>
Email: <input type="email" name="myEmail">
</div>
<br>
<div>
Date: <input type="date" name="myDate">
</div>
<br>
<div>
Bonus: <input type="number" name="myBonus">
</div>
<br>
<div>
Are you eligible?: <input type="checkbox" name="myEligibility" checked>
</div>
<br>
<div>
Gender: Male <input type="radio" name="myGender"> Female <input type="radio" name="myGender">
Other <input type="radio" name="myGender">
</div>
<br>
<div>
Write about yourself: <br><textarea name="myText" cols="90" rows="10"></textarea>
</div>
<br>
<div>
<label for="car">Car</label>
<select name="myCar" id="car">
<option value="ind">Indica</option>
<option value="swf" selected>Swift</option>
</select>
</div>
<br>
<div>
<input type="submit" value="Submit Now">
<input type="reset" value="Reset Now">
</div>
</form>
</body>
</html>
