📤
Forms

Form Submission & Buttons

submit, reset, button Types
💡 Form ke andar teen tarah ke buttons hain — submit (poora form bhejo, jaise application submit karna), reset (sab kuch clear karo, khaali form se dobara shuru), button (custom kaam, JavaScript se control hota hai, koi default form behavior nahi).

<button type="submit"> (ya <input type="submit">) form data ko action URL par bhejta hai. type="reset" saare fields ko unki initial values par wapas le jaata hai. type="button" kuch bhi automatically nahi karta — JavaScript event handlers ke saath custom behavior ke liye hota hai.

Important: <button> ke andar agar type explicitly nahi likha, DEFAULT "submit" hota hai — ye ek common bug source hai (accidentally form submit ho jaana jab button ka intent kuch aur tha).

<form action="/submit" method="POST">
  <input type="text" name="username">

  <button type="submit">Submit Karo</button>
  <button type="reset">Clear Karo</button>
  <button type="button" onclick="alert('Custom action!')">Custom Button</button>
</form>
📤
Form ke andar teen tarah ke buttons hain — submit (poora form bhejo, jaise application submit karna), reset (sab kuch clear karo, khaali form se dobara shuru), button (custom kaam, JavaScript se control hota hai, koi default form behavior nahi).
1 / 2
⚡ Quick Recap
  • submit = form data bhejo, reset = fields clear karo
  • button (bina type explicit ke) DEFAULT submit hota hai — trap!
  • Custom JS behavior ke liye type="button" explicit likho
On this page (2 subtopics)

Slow networks par users kabhi-kabhi Submit button multiple baar click karte hain (lagta hai kaam nahi kiya) — duplicate submissions ka risk. JavaScript se button ko submit ke baad disable karna common solution hai.

<form onsubmit="document.getElementById('submitBtn').disabled = true;">
  <button type="submit" id="submitBtn">Submit Karo</button>
</form>
<!-- Ek baar click hone ke baad button disable ho jaata hai,
     dobara click accidental submission nahi karega -->
💡Tip: Server-side bhi duplicate submission protection honi chahiye (jaise idempotency keys) — client-side disable sirf UX improvement hai, security/data-integrity guarantee nahi.

GET forms ka data URL mein "URL encoded" hota hai — spaces "+" ya "%20" ban jaate hain, special characters %XX codes mein convert hote hain. Ye automatic hai, lekin URLs padhte waqt samajhna useful hai.

<!-- Form input: "hello world" -->
<!-- Resulting URL: -->
<!-- /search?q=hello+world -->
<!-- ya -->
<!-- /search?q=hello%20world -->
💡Tip: Ye encoding automatic hoti hai — form data manually URL-encode karne ki zaroorat nahi, browser khud handle karta hai jab GET form submit hoti hai.