Selection fields

Build selection fields with <select>, <option> and checkbox/radio inputs.

Dropdown with select

Sometimes the user must pick from a fixed set of options: a city, a payment method or a category. For this you use the <select> tag. Each choice inside is an <option>.

Example: <select name="city"><option>Ankara</option><option>Izmir</option></select>. The browser shows this as a dropdown. With <optgroup> you can group options.

Checkbox and radio

Two more selection kinds exist: the checkbox (type="checkbox") and the radio button (type="radio"). With checkbox, the user can pick many items; with radio, only one.

For radio buttons to act together, they must share the same name. Example: write <input type="radio" name="role"> twice, and the user can pick only one. Each checkbox is independent.

Exercise Add selection fields

Add a <select> to the form; its name should be city and it should hold two <option>s. Then add an <input type="radio"> and an <input type="checkbox">.

Show example solution

<form>
  <select name="city">
    <option>Ankara</option>
    <option>Izmir</option>
  </select>
  <input type="radio" name="role">
  <input type="checkbox" name="news">
</form>

Test yourself

Which tag goes inside a <select>?
- <li>
- <p>
- <option>
- <item>
Show answer

<option> — Correct. option tags go inside a select.
Match each tag to its role

<select>

Dropdown
<option>

List entry
type="checkbox"

Multi-select
type="radio"

Single-select

Write the option

<select name="city">
  <____>Ankara</option>
</select>

Show answer

<select name="city">
  <option>Ankara</option>
</select>

Next lesson: Summary - Feedback form

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies