Forms 2: Choices, Buttons and Groups

Last time your form got text fields. Today it gets choices, buttons, groups and a box for long messages.

Quick check: what is sent from <input name="town" id="t1">?

town= and the text in the field. The id t1 is not sent.

Checkboxes: tick as many as you like

Each checkbox works alone: ticking one does not change the others. checked ticks it at the start. When it is ticked, its value is sent with its name (without a value the browser sends "on"). When it is not ticked, nothing is sent. Boxes that belong together can share a name. This example is from the slides, with a fieldset around it:

<fieldset>
  <legend>Which fruits do you like?</legend>
  <input type="checkbox" id="apple" name="fruit" value="apple">
  <label for="apple">Apple</label>
  <input type="checkbox" id="banana" name="fruit" value="banana" checked>
  <label for="banana">Banana</label>
</fieldset>

Radio buttons: one choice from a group

Radio buttons with the same name form one group, and a group allows only one choice. The value of the chosen button is sent. checked selects one at the start.

Quick check

Two answers from one group?

Required 10 XP

Buttons and special fields

Code	What it does
<button type="submit">	Sends the form. Inside a form, this is the default type.
<button type="button">	Does nothing alone: it waits for JavaScript (Unit 4).
<button type="reset">	Empties every field. Rarely helpful: people lose their work.
<input type="submit" value="Send">	An older send button; value is its text.
type="file"	Choose files. accept="image/*" allows pictures, multiple several files. The form needs method="post" and enctype="multipart/form-data".
type="search"	A search box, often with a button to clear it.
type="hidden"	Sent, but not shown. Visitors can still see and change it with the developer tools, so never trust it.

A <button> can also hold a picture or an icon, so it is more flexible than <input type="submit">.

Lists: select and datalist

<label for="city">Choose a city:</label>
<select id="city" name="city">
  <option value="athens">Athens</option>
  <option value="berlin" selected>Berlin</option>
  <option value="lisbon">Lisbon</option>
</select>

Each choice is an <option>. selected belongs to an option (the slides put it on the select). multiple allows several choices, and size shows several lines at once.

A <datalist> only suggests: people can choose a suggestion or type anything. The list of the field is the id of the datalist.

<input type="text" id="town" name="town" list="towns">
<datalist id="towns">
  <option value="Athens"></option>
  <option value="Izmir"></option>
</datalist>

Grouping

Checkbox, radio, select or datalist?

Required 15 XP

Groups: fieldset and legend

<fieldset> groups fields that belong together, for example "Personal details" or a radio group. Browsers draw a frame around it. <legend> is the title of the group, and screen readers read it with the fields. The slides introduce a radio group with an <h3> and make space with <br><br>: a legend and CSS do these jobs better.

Practice

Slide bug: the payment group

Required 30 XP

This code comes from a course slide about radio buttons. We hid one bug in the names, and the layout of the slide can be better. Make one group with a fieldset and a legend, and let CSS do the spacing.

Long text: textarea

<textarea id="comment" name="comment" rows="4" cols="50"></textarea>

rows sets the height in lines, cols the width in characters, maxlength the most characters. Unlike <input>, it has a closing tag.

Practice

Contact form

Required 30 XP

Build a contact form for your website: a text area for the message, a topic list, a "Send me a copy" checkbox and a send button. Tap the code buttons to add each part.

Key words

Checkbox

A small box: ticked or not. Many can be ticked.

Radio button

A round button: one choice from a group with the same name.

Drop-down list

A list that opens when you tap it: <select>.

Text area

A box for long text with several lines.

Legend

The title of a group of fields.

In short

• Checkboxes: many answers. Radio buttons: one answer, same name.
• <select> + <option selected>; <datalist> only suggests.
• <fieldset> + <legend> group fields; <textarea> holds long text.
• submit sends, button waits for JavaScript, reset empties the form.

Sources

1. MDN Web Docs (2026). Basic native form controls.
2. MDN Web Docs (2026). Other form controls (select, datalist, textarea).
3. MDN Web Docs (2026). <input type="checkbox">.
4. MDN Web Docs (2026). <input type="file">.
5. MDN Web Docs (2026). <input type="hidden">.
6. W3C WAI (2024). Grouping Controls.