📝 Days 6–10 – Forms, Semantics & SEO · Day 06
Day 6: Forms 1: Inputs, Labels & Buttons
⏱ 90 min📶 Beginner → Intermediate🎯 100% self-study
Day 6 / 15
✅ Today you will learn
- How a form sends data (action, method)
- Labels that are clickable and accessible
- name, value, placeholder
- Input types: text, email, tel, number, date, range, color, file
- Radio buttons, checkboxes and buttons
🏢 In the real world
Instead of long phone calls, Sharma Sweets wants an online bulk-order enquiry form: name, mobile, e-mail, event date, quantity, sweet choices and a delivery option. Forms are how every website collects information – from Google search to bank login.
How a form works
method="get"
- Data goes in the URL: ?q=ladoo
- Good for search and filters
- Can be bookmarked
- Never for passwords
method="post"
- Data goes in the request body
- For orders, logins, uploads
- Not shown in the URL
- Needed for file uploads
HTML
<form action="https://www.google.com/search" method="get" target="_blank"> <label for="q">Search recipes on Google:</label> <input type="search" id="q" name="q" value="ghewar recipe"> <button type="submit">Search</button> </form>
Labels, name and value
HTML
<form> <label for="fullname">Full name</label><br> <input type="text" id="fullname" name="fullname" placeholder="e.g. Meena Gupta" autocomplete="name"><br><br> <label>Mobile <input type="tel" name="mobile" placeholder="98290 12345" autocomplete="tel"></label> </form>
⚠️ Placeholder is not a label
Placeholder text disappears when you type and is often too light to read. Always use a visible <label>. Without a name attribute, a field’s value is not sent at all!
Input types
HTML
<form> <p><label>E-mail <input type="email" name="email"></label></p> <p><label>Quantity (kg) <input type="number" name="qty" min="1" max="200" step="0.5" value="5"></label></p> <p><label>Event date <input type="date" name="event_date"></label></p> <p><label>Delivery time <input type="time" name="time"></label></p> <p><label>Sweetness level <input type="range" name="sweet" min="1" max="5"></label></p> <p><label>Box colour <input type="color" name="box_colour" value="#e34f26"></label></p> <p><label>Upload design <input type="file" name="design" accept="image/*"></label></p> <p><label>Password <input type="password" name="pw"></label></p> </form>
| type | Phone keyboard / behaviour |
|---|---|
| @ key, checks the format | |
| tel | Number pad |
| number | Number pad, min/max/step, spin buttons |
| date / time | Native date and time pickers |
| search | Clear (✕) button, “Search” key |
| url | .com and / keys, checks the format |
| password | Hides characters |
| hidden | Not shown – sends extra data like an order id |
Radio buttons and checkboxes
HTML
<form> <p>Delivery (choose one):</p> <label><input type="radio" name="delivery" value="pickup" checked> Shop pickup</label> <label><input type="radio" name="delivery" value="home"> Home delivery (+₹100)</label> <p>Sweets (choose any):</p> <label><input type="checkbox" name="sweets" value="kaju"> Kaju katli</label> <label><input type="checkbox" name="sweets" value="ladoo" checked> Ladoo</label> <label><input type="checkbox" name="sweets" value="ghewar"> Ghewar</label> </form>
Buttons
HTML
<form onsubmit="alert('Form submitted! (demo)'); return false;">
<input type="text" name="n" value="Meena">
<button type="submit">Send enquiry</button>
<button type="reset">Clear</button>
<button type="button" onclick="this.textContent='Clicked ✔'">Just a button</button>
</form>💡 Always set the button type
Inside a form, a <button> without a type acts as submit. Write type="button" for buttons that only run JavaScript.
Real example: bulk-order enquiry form
HTML
<form action="https://httpbin.org/post" method="post" target="_blank">
<h2>Bulk order enquiry</h2>
<p><label for="n">Your name</label><br><input id="n" name="name" autocomplete="name" required></p>
<p><label for="m">Mobile</label><br><input id="m" type="tel" name="mobile" autocomplete="tel" required></p>
<p><label for="e">E-mail</label><br><input id="e" type="email" name="email" autocomplete="email"></p>
<p><label for="d">Event date</label><br><input id="d" type="date" name="event_date"></p>
<p><label for="q">Quantity (kg)</label><br><input id="q" type="number" name="qty" min="5" value="10"></p>
<p>Delivery:
<label><input type="radio" name="delivery" value="pickup" checked> Pickup</label>
<label><input type="radio" name="delivery" value="home"> Home delivery</label></p>
<input type="hidden" name="source" value="website">
<button type="submit">Send enquiry</button>
</form>🧠 See what the server receives
httpbin.org/post echoes the data back, so you can see each name=value pair. In the PHP course you will write the server code that saves the enquiry and e-mails the shop.
🏅 Job skills unlocked today
✔ Build forms with action and method✔ Use labels, name and autocomplete correctly✔ Pick the right input type for each field✔ Use radios, checkboxes and buttons
Practice tasks
🏋️ Practice – do it yourself
Task 1: Build a school admission enquiry form: student name, parent mobile, class (radio 9/10/11/12), subjects (checkboxes) and date of birth.
Show solution
HTML
<form method="post" action="https://httpbin.org/post" target="_blank">
<p><label>Student name <input name="student" required></label></p>
<p><label>Parent mobile <input type="tel" name="mobile"></label></p>
<p>Class: <label><input type="radio" name="class" value="9"> 9</label> <label><input type="radio" name="class" value="10"> 10</label>
<label><input type="radio" name="class" value="11"> 11</label> <label><input type="radio" name="class" value="12"> 12</label></p>
<p>Subjects: <label><input type="checkbox" name="subjects" value="maths"> Maths</label>
<label><input type="checkbox" name="subjects" value="it"> IT</label></p>
<p><label>Date of birth <input type="date" name="dob"></label></p>
<button type="submit">Submit</button>
</form>Task 2: Make a YouTube search box (GET form) using action="https://www.youtube.com/results" and name="search_query".
Show solution
HTML
<form action="https://www.youtube.com/results" method="get" target="_blank"> <label>Search YouTube <input type="search" name="search_query" value="html tutorial hindi"></label> <button>Go</button> </form>
Task 3: Explain why a field without a name attribute is never sent to the server.
Quick quiz
🧠 Quick Quiz – test yourself
1. Which method for a login form?
Keeps the password out of the URL.
2. Radio buttons belong together when they share the same…
Same name = one group.
3. label for="email" connects to…
for matches the id.
4. type="tel" on a phone shows…
Faster to type numbers.
5. A <button> with no type inside a form…
Default type is submit.
Interview corner
💼 Interview Corner
GET vs POST?
GET appends data to the URL (bookmarkable, cached, limited size) – for searches and filters. POST sends data in the body – for creating or changing data, logins and file uploads (with enctype="multipart/form-data").
Why are labels important?
They describe the field for screen readers, increase the click/tap area, and remain visible while typing – unlike placeholders.
Summary
- form action + method decide where and how data goes.
- Every field needs a name; every field deserves a label.
- Input types give the right keyboard and built-in checks.
- Radios share a name for one choice; checkboxes allow many; set button types.
➡️ Next
Day 7: select menus, textarea and built-in validation – make the form foolproof.
Frequently Asked Questions
Can a form work without a server?
It can be filled and validated, but to store or e-mail data you need a server script (PHP, Node) or a service like Google Forms, Formspree or Netlify Forms.
How do I upload files?
Use method="post", enctype="multipart/form-data" and <input type="file">; the server must handle the upload.
