HTML फ़ॉर्म बनाना

HTML फ़ॉर्म बनाना

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

HTML फ़ॉर्म उपयोगकर्ता का इनपुट एकत्र करने के लिए उपयोग किए जाते हैं। इनके माध्यम से उपयोगकर्ता फ़ील्ड भर सकते हैं, विकल्प चुन सकते हैं और संसाधित करने के लिए डेटा सर्वर पर भेज सकते हैं।

उदाहरण: ऐसा लॉगिन फ़ॉर्म जिसमें उपयोगकर्ता अपना उपयोगकर्ता नाम और पासवर्ड दर्ज करते हैं।

मुख्य बिंदु: फ़ॉर्म उपयोगकर्ता और आपकी PHP स्क्रिप्ट के बीच कड़ी का काम करते हैं।

बुनियादी HTML फ़ॉर्म बनाने का तरीका यहाँ दिया गया है:

व्याख्या:

• action: फ़ॉर्म डेटा संभालने वाली PHP फ़ाइल निर्दिष्ट करता है।
• method: डेटा भेजने की विधि (GET या POST) निर्दिष्ट करता है।
• required: यह सुनिश्चित करता है कि फ़ॉर्म जमा करने से पहले फ़ील्ड भरना आवश्यक हो।

<form action="process.php" method="POST">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name" required>
  <button type="submit">Submit</button>
</form>

अलग-अलग प्रकार के डेटा को एकत्र करने के लिए फ़ॉर्म में विभिन्न इनपुट प्रकार शामिल किए जा सकते हैं:

• text: एक-पंक्ति वाले टेक्स्ट इनपुट के लिए।
• email: ईमेल पतों के लिए।
• password: पासवर्ड इनपुट के लिए।
• checkbox: बहुविकल्पीय चयन के लिए।
• radio: एकल विकल्प चुनने के लिए।
• submit: फ़ॉर्म जमा करने के लिए।

उदाहरण:

<form action="submit.php" method="POST">
  <label for="email">Email:</label>
  <input type="email" id="email" name="email" required>
  <br>
  <label for="password">Password:</label>
  <input type="password" id="password" name="password" required>
  <br>
  <button type="submit">Login</button>
</form>

रेडियो बटन उपयोगकर्ताओं को किसी समूह में से एक विकल्प चुनने देते हैं। उदाहरण:

सुझाव: किसी समूह के सभी रेडियो बटन के लिए समान name एट्रिब्यूट का उपयोग करें।

<form action="submit.php" method="POST">
  <p>Choose your favorite color:</p>
  <input type="radio" id="red" name="color" value="Red">
  <label for="red">Red</label>
  <br>
  <input type="radio" id="blue" name="color" value="Blue">
  <label for="blue">Blue</label>
  <br>
  <button type="submit">Submit</button>
</form>

चेकबॉक्स उपयोगकर्ताओं को अनेक विकल्प चुनने देते हैं। उदाहरण:

सुझाव: अनेक मान एकत्र करने के लिए ऐरे सिंटैक्स (hobbies[]) का उपयोग करें।

<form action="submit.php" method="POST">
  <p>Select your hobbies:</p>
  <input type="checkbox" id="reading" name="hobbies[]" value="Reading">
  <label for="reading">Reading</label>
  <br>
  <input type="checkbox" id="traveling" name="hobbies[]" value="Traveling">
  <label for="traveling">Traveling</label>
  <br>
  <button type="submit">Submit</button>
</form>

ड्रॉपडाउन मेनू उपयोगकर्ताओं को किसी सूची में से एक विकल्प चुनने देते हैं। उदाहरण:

सुझाव: डिफ़ॉल्ट विकल्प सेट करने के लिए selected का उपयोग करें।

<form action="submit.php" method="POST">
  <label for="country">Choose your country:</label>
  <select id="country" name="country">
    <option value="USA">USA</option>
    <option value="Canada">Canada</option>
    <option value="UK">UK</option>
  </select>
  <br>
  <button type="submit">Submit</button>
</form>

सुनिश्चित करें कि आपके फ़ॉर्म सभी उपयोगकर्ताओं के लिए सुगम हों:

• for एट्रिब्यूट के साथ इनपुट से जुड़े label टैग का उपयोग करें।
• संबंधित इनपुट को fieldset और legend का उपयोग करके समूहित करें।
• मोबाइल उपकरणों पर उपयोग-सुविधा के लिए फ़ॉर्म का परीक्षण करें।

सुझाव: सुगम फ़ॉर्म सभी के लिए उपयोगकर्ता अनुभव बेहतर बनाते हैं!

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