Unit 1 home
FSWD · MERN LAB 2 · EX.2 UI23PC511CS · LAB poshtik-campus/ GROWS A FORM TODAY
LAB 2 · P 1/15PGDN NEXT LINE / POINT · PGUP BACK
LAB 2 OF 12 · EX.2 UNIT 1 · WEB BASICS, HTML & CSS 2-HOUR LAB SESSION

Today your site starts listening

The order form — your site starts collecting information.

Until today, poshtik-campus/ could only talk: it showed pages, and visitors read them. Today you put every form control to work: your own menu.html — exactly as Lab 1 left it — gains a real order form — name, phone, dish, quantity, notes, submit. And because this folder is a Git repository now, today ends with the commit-and-push ritual Lab 1 promised you.

R-23 SYLLABUS · FSWD LAB · PROGRAMMING EXERCISE 2 · WORD FOR WORD

“Creation of Static Web Site using HTML Forms.”

Walk out of this lab able to…

Build a complete order form — text, tel, radio, number, textarea, submit — from a requirement list
Pair every input with its <label>, so every click on a word lands in the right box
Solve a real 8-mark exam form question, start to finish, on paper
End the lab the professional way: add, commit, push, second commit on your repo
THE LAB, POINT BY POINT
01Warm-up — today's promise: your site starts collecting informationIDEA
02Prelab Q1 (guided) — which input type for a phone number field?GUIDED
03Prelab Q2 (guided) — write a label-for / input-id pairGUIDED
04Prelab Q3 (guided) — how do two radio buttons become one choice?GUIDED
05Prelab Q4–Q5 — on your own, then the solution sheetTRY IT
06Prelab program 1 — one labelled text inputWARM-UP
07Prelab program 2 — a radio group of three optionsWARM-UP
08Prelab program 3 — a select dropdown with three optionsWARM-UP
09Prelab program 4 — a submit button, and where the data goesWARM-UP
10Folder continued — open the same poshtik-campus/ from Lab 1RITUAL
11Mini problem statement — the order form (no code shown)TRY IT
12Solution sheet — the full form, line by line, with live previewSOLUTION
13PYQ · P3·Q11a · 4+4m — the survey form: sheet, complete survey.html, live outputEXAM
14Your folder after today — menu.html has grown, the mapIDEA
15Close — the git-push checkpoint, plus the bridge into CSSGIT
Nothing to download today — unless you're behind.

An order form is pure typing — labels, inputs, buttons. No photos, no asset pack. Your two tools are the ones you already own: VS Code and your browser. (The dish photos join the project in a later lab, after CSS makes a proper home for them.) Behind because you missed Lab 1 or changed machines? First choice, always: git clone your own repo. Only for a genuine emergency — no push, excused absence, instructor informed — the Lab-2 rescue pack restores Lab 1's exact exit state: README-FIRST.txt · index.html · menu.html · about.html. How to use it: ① read the README top to bottom; ② put the three .html files into a new Desktop\poshtik-campus\ folder; ③ click the whole nav triangle in the browser (Home ⇄ Menu ⇄ About — zero error pages); ④ run the README's three git commands (one honest "caught up here" commit) and push. It restores files, not skills — fswd_lab_01.html still owes you its practice in Learning Mode this week.

PRELAB Q1 · GUIDED — WE REASON TOGETHER

Which input type for a phone number field?

Your order form will ask for a phone number, so the canteen can call when the food is ready. Which type= do you reach for — and why is the obvious-looking answer not the best one?

The tempting answer: type="number"

A phone number is made of digits, so number feels right — but it treats the value as maths: it adds little up/down spinner arrows, and it refuses a leading zero or a +91. Nobody ever adds 1 to a phone number. Wrong tool, politely declined.

The right answer: type="tel"

tel says what the value is — a telephone number. It accepts +, spaces and leading zeros, and on a phone it opens the number keypad instead of the full keyboard. Small kindness, right meaning.

menu.html — the answer, in the real fileONE LINE PER PRESS · skeleton shown dim
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <title>Poshtik Campus — Menu</title>
6</head>
7<body>
8 <form>
9 <!-- the phone field -->
10 <input type="tel" id="cust-phone" name="cust-phone">
11 </form>
12</body>
13</html>
Poshtik Campus — Menu
file:///C:/Users/student/Desktop/poshtik-campus/menu.html
This box is real — type in it. On a laptop, tel looks like a plain text box — the difference shows on a phone, where the number keypad pops up. Notice: no spinner arrows, and a +91 is accepted without complaint.
The transferable move:

