HTML Form method एट्रिब्यूट: GET vs POST

HTML Form method एट्रिब्यूट परिभाषित करता है कि फॉर्म डेटा सर्वर को कैसे भेजा जाए: GET (URL पैरामीटर्स के रूप में) या POST (HTTP रिक्वेस्ट बॉडी में)। यह सुरक्षा, डेटा लंबाई, कैशिंग, और बुकमार्केबिलिटी को प्रभावित करता है।

सिंटैक्स (Syntax)

<form method="get | post"></form>

• get (डिफ़ॉल्ट): फॉर्म डेटा URL क्वेरी स्ट्रिंग में जोड़ा जाता है (?name=value&...)।
• post: फॉर्म डेटा HTTP रिक्वेस्ट बॉडी में भेजा जाता है।

उदाहरण (Example)

GET और POST दोनों मोड्स को दर्शाने वाला फॉर्म।

<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      color: #000;
      height: 100vh;
      background: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%) no-repeat;
      text-align: center;
      font-family: Arial, sans-serif;
    }
    input {
      width: 315px;
      display: block;
      margin: 1rem auto;
      border: 2px solid #fff;
      padding: 12px;
      background: transparent;
      border-radius: 20px;
      outline: none;
      font-size: 1rem;
    }
    input:focus { border-color: #db133a; }
    ::placeholder { color: #666; }
    .btn {
      background: #db133a;
      border: none;
      height: 2.5rem;
      border-radius: 20px;
      width: 330px;
      display: block;
      color: #fff;
      outline: none;
      cursor: pointer;
      margin: 1rem auto;
      font-size: 1rem;
      transition: background 0.3s;
    }
    .btn:hover { background: #b01030; }
    .method-selector {
      display: flex;
      justify-content: center;
      gap: 1rem;
      margin: 1.5rem 0;
      flex-wrap: wrap;
    }
    .method-btn {
      padding: 10px 24px;
      border: 2px solid #fff;
      background: transparent;
      color: #fff;
      border-radius: 20px;
      cursor: pointer;
      font-size: 1rem;
      transition: all 0.3s;
    }
    .method-btn.active, .method-btn:hover {
      background: #fff;
      color: #db133a;
    }
    .result-box {
      background: rgba(0,0,0,0.3);
      color: #fff;
      padding: 1.5rem;
      border-radius: 10px;
      margin: 1rem auto;
      max-width: 500px;
      text-align: left;
      font-family: monospace;
      white-space: pre-wrap;
      min-height: 100px;
    }
    .url-display {
      word-break: break-all;
      background: rgba(255,255,255,0.1);
      padding: 1rem;
      border-radius: 8px;
      margin: 1rem 0;
    }
  </style>
</head>
<body>
  <h1>HTML Form method एट्रिब्यूट डेमो</h1>
  
  <div class="method-selector">
    <button type="button" class="method-btn active" id="btnGet" onclick="setMethod('get')">GET</button>
    <button type="button" class="method-btn" id="btnPost" onclick="setMethod('post')">POST</button>
  </div>
  
  <form id="demoForm" action="/action_page.php" method="get">
    <input type="text" name="firstname" placeholder="पहला नाम दर्ज करें" required>
    <input type="text" name="lastname" placeholder="अंतिम नाम दर्ज करें" required>
    <input type="email" name="email" placeholder="ईमेल दर्ज करें" required>
    <input type="submit" value="सबमिट करें" class="btn">
  </form>
  
  <div class="result-box" id="result">
    फॉर्म सबमिट करें परिणाम देखने के लिए...
  </div>
  
  <div class="url-display" id="urlDisplay"></div>

  <script>
    const form = document.getElementById('demoForm');
    const result = document.getElementById('result');
    const urlDisplay = document.getElementById('urlDisplay');
    const btnGet = document.getElementById('btnGet');
    const btnPost = document.getElementById('btnPost');
    let currentMethod = 'get';
    
    function setMethod(method) {
      currentMethod = method;
      form.method = method;
      btnGet.classList.toggle('active', method === 'get');
      btnPost.classList.toggle('active', method === 'post');
      result.textContent = `मेथड बदला गया: ${method.toUpperCase()}\nफॉर्म सबमिट करें परिणाम देखने के लिए...`;
      urlDisplay.innerHTML = '';
    }
    
    form.addEventListener('submit', function(e) {
      e.preventDefault();
      
      const formData = new FormData(form);
      const params = new URLSearchParams(formData);
      const queryString = params.toString();
      
      if (currentMethod === 'get') {
        const fullUrl = `${form.action}?${queryString}`;
        result.textContent = `GET अनुरोध अनुकरण:\n${fullUrl}`;
        urlDisplay.innerHTML = `निर्मित URL:
${fullUrl}`;
      } else {
        // POST के लिए बॉडी दिखाएं
        let bodyContent = '';
        for (const [key, value] of formData.entries()) {
          bodyContent += `${key}: ${value}\n`;
        }
        result.textContent = `POST अनुरोध अनुकरण:\nURL: ${form.action}\n\nरिक्वेस्ट बॉडी:\n${bodyContent}`;
        urlDisplay.innerHTML = `रिक्वेस्ट बॉडी (application/x-www-form-urlencoded):
${queryString}`;
      }
      
      // ब्राउज़र के नेटिव सबमिशन को भी दिखाएं (नए टैब में)
      // form.submit(); // अनकमेंट करके वास्तविक सबमिशन टेस्ट करें
    });
  </script>
</body>
</html>

आउटपुट (Output)

GET मोड में फॉर्म सबमिशन - URL में पैरामीटर्स दिखाई देते हैं:

POST मोड में फॉर्म सबमिशन - डेटा रिक्वेस्ट बॉडी में जाता है:

GET vs POST: विस्तृत तुलना

कब उपयोग करें

GET का उपयोग करें जब:

• डेटा केवल पढ़ने/खोजने के लिए है (आइडेम्पोटेंट ऑपरेशन)।
• परिणाम बुकमार्केबल/शेयर करने योग्य होना चाहिए (खोज, फिल्टर, पेजिनेशन)।
• डेटा छोटा और असंवेदनशील है।
• कैशिंग वांछित है।

POST का उपयोग करें जब:

• डेटा सर्वर स्थिति बदलता है (बनाना, अपडेट करना, हटाना)।
• संवेदनशील डेटा (पासवर्ड, व्यक्तिगत जानकारी, भुगतान)।
• बड़ी मात्रा में डेटा या फाइल अपलोड।
• डुप्लिकेट सबमिशन रोका जाना चाहिए (नॉन-आइडेम्पोटेंट)।

सुरक्षा विचार

• HTTPS अनिवार्य: दोनों मेथड्स के लिए, संवेदनशील डेटा के लिए HTTPS आवश्यक है।
• GET लॉग्स में: URL सर्वर लॉग्स, प्रॉक्सी लॉग्स, ब्राउज़र हिस्ट्री में संग्रहीत होते हैं।
• CSRF सुरक्षा: POST फॉर्म्स के लिए CSRF टोकन का उपयोग करें।
• पासवर्ड कभी GET में नहीं: पासवर्ड हमेशा POST के माध्यम से भेजें।

ब्राउज़र समर्थन

सभी ब्राउज़र (सभी संस्करण) दोनों मेथड्स का पूर्ण समर्थन करते हैं।