Theory
One form, seven kinds of question
The FestConnect form asks: your name (free text), your year (pick one), which events (pick several), a T-shirt size (dropdown), any special request (a paragraph), your college (type it, or pick from a suggested list), and finally Register or Clear.
That is seven different shapes of answer, and HTML has a control for each. It looks like a lot to memorise. It is not, because they all obey one rule.
Formula
The one rule: name is the key
When the form submits, each control sends a name=value pair. The name you give a control is the label the server files its value under.
<input type="text" name="fullname"> typed with 'Aditi' sends fullname=Aditi.
No name, no data sent. Every control below is just a different way of producing that one value, and every one needs a name.
Theory
The family, by shape of answer
- input type="text": one line of free text.
- input type="radio": pick exactly one from a group. All buttons in the group share one name.
- input type="checkbox": pick any number (each can have its own name or a shared one).
- input type="submit" / "reset": send the form / clear it.
- select with option children: a dropdown.
- textarea (
rows,cols): a multi-line box. - button (
type,onclick): a clickable button that can run JavaScript. - datalist: suggestions for a text input, while still allowing free typing.
Practical
The real FestConnect controls
<form action="register.php" method="post">
<label for="fullname">Name</label>
<input type="text" id="fullname" name="fullname">
<!-- radio group: one name, pick ONE -->
<label><input type="radio" name="year" value="1"> First</label>
<label><input type="radio" name="year" value="2"> Second</label>
<!-- checkboxes: pick MANY -->
<label><input type="checkbox" name="events" value="robotics"> Robotics</label>
<label><input type="checkbox" name="events" value="dance"> Dance</label>
<label for="size">T-shirt</label>
<select id="size" name="size">
<option value="s">S</option>
<option value="m">M</option>
</select>
<label for="note">Special request</label>
<textarea id="note" name="note" rows="3" cols="30"></textarea>
<!-- datalist: suggest, but allow free text -->
<input list="colleges" name="college">
<datalist id="colleges">
<option value="Ganpat University">
<option value="MSU Baroda">
</datalist>
<input type="submit" value="Register">
<input type="reset" value="Clear">
</form>This example runs in Gri-Learn on the web, where you can edit it and see the output.
At a glance
Which control for which answer
| Answer shape | Control | Pick |
|---|---|---|
| One line of text | input type=text | n/a |
| One from a set | radio (shared name) | exactly one |
| Any from a set | checkbox | zero or many |
| One from a long list | select + option | exactly one |
| A paragraph | textarea | n/a |
| Text with hints | input + datalist | type or pick |
Think first
Why is only ONE year selectable?
In the code above, both 'First' and 'Second' year radios use name="year". Explain how sharing one name is exactly what makes them behave as a single either/or group. What breaks if you give them different names?
Show the answer
Radios with the same name form one group, and a group allows only one selection: choosing 'Second' unticks 'First'. The shared name is the grouping mechanism. If you gave them different names (year1, year2), the browser sees two unrelated one-button groups, so a user could tick both, which defeats the point of a radio. Same name = one choice.
Quiz
You want students to select ALL the events they will attend (they can join several). Which control is correct?
- Checkboxes, one per event
- Radio buttons sharing one name
- A single-line text input
- A submit button per event
Show the answer
Checkboxes, one per event
Checkboxes allow any number of selections, which matches 'attend several events' (A). Radios sharing a name allow only one (B), wrong when multiple are valid. A text input (C) makes them type event names by hand, error-prone and unsearchable. Submit buttons (D) send the form, they are not a way to choose options. Radio = one, checkbox = many is the core distinction.
Watch out
Three traps in this family
1. Radios that all tick independently: you forgot to give the group one shared name.
2. A label that does not focus its box on click: the for on the label must equal the id on the input (for="size" <-> id="size"). Matching them also enlarges the tap target, which matters on phones.
3. A `<button>` with no `type` inside a form submits the form, often unexpectedly reloading the page. If a button is only meant to run JavaScript, write type="button".
Theory
These names come back in JavaScript
The name and id you set here are the handles Unit 4 and Unit 5 grab with document.getElementById("fullname") to read what the user typed, and validate before submit. Good, meaningful names now (fullname, email, year) make the JavaScript readable later. Sloppy names (t1, t2) haunt you.
Summary
Key takeaways
- Every form control needs a name: it is the key its value is sent under (no name, no data).
- input text = one line; radio = pick one (group shares one name); checkbox = pick many; submit/reset send/clear.
- select + option = dropdown; textarea (rows, cols) = multi-line; datalist = suggestions with free text still allowed.
- Pair each control with a <label>, and match label for to input id.
- A <button> with no type submits the form; use type="button" for JS-only buttons.
- Memory hook: name is the key; radio one, checkbox many.