Pick the type by meaning, not by what the characters look like. Digits you calculate with take number (quantity!). Digits you dial take tel. Text with an @ shape takes email. The table of input types is exactly this decision, written out.

PRELAB Q2 · GUIDED

Write a label and its input — properly paired.

Every input on today's form gets a <label>. The pairing runs on two attributes that must carry the same value — write the pair for a "Your name" field.

menu.html — the answer, in the real fileONE LINE PER PRESS · skeleton shown dim
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <title>Poshtik Campus — Menu</title>
6</head>
7<body>
8 <form>
9 <label for="cust-name">Your name</label>
10 <input type="text" id="cust-name" name="cust-name">
11 </form>
12</body>
13</html>
Poshtik Campus — Menu
file:///C:/Users/student/Desktop/poshtik-campus/menu.html
Run the click test right here — this preview is live. Click the word "Your name" — the cursor lands in the box. That jump is the proof the pair is connected.
for ↔ id — the handshake

for="cust-name" on the label, id="cust-name" on the input. Same value, spelled the same, or the handshake simply doesn't happen (and nothing warns you — the click test is your check).

And name= is a third, different job

name="cust-name" is what the data will be called when the form is sent. The label pair is for humans; name is for the data. Three attributes, three jobs — today's form uses all three on every field.

PRELAB Q3 · GUIDED — THE LAST ONE TOGETHER

How do two radio buttons become one choice?

Your form offers dishes as radio buttons — pick one. What single attribute makes separate buttons behave as one group, where choosing one lets go of the other?

menu.html — the answer, in the real fileONE LINE PER PRESS · skeleton shown dim
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <title>Poshtik Campus — Menu</title>
6</head>
7<body>
8 <form>
9 <input type="radio" id="d-idli" name="dish" value="ragi-idli">
10 <input type="radio" id="d-dosa" name="dish" value="ragi-dosa">
11 <!-- same name="dish" -> one group, one pick -->
12 </form>
13</body>
14</html>
Poshtik Campus — Menu
file:///C:/Users/student/Desktop/poshtik-campus/menu.html
These buttons are real — try them. Pick Ragi Idli, then click Ragi Dosa: the dot moves — Ragi Idli lets go on its own. That's the shared name at work.
The classic slip, named in advance — so it never surprises you.

Give each radio a different name and every button becomes its own little group of one — you can select all of them at once. Easy to spot, easy to fix: one shared name, different values, different ids (each label still needs its own id to hold hands with).

PRELAB Q4–Q5 · NOW ON YOUR OWN

Two questions, answered by you first. Then the sheet.

Guided is over. Answer these two on paper before the gate below opens — both are moves the build will ask of you within the hour.

Q4. The order form needs a quantity field: how many plates, from 1 to 10. Write the complete input line (with its label), choosing the type that fits counting.

Q5. A friend's form has a "Place order" button written as <button>Place order</button> outside the <form> element, and clicking it does nothing. In one sentence: why, and where should it live?

Both answers written? Only then.

SOLUTION SHEET · Q4–Q5
Q4 · the answerONE LINE PER PRESS
·<label for="qty">Quantity</label>
·<input type="number" id="qty" name="qty" min="1" max="10" value="1">
Poshtik Campus — Menu
file:///C:/Users/student/Desktop/poshtik-campus/menu.html
Live control — click the little spinner arrows. Here number is right — plates are counted. Try stepping below 1 or above 10: min/max politely refuse.
Q5 · The button outside the form.

A submit button only submits the form it lives inside. Standing outside the <form>…</form> tags, it belongs to no form, so a click has nothing to send. Move it inside, just before </form>, and it wakes up. (Compare Q1–Q3: in forms, where a tag sits matters as much as what it says.)

Score yourself honestly
  1. Q4 used type="number" with min and max, plus a paired label — full marks. Chose tel? Re-read Q1: dial vs count. Quantity is counted.
  2. Q5 said "outside the form means it belongs to no form" in some wording — full marks. The fix is always placement, not more attributes.
PRELAB PROGRAM 1 OF 4 · WARM-UP, NOT A TEST

A complete page: skeleton, a little CSS, one labelled input.

Four tiny finger-warmers before the real build — each one rehearses a move today's form uses at full scale. No marks, no gate: the answer sits right below, because a warm-up you can't check isn't a warm-up. Type it first, then look.

The program: in a scratch file called form-warmup-1.html (in your fswd-practice\ sandbox — never the repo), write a complete page: doctype, <html>, a <head> with charset, title and a small <style> block, then a <body> holding one <form> with a single labelled text input asking for the visitor's name. Nothing else — but nothing skipped either: this is the host file every later warm-up assumes.

