📝
Forms

Forms — Basics

<form> Tag, action, method
💡 Form ek paper application form jaisa hai — user information bharta hai (fields), aur "Submit" button daba kar poora form kisi office (server) ko bhej deta hai processing ke liye.

<form> tag saare input elements ko group karta hai, aur decide karta hai unka data KAHA (action attribute — URL) aur KAISE (method attribute — GET ya POST) bheja jaayega. GET data ko URL mein append karta hai (search forms ke liye common), POST data ko request body mein bhejta hai (sensitive/large data — login, signup ke liye common).

<form action="/submit" method="POST">
  <label for="name">Naam:</label>
  <input type="text" id="name" name="name">

  <label for="email">Email:</label>
  <input type="email" id="email" name="email">

  <button type="submit">Submit Karo</button>
</form>
📝
Form ek paper application form jaisa hai — user information bharta hai (fields), aur "Submit" button daba kar poora form kisi office (server) ko bhej deta hai processing ke liye.
1 / 6
⚡ Quick Recap
  • <form> = saare inputs group karta hai
  • action = kaha bhejna hai, method = kaise (GET/POST)
  • Sensitive data ke liye hamesha POST, kabhi GET nahi
Is page mein (2 subtopics)

GET requests bookmarkable/shareable hain (URL mein data hai) — search forms, filters ke liye natural fit. POST requests URL mein data expose nahi karte, bade data (jaise file uploads) support karte hain — login, signup, sensitive operations ke liye standard.

<!-- Search — GET natural hai (shareable URL): -->
<form action="/search" method="GET">
  <input type="text" name="q">
  <button type="submit">Search</button>
</form>
<!-- Result URL: /search?q=html+tutorial -->

<!-- Login — POST zaroori hai (sensitive data): -->
<form action="/login" method="POST">
  <input type="password" name="password">
</form>
💡Tip: Rule of thumb: agar operation "data fetch karna" hai (search, filter), GET use karo. Agar "data change/create karna" hai (login, signup, post creation), POST use karo.

Normal forms text data bhejte hain, lekin file upload karne ke liye enctype="multipart/form-data" ZAROORI hai — bina iske, files properly upload nahi hongi.

<form action="/upload" method="POST" enctype="multipart/form-data">
  <input type="file" name="profile_pic">
  <button type="submit">Upload Karo</button>
</form>
⚠️Common Mistake: enctype="multipart/form-data" bhoolna ek bahut common bug hai file upload forms mein — bina iske, sirf filename text ke roop mein bhejaega, actual file content nahi.