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>