form-warmup-1.html · the whole file — HTML skeleton + a <style> blockBUILDS ONE LINE PER PRESS
1<!DOCTYPE html>
2<html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Form warm-up 1</title>
6 <style>
7 body {
8 font-family: Arial, sans-serif;
9 padding: 24px;
10 }
11 label {
12 display: block;
13 margin-bottom: 6px;
14 }
15 </style>
16 </head>
17 <body>
18 <form>
19 <label for="vname">Your name</label>
20 <input type="text" id="vname" name="visitor">
21 </form>
22 </body>
23</html>
Form warm-up 1
file:///C:/Users/student/Desktop/fswd-practice/form-warmup-1.html
Run the click test on this live preview: click the word "Your name" — cursor jumps into the box. If it doesn't in your own file, compare your for and id letter by letter. Notice the label sits on its own line — that is the display: block rule from your <style> block doing its job.
Why this exact drill?

Today's order form is this exact pattern, five times over — five labels, five inputs, five handshakes. If your fingers typed this pair without thinking, the real build is happy repetition. And because you typed the whole file here — skeleton and style block included — warm-ups 2, 3 and 4 can show you just the <form>: paste each one into this host page and it runs.

PRELAB PROGRAM 2 OF 4

A radio group of three options.

Q3's shared-name rule, now typed with your own hands: three dishes, one name, one possible pick.

The program: in form-warmup-2.html, a form offers three dishes — Ragi Idli, Pesarattu, Millet Shake — as radio buttons. Each button gets its own label. Prove one-pick behaviour in the browser before you look down.

form-warmup-2.html · the <form> — drop it into warm-up 1's skeletonONE LINE PER PRESS
8 <form>
9 <p>Pick your dish:</p>
10 <input type="radio" id="d1" name="dish" value="ragi-idli">
11 <label for="d1">Ragi Idli</label>
12 <input type="radio" id="d2" name="dish" value="pesarattu">
13 <label for="d2">Pesarattu</label>
14 <input type="radio" id="d3" name="dish" value="millet-shake">
15 <label for="d3">Millet Shake</label>
16 </form>
Form warm-up 2
file:///C:/Users/student/Desktop/fswd-practice/form-warmup-2.html

Pick your dish:

Three ids (d1 d2 d3), three values, one name. This group is live — click each in turn: the dot always moves, never doubles.
Why this exact drill?

The order form's dish-picker is this group, grown to five dishes. Also worth noticing: with radios, the label usually comes after the button — that's the layout your eye expects on every real website.

PRELAB PROGRAM 3 OF 4

A select dropdown with three options.

Radios show every option at once; a <select> folds them into one neat box. Today's form uses it for the pickup time — this warm-up is that control at practice scale.

The program: in form-warmup-3.html, a labelled dropdown asks "When will you pick up?" with three choices: 11:00, 13:00, 17:00. Remember the shape: <select> is the box, each <option> a row inside it.

form-warmup-3.html · the <form> — drop it into warm-up 1's skeletonONE LINE PER PRESS
8 <form>
9 <label for="pickup">When will you pick up?</label>
10 <select id="pickup" name="pickup-time">
11 <option value="11:00">11:00 — short break</option>
12 <option value="13:00">13:00 — lunch</option>
13 <option value="17:00">17:00 — after labs</option>
14 </select>
15 </form>
Form warm-up 3
file:///C:/Users/student/Desktop/fswd-practice/form-warmup-3.html
Closed, the box shows the first option — exactly what a real browser does. It's live: click the arrow and all three rows unfold.
Why this exact drill?

Notice the label pairs with the <select> itself, never with an option — one handshake for the whole box. And the visible text ("13:00 — lunch") can be friendlier than the tidy value that gets sent. Two layers, two audiences — the same human/data split as Q2.

PRELAB PROGRAM 4 OF 4 · THE ONE TODAY IS BUILT ON

A submit button — and watching where the data goes.

The last warm-up answers the question every student asks next: "when I press the button… what actually happens?" You'll see the answer appear in the address bar, character by character.

The program: in form-warmup-4.html, one text input named snack and a submit button. Save, open, type chikki into the box, press the button — then read the address bar.

