<select> + <option> + <optgroup>

Dropdowns — the most common form element you'll write

<select name="country">
  <option value="">— Pick one —</option>
  <option value="us">United States</option>
  <option value="ua">Ukraine</option>
  <option value="de" selected>Germany</option>
</select>

• The value attribute is what gets submitted (country=de). The text inside is what the user sees.
• selected on one option pre-selects it on first render.
• The first option with an empty value works as a placeholder.

<optgroup> for categories

<select name="lang">
  <optgroup label="Latin">
    <option value="en">English</option>
    <option value="es">Spanish</option>
  </optgroup>
  <optgroup label="Cyrillic">
    <option value="ru">Russian</option>
    <option value="uk">Ukrainian</option>
  </optgroup>
</select>

The optgroup label is the bold category header in the dropdown.

multiple

<select multiple> lets the user pick 0+ options (Cmd/Ctrl+click). The submitted form data has the SAME name multiple times — lang=en&lang=es. FastAPI receives this as list[str] if typed correctly:

async def submit(lang: list[str] = Form()):
    return {"chosen": lang}   # ["en", "es"]

When NOT to use <select>

• 2 options → use <input type="radio"> (visible immediately).
• 50+ options → use a combobox / autocomplete (native datalist or a custom widget).
• Search-like → <input list="…"> with a <datalist>.