📘 Lesson · Lesson 19

Forms: form, action, method

What a Form Really Does

Everything so far SHOWS content to the visitor. A form reverses the arrow: it collects data FROM the visitor and sends it somewhere — a login, a search box, an admission form, a payment page. Every one is a form. Think of it as the school's admission counter: blank fields to fill (inputs), a counter clerk address where the papers go (action), and a rule for how they travel — open postcard or sealed envelope (method).

<form action="save-student.php" method="post">
    <input type="text" name="student_name">
    <button type="submit">Submit</button>
</form>

[ text box ] [Submit] → On submit: browser packs the data and sends it to save-student.php

form, action, method — the three decisions

Part	Question it answers	Example
`<form>`	Which fields belong together? (everything inside travels as one submission)	wrapper of all inputs
`action`	WHERE does the data go?	action="save-student.php" (a server file); action="" = this same page
`method`	HOW does it travel?	get or post — next section

HTML's honest limit: HTML only collects and sends. Receiving and saving the data needs a server language — which is exactly why our PHP-based AJAX course exists at the end of this path. For now, understanding the sending side completely is the goal.

GET vs POST — the postcard and the envelope

method="get"  →  search.php?name=Aman&class=10
                 data VISIBLE in the URL - like a POSTCARD

method="post" →  search.php
                 data hidden in the request body - like a SEALED ENVELOPE

	GET	POST
Data location	In the URL	In the request body
Visible/bookmarkable	✅ Yes — great for searches	❌ No
Size limit	~2KB	Practically none; file uploads need POST
Use for	Search, filters (reading data)	Login, registration, anything saving/changing data

The professional rule: reading data → GET; changing/saving data → POST. And one myth to bust in interviews: POST is more private (hidden from URL/history) but NOT encrypted — real security comes from HTTPS.

The name Attribute — the #1 beginner form bug

<input type="text" id="student">                 ❌ submits NOTHING
<input type="text" name="student_name">          ✅ submits student_name=Aman

Data travels as name=value pairs. A field without name is a labelled box with no label for the postman — the server receives silence. This is the #1 "my form sends empty data" bug. Note the roles: id is for CSS/JS/label on the browser side; name is what the SERVER sees. A field usually carries both.

label — the Professional Touch

<label for="sname">Student Name:</label>
<input type="text" id="sname" name="student_name">

for matches the input's id — clicking the LABEL now focuses the field (try any good website).
On mobile, the label becomes part of the tap target — fat-finger friendly.
Screen readers announce "Student Name, text field" — without label, just "text field" (which field?!).

Loose text next to an input LOOKS the same but does none of this. Label is the cheapest professionalism upgrade in HTML.

Complete Example — a mini admission form

<form action="save-admission.php" method="post">
    <label for="sname">Student Name:</label>
    <input type="text" id="sname" name="student_name"><br>

    <label for="cls">Class:</label>
    <input type="text" id="cls" name="class"><br>

    <label for="mob">Parent Mobile:</label>
    <input type="tel" id="mob" name="mobile"><br>

    <button type="submit">Apply for Admission</button>
</form>

Student Name: [___________] Class: [___________] Parent Mobile: [___________] [Apply for Admission] → submits: student_name=...&class=...&mobile=... to save-admission.php

Next chapters turn this skeleton professional: 20+ input types, dropdowns and textareas, then validation — the full form toolkit.

Form असल में करता क्या है

अब तक सब कुछ visitor को content DIKHATA था. Form तीर उल्टा कर देता है: visitor SE data इकट्ठा करके कहीं भेजता है — login, search box, admission form, payment page. हर एक form है. इसे school का admission counter समझिए: भरने के खाली खाने (inputs), कागज़ जहां जाएंगे वह counter का पता (action), और सफर का नियम — खुला postcard या सीलबंद लिफाफा (method).

<form action="save-student.php" method="post">
    <input type="text" name="student_name">
    <button type="submit">Submit</button>
</form>

[ text box ] [Submit] → Submit par: browser data ko pack karke save-student.php ko bhejta hai

form, action, method — तीन फैसले

हिस्सा	किस सवाल का जवाब	Example
`<form>`	कौन-से fields साथ हैं? (अंदर का सब एक submission में जाता है)	सारे inputs का wrapper
`action`	Data JAYEGA कहां?	action="save-student.php" (server की file); action="" = यही page
`method`	SAFAR कैसे?	get या post — अगला section

HTML की ईमानदार सीमा: HTML सिर्फ इकट्ठा करके भेजता है. Data receive और save करने को server language चाहिए — इसीलिए इस रास्ते के अंत में हमारा PHP-based AJAX course है. अभी लक्ष्य है भेजने वाला हिस्सा पूरी तरह समझना.

GET vs POST — postcard और लिफाफा

method="get"  →  search.php?name=Aman&class=10
                 data URL me DIKHTA hai - POSTCARD jaisa

method="post" →  search.php
                 data request body me chhupa - SEALED LIFAFA jaisa

	GET	POST
Data की जगह	URL में	Request body में
दिखता/bookmark होता	✅ हां — searches के लिए बढ़िया	❌ नहीं
Size limit	~2KB	Practically नहीं; file uploads को POST चाहिए
किसके लिए	Search, filters (data पढ़ना)	Login, registration, data save/change करने वाला सब

Professional rule: data पढ़ना → GET; data बदलना/save करना → POST. और interviews में तोड़ने वाला myth: POST ज़्यादा private है (URL/history से छुपा) पर encrypted NAHI — असली security HTTPS से आती है.

name Attribute — beginners का #1 form bug

<input type="text" id="student">                 ❌ KUCH NAHI bhejta
<input type="text" name="student_name">          ✅ student_name=Aman bhejta hai

Data name=value जोड़ों में सफर करता है. बिना name का field ऐसा डिब्बा है जिस पर postman के लिए label ही नहीं — server को खामोशी मिलती है. यही #1 "मेरा form खाली data भेजता है" bug है. Roles note कीजिए: id browser की तरफ CSS/JS/label के लिए; name वह जो SERVER देखता है. Field पर आमतौर पर दोनों होते हैं.

label — Professional Touch

<label for="sname">Student Name:</label>
<input type="text" id="sname" name="student_name">

for input की id से match करता है — अब LABEL पर click करते ही field focus (कोई भी अच्छी website try कीजिए).
Mobile पर label tap-target का हिस्सा बन जाता है — मोटी उंगलियों के लिए friendly.
Screen readers बोलते हैं "Student Name, text field" — label के बिना सिर्फ "text field" (कौन-सा field?!).

Input के बगल का खुला text वैसा ही DIKHTA है पर इनमें से कुछ नहीं करता. Label HTML का सबसे सस्ता professionalism upgrade है.

पूरा Example — mini admission form

<form action="save-admission.php" method="post">
    <label for="sname">Student Name:</label>
    <input type="text" id="sname" name="student_name"><br>

    <label for="cls">Class:</label>
    <input type="text" id="cls" name="class"><br>

    <label for="mob">Parent Mobile:</label>
    <input type="tel" id="mob" name="mobile"><br>

    <button type="submit">Apply for Admission</button>
</form>

Student Name: [___________] Class: [___________] Parent Mobile: [___________] [Apply for Admission] → bhejta hai: student_name=...&class=...&mobile=... save-admission.php ko

अगले chapters इस ढांचे को professional बनाएंगे: 20+ input types, dropdowns और textareas, फिर validation — पूरा form toolkit.

← Back to HTML Tutorial

💻 Live Code Editor

इस पेज का code यहाँ तैयार है — बदलिए और तुरंत नतीजा देखिए. कुछ install किए बिना.

👁 Live Preview

सब कुछ आपके browser में ही चलता है — कोई server, कोई signup नहीं. JavaScript का console.log देखने के लिए F12 दबाइए.