form-warmup-4.html · the <form> — drop it into warm-up 1's skeletonONE LINE PER PRESS
8 <form>
9 <label for="snack">Favourite snack</label>
10 <input type="text" id="snack" name="snack">
11 <button type="submit">Send</button>
12 </form>
THIS OUTPUT IS REAL — PRESS SEND AND READ THE ADDRESS BAR
Form warm-up 4
file:///C:/Users/student/Desktop/fswd-practice/form-warmup-4.html
Really press Send (change the snack first if you like): the address bar above grows a tail — ?snack=chikki — your field's name, an equals sign, and what you typed. That's a real GET submit, simulated live from your real input.
So where did it GO?

Nowhere, yet — and that's the honest, correct answer for Unit 1. The browser packed your data into the address (that ?name=value tail) and delivered it back to the same page, because we gave the form no destination. In Unit 4, a server will stand at the other end and catch it. Today's form is a postbox with the letter written perfectly — the postal service arrives later in the course.

SAME FOLDER, SAME REPO — THE PROJECT CONTINUES

Open poshtik-campus. Today nothing new is created — something grows.

Lab 1 ended with three files pushed to GitHub. Today you create zero new files: the whole session happens inside menu.html, which gains a form. That's what a real project feels like — files change more often than they appear.

1
Open the folder in VS Code

File menu, Open Folder, pick poshtik-campus. The Explorer should show index.html, menu.html, about.html — exactly as Lab 1 left them.

2
Open menu.html and find your place — exactly here

Press Ctrl+End to jump to the bottom of the file. Walk up past </html>, </body> and the nav list until you reach the comment <!-- site navigation -->. The line just above it is the closing </ul> of the dish list (line 22 in Lab 1's 29-line file). Click at the end of that </ul> line, press Enter to open a fresh line, and that is where today's form begins — after the ten dishes, before the site navigation. After the food, the ordering.

3
Open menu.html in the browser too

Double-click it in your file manager, or right-click and Open with Live Server if you have it. Keep editor and browser side by side: type, save, reload, watch.

TODAY'S WORKING FILE
FOLDERposhtik-campus — the same repo from Lab 1
FILEmenu.html — edited, not created
WHEREafter the dish list's </ul> (line 22), before <!-- site navigation --> — the form becomes lines 23 to 58 if your file matches Lab 1's 29-line solution; the nav moves down to lines 59 to 63 and the file ends at line 65
NEVERinside the dish <ul>, inside the nav <ul>, or after </body> — content outside body is invisible or invalid
CHECKsave and reload — the form appears below the ten dishes and above the Home / About us links. Below the links instead? You clicked into the nav's </ul>; cut the form and re-place it.
GIT?yes — one commit at the end of the session (the checkpoint is Part 15)
Missed Lab 1 or on a fresh machine?

No problem — clone your own repo and you're exactly where everyone else is: git clone https://github.com/<your-username>/poshtik-campus.git. That one command is why we pushed last week. Never pushed and genuinely stuck? Part 1's note links the Lab-2 rescue pack (Lab 1's exact three files + a README that walks you through setup step by step) — ask your instructor first.

THE BUILD · MINI PROBLEM STATEMENT

The canteen wants orders. Build the form that takes them.

Poshtik Campus's counter queue is too long at 1 pm. The owner wants students to order from their phones. You have every ingredient: four warm-ups, five prelab answers, and the whole form toolbox. Build it yourself first — the gate stays shut until you've tried.

Requirements — the order form in menu.html:

  • A Your name text field — id and name both cust-name.
  • A Phone number field with the right type — id and name both cust-phone.
  • A Pick your dish group of ten radio buttons — the same ten dishes as your list, Jonna Rotte Wrap to Millet Protein Shake — all sharing name="dish", each one wrapped inside its own label.
  • A Quantity number field, 1–10 — id and name both qty.
  • A Notes for the kitchen multi-line box — id and name both notes.
  • A Place order submit button.
  • Every field labelled with a working click-test.
  • The whole thing inside one <form>, under an Order Here heading.

Type it, save it, reload — then click every label and press the button. The address bar should grow a ?cust-name=…&cust-phone=… tail.

WHERE EXACTLY TODAY'S CODE GOES — FOLLOW LIKE A RECIPE
FILEposhtik-campus\menu.html — this one file only. index.html and about.html are not touched today, and you create no new file.
FINDPress Ctrl+End. Walk up from the bottom: </html>, </body>, the nav list, then the comment <!-- site navigation -->. The line just above that comment is the dish list's closing </ul> — line 22 of Lab 1's 29-line file. Click at the end of that </ul> line and press Enter.
INSERTThe comment <!-- order form -->, the <h2>Order Here</h2> heading and the whole <form> … </form> block go on those fresh lines — after the dish list's </ul>, before <!-- site navigation -->. They become lines 23 to 58; the nav slides down to lines 59 to 63 and the file now ends at line 65. Every one of the eight requirements lives inside that single form element. After the food, the ordering.
NEVERNever inside the dish <ul> or the nav <ul> (a form is not a list item). Never after </body> — the browser either ignores it or silently moves it. Never open a second <form>: one form, every control inside it.
CHECKSave, reload. The form must appear below the ten dishes and above the two nav links (Home, About us). Sitting below the nav links? You clicked into the nav's </ul> — cut the block and re-place it. Now press Place order: if the address bar grows ?cust-name=…&cust-phone=…, your name attributes are right.
GIT?Yes — one commit at the end of the session (the checkpoint is Part 15): "Add the order form to menu.html".
THE TARGET IS LIVE — CLICK LABELS, PICK A DISH, PRESS PLACE ORDER
Poshtik Campus — Menu
file:///C:/Users/student/Desktop/poshtik-campus/menu.html

SAMPLE OUTPUT — YOUR FINISHED FORM MUST RENDER (AND BEHAVE) LIKE THIS

Order Here

Pick your dish
All three behaviours are switched ON in this sample: exactly one dish selectable at a time, every label clickable, and pressing Place order really grows the ?cust-name=…&cust-phone=…&dish=…&qty=…&notes=… tail in the address bar above. Your build must do the same.

Built and clicked through? Only then.

SOLUTION SHEET · THE ORDER FORM, LINE BY LINE

menu.html grows its form — lines 23 to 58.

Compare with yours move by move. Different wording in labels is fine; different structure (a missing shared name, an unpaired label) is the thing to fix.

menu.html · the whole file — form on lines 23 to 58ONE LINE PER PRESS
1<!DOCTYPE html>
2<html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>Poshtik Campus — Menu</title>
7 </head>
8 <body>
9 <h1>Our Menu</h1>
10 <p>Ten dishes, every one of them poshtik.</p>
11 <ul>
12 <li>Jonna Rotte Wrap</li>
13 <li>Sajja Roti Wrap</li>
14 <li>Ragi Sangati Bowl</li>
15 <li>Ragi Idli Bowl</li>
16 <li>Pesarattu with Sprouts</li>
17 <li>Ulava Charu Protein Bowl</li>
18 <li>Gongura Sprouts Salad</li>
19 <li>Sprouts Moong Chilla</li>
20 <li>Paneer Protein Bowl</li>
21 <li>Millet Protein Shake</li>
22 </ul>
23 <!-- order form -->
24 <h2>Order Here</h2>
25 <form>
26 <p>
27 <label for="cust-name">Your name</label><br>
28 <input type="text" id="cust-name" name="cust-name">
29 </p>
30 <p>
31 <label for="cust-phone">Phone number</label><br>
32 <input type="tel" id="cust-phone" name="cust-phone">
33 </p>
34 <fieldset>
35 <legend>Pick your dish</legend>
36 <label><input type="radio" name="dish" value="jonna-rotte-wrap"> Jonna Rotte Wrap</label><br>
37 <label><input type="radio" name="dish" value="sajja-roti-wrap"> Sajja Roti Wrap</label><br>
38 <label><input type="radio" name="dish" value="ragi-sangati-bowl"> Ragi Sangati Bowl</label><br>
39 <label><input type="radio" name="dish" value="ragi-idli-bowl"> Ragi Idli Bowl</label><br>
40 <label><input type="radio" name="dish" value="pesarattu-with-sprouts"> Pesarattu with Sprouts</label><br>
41 <label><input type="radio" name="dish" value="ulava-charu-protein-bowl"> Ulava Charu Protein Bowl</label><br>
42 <label><input type="radio" name="dish" value="gongura-sprouts-salad"> Gongura Sprouts Salad</label><br>
43 <label><input type="radio" name="dish" value="sprouts-moong-chilla"> Sprouts Moong Chilla</label><br>
44 <label><input type="radio" name="dish" value="paneer-protein-bowl"> Paneer Protein Bowl</label><br>
45 <label><input type="radio" name="dish" value="millet-protein-shake"> Millet Protein Shake</label>
46 </fieldset>
47 <p>
48 <label for="qty">Quantity</label><br>
49 <input type="number" id="qty" name="qty" min="1" max="10" value="1">
50 </p>
51 <p>
52 <label for="notes">Notes for the kitchen</label><br>
53 <textarea id="notes" name="notes" rows="3" cols="40"></textarea>
54 </p>
55 <p>
56 <button type="submit">Place order</button>
57 </p>
58 </form>
59 <!-- site navigation -->
60 <ul>
61 <li><a href="index.html">Home</a></li>
62 <li><a href="about.html">About us</a></li>
63 </ul>
64 </body>
65</html>
EVERY CONTROL BELOW IS REAL — FILL IT, THEN PRESS PLACE ORDER
Poshtik Campus — Menu
file:///C:/Users/student/Desktop/poshtik-campus/menu.html

Order Here

Pick your dish
The test-drive is pre-typed — Ravi, 98480 12345, Ragi Idli Bowl, 2 plates, "less spicy please". Press Place order for real and the address bar above reads ?cust-name=Ravi&cust-phone=98480+12345&dish=ragi-idli-bowl&qty=2&notes=less+spicy+please. Every name= you typed is in that tail.
Score your own build — four checks
  1. The click test: click each label's text — focus must jump into its control (or tick its radio). One dead label = one missing/mismatched for/id pair.
  2. The radio test: picking Sajja Roti Wrap must un-pick Jonna Rotte Wrap. If two can be selected at once, their name= values differ somewhere.
  3. The submit test: pressing Place order must reload with a ?cust-name=…&cust-phone=…&dish=…&qty=…&notes=… tail. A missing key means that control has no name.
  4. The meaning test: phone uses tel (dialled), quantity uses number with min/max (counted). Swapped? Re-read Part 2.
suggested commit:git add .git commit -m "Add order form to menu"git push
Why the form has no action attribute — on purpose.

With no destination given, the browser sends the data back to the same page — which is exactly right for Unit 1: we can see the data in the address bar without needing a server. When Unit 4 arrives, one attribute (action="…") points this same form at a real server. The form won't change shape; only its destination will.

A secret you just used without knowing it — your form spoke a VERB.

When you pressed Place order and the address bar grew that ?cust-name=Ravi&dish=ragi-idli-bowl tail, your browser didn't just "send data" — it sent a GET request. GET is one of exactly five verbs the whole web runs on. Every button on every website you have ever used — Swiggy, WhatsApp Web, your college portal — speaks one of these five. You already used one today, so meet the other four now, gently.

EARLY PREVIEW · THE WEB'S FIVE VERBS · FULL TREATMENT IN UNIT 5

Think of a server as the canteen counter. There are only five things you ever do at a counter — and the web named all five. Your form just did the first one:

GET“Show me”

Ask for something — read the menu. Changes nothing. Your ?snack=chikki tail today WAS a GET.

POST“Here's a new order”

Hand in something NEW — place an order the counter hasn't seen before. Creates a new record.

PUT“Replace my order”

Swap the WHOLE order for a fresh one — “forget my old slip, here is the complete new slip.”

PATCH“Just change the qty”

Fix ONE detail, keep the rest — “same order, but make it 2 plates.” A small touch-up, not a replacement.

DELETE“Cancel my order”

Remove it — the counter tears up your slip. The record is gone.

That's the whole preview — five verbs, one canteen counter. Nothing to memorise today: plain HTML forms can only speak GET and POST; the other three arrive when JavaScript and Express.js join in Unit 4–5, where every verb gets its full treatment. From today onwards, whenever a page “sends” anything, ask yourself: which of the five verbs was that?

PAST PAPER · ANSWERED THE HOUR ITS MATERIAL IS PRACTISED

PYQ · Part 3 · Q11(a) · 4+4 marks — the form you just built, in exam clothes.

An eight-mark form question, minutes after you built a real form. The exam calls it a household survey; your muscles know it as the order form with different labels. Watch how the same five moves earn all eight marks.

SEMESTER END EXAM · PAPER 3 · QUESTION 11(a) 4+4 MARKS ~12 MINUTES
built this today

Q11(a). Design an HTML form for a household survey (like the Samagra Kutumba survey) that collects: head of family name, phone number, number of family members, house type (own / rented / other — only one selectable), and any remarks. Use appropriate input types and labels. [4+4M]

Ans. — structure first (4M), then the code (4M), then deeper than the marks ↓

1

Choose each control by meaning (this earns the first 4M). Name takes type="text" (free words) · Phone takes type="tel" (dialled, not counted) · Family members takes type="number" with min="1" (counted) · House type takes three type="radio" sharing name="housetype" (only one may be chosen) · Remarks takes <textarea> (multi-line).✓ 2

2

State the two rules that make it a *correct* form: every control gets a <label for="…"> paired to its id, and every control gets a name so its value travels on submit — no name = silently dropped data. Writing these two sentences before the code signals understanding, not memory.✓ 2

3
The code (second 4M) — skeleton first, every for↔id pair matching:
MINI SAMPLE PROGRAM · survey.html · PART 1 OF 2 · RUNS IN ANY BROWSER
<form>
  <label for="head">Head of family</label>
  <input type="text" id="head" name="head">
  <label for="phone">Phone</label>
  <input type="tel" id="phone" name="phone">
  <label for="members">Family members</label>
  <input type="number" id="members" name="members" min="1">
</form>
✓ 2
4
The radio group + remarks + submit — the part markers check closely:
MINI SAMPLE PROGRAM · survey.html · PART 2 OF 2 · GOES INSIDE THE FORM
<fieldset> <legend>House type</legend>
  <input type="radio" id="own" name="housetype" value="own">
  <label for="own">Own</label>
  <input type="radio" id="rented" name="housetype" value="rented">
  <label for="rented">Rented</label>
  <input type="radio" id="other" name="housetype" value="other">
  <label for="other">Other</label>
</fieldset>
<label for="remarks">Remarks</label>
<textarea id="remarks" name="remarks" rows="3"></textarea>
<button type="submit">Submit survey</button>

Not paper-only: directly below this sheet the complete survey.html builds LIVE — every line pressed in one by one, a real working form beside it, output growing in sync.

✓ 2
◫
Diagram — the survey data, field by field, as it travels:
THE FORM · 5 CONTROLS text · name="head" tel · name="phone" number · name="members" 3 radios · ONE name="housetype" textarea · name="remarks" SUBMITTED DATA · ONE KEY PER name head=K+Student&phone=98… &members=4&housetype=own &remarks=… housetype appears ONCE — the group sent one value 3 radios, 1 wire
EVERY name= IS A WIRE INTO THE DATA · THE RADIO TRIO SHARES ONE WIRE — THAT SHARING IS THE 8TH MARK
✎

The line that separates an 8 from a 6: "All three house-type radios share name="housetype", which is what makes them one exclusive group — fieldset is only the visual box; the shared name is the behaviour." That's your Q3 prelab answer, earning exam marks the same afternoon.✓

★

Beyond the marks — why the examiner chose a survey. Every government or business form is the same five decisions wearing different labels: free text, constrained text, counted number, exclusive choice, long prose. Master the mapping once and every future form — exam or production — is a re-skin. The exam isn't testing tags; it's testing whether you classify data before typing.✚ depth

Marks anatomy: 4M for correct choice of controls with labels justified by meaning · 4M for working code with the radio group correctly shared. Most lost mark in real scripts: three radios with three different names. You tested exactly that bug today — in your own browser, on purpose.

The sheet earns the marks — now the file must actually run.

Exam answers in this course are never paper-only. Here is survey.html as a complete file — full skeleton, every line pressed in one by one — with its live output beside it. Type it in your fswd-practice\ sandbox (exam practice never enters the poshtik-campus repo) and it behaves exactly like this preview: labels click, one house type at a time, and Submit grows the data tail.

survey.html · the complete exam answer as a real fileONE LINE PER PRESS
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <title>Samagra Kutumba Survey</title>
6</head>
7<body>
8 <h1>Household Survey</h1>
9 <form>
10 <p>
11 <label for="head">Head of family</label>
12 <input type="text" id="head" name="head">
13 </p>
14 <p>
15 <label for="phone">Phone</label>
16 <input type="tel" id="phone" name="phone">
17 </p>
18 <p>
19 <label for="members">Family members</label>
20 <input type="number" id="members" name="members" min="1">
21 </p>
22 <fieldset>
23 <legend>House type</legend>
24 <input type="radio" id="own" name="housetype" value="own">
25 <label for="own">Own</label>
26 <input type="radio" id="rented" name="housetype" value="rented">
27 <label for="rented">Rented</label>
28 <input type="radio" id="other" name="housetype" value="other">
29 <label for="other">Other</label>
30 </fieldset>
31 <p>
32 <label for="remarks">Remarks</label>
33 <textarea id="remarks" name="remarks" rows="3"></textarea>
34 </p>
35 <button type="submit">Submit survey</button>
36 </form>
37</body>
38</html>
THE EXAM ANSWER, RUNNING — CLICK LABELS, PICK A HOUSE TYPE, PRESS SUBMIT
Samagra Kutumba Survey
file:///C:/Users/student/Desktop/fswd-practice/survey.html

Household Survey

House type
Pre-filled with the sheet's diagram data. Press Submit survey for real and the address bar grows ?head=K+Student&phone=9848012345&members=4&housetype=own&remarks=none — housetype appears once, exactly as the diagram promised.
PROJECT STATE · AFTER LAB 2

Same three files — one of them just learned to listen.

No new files today, and that's the point worth saying out loud: the repo's shape is stable while its capability grows. That's what most weeks of real development look like.

POSHTIK-CAMPUS · AFTER TODAY'S COMMIT
poshtik-campus/
index.html — unchanged since Lab 1 · its semantic surgery is Lab 3's opening move
menu.html — menu table + NEW order form ★
about.html — unchanged since Lab 1
.git/ — now holds 2 commits of history
On GitHub, your repo now tells a story.

Two commits: "First version of Poshtik Campus site", then "Add order form to menu". Anyone reading the history sees the site grow feature by feature. By Lab 12 this list reads like a course diary written in code.

The site as it stands tonight — the real files, running.

Not a drawing of your work: a browser loading the three actual files in your folder. Open menu.html below and the form is your form — click a label and focus jumps, pick one dish and the other un-picks, press Place order and the address bar inside the frame grows its ?cust-name=…&dish=… tail. Every behaviour you were told to test, testable right here.

REAL FILES, REAL BROWSER · NOT A MOCK-UP — SUBMIT ACTUALLY SUBMITS
file:///C:/Users/student/Desktop/poshtik-campus/index.html
Run the four checks on this frame. ① click each label's text — focus must land in its control; ② pick Ragi Idli Bowl, then Paneer Protein Bowl — the first must un-tick; ③ press Place order — the URL inside the frame gains ?cust-name=…&cust-phone=…&dish=…&qty=…&notes=…; ④ note the page is still unstyled — correct, because CSS is Lab 3. Structure works before it looks good.
LAB 2 · COMPLETE

Your site can now ask a question and carry the answer.

Say each of these out loud — hesitation marks your revision list.

I can choose an input type by meaning — tel to dial, number to count, textarea for sentences.
I can pair every label with its control and prove it with the click test.
I can build an exclusive radio group with one shared name — and explain why fieldset alone isn't enough.
I can read the ?name=value tail after a submit and name which control sent each piece.
I can grow an existing file in an existing repo and commit the change with a message that says what grew.
MINI PROBLEM · TERMINAL — THE END-OF-LAB CHECKPOINT
PROBLEM
Close the lab the way every lab closes from now on: record today's change to menu.html as a save point and push it to GitHub.
REQUIRE­MENTS
  • git status first — it should report modified: menu.html and nothing else.
  • git add ., then git commit with a message that says what grew: "Add order form to menu".
  • Plain git push — no -u needed; Lab 1's first push already linked the branches.
EXPECTED OUTPUT
1 file changed on the commit, then main -> main on the push. Refresh the repo page — your new message sits beside menu.html.
the git-push checkpoint · every lab ends hereONE LINE PER PRESS
·student@lab-12:~/poshtik-campus$ git status
· modified: menu.html
·student@lab-12:~/poshtik-campus$ git add .
·student@lab-12:~/poshtik-campus$ git commit -m "Add order form to menu"
·[main 4f9c2b1] Add order form to menu
· 1 file changed, 30 insertions(+)
·student@lab-12:~/poshtik-campus$ git push
·To https://github.com/you/poshtik-campus.git
· a1d3e07..4f9c2b1 main -> main
HOMEWORK 1 · EXTEND

Add one more field to the order form: type="time" named pickup, labelled "Pick up at". Submit and find pickup=… in the address bar. Commit it: "Add pickup time to order form".

HOMEWORK 2 · EXAM HAND

Write the Q11(a) survey form once on paper, from memory, timed at 12 minutes. Then type it and run the click test. Paper first — the exam hall has no autocomplete.

READ AHEAD · 10 MIN

Sit with this puzzle before Lab 3: "how would you make all three dish names green without touching the HTML?" Lab 3's stylesheet answers it in its very first rule.

EXIT TICKET · 60 SECONDS, ON PAPER

Two sentences: (1) Why must the three dish radios share one name? (2) After pressing Place order, where exactly does the typed data appear — and why there and not on a server?

Next: it starts to look like a real product.

Your site now has structure, pages, a table and a form — all wearing the browser's plain default clothes. Lab 3 adds style.css beside these three pages: one rule, and every dish changes colour at once. The makeover begins.

Back · Lab 1 · Ex.1 — the three pages Unit 1 home Next class · Class 9 — CSS Selectors: styling begins Next lab · Lab 3 · Ex.3 — style.css joins the folder