select: The Select element

The <select> HTML element represents a control that provides a menu of options from which the user can choose one or more options.

Attributes

Specific attributes

Recommended attributes

name="[field name]" specifies the name of the select control, which is submitted with the form data.

Allowed attributes

disabled prevents user interaction with the select control.

form="[form id]" associates the select with a form element.

multiple allows the user to select multiple options.

required indicates that an option must be selected before submitting the form.

size="[number]" specifies the number of visible options in a drop-down list.

Global attributes

accesskey Specifies a keyboard shortcut to activate or focus an element.

aria-* Defines accessibility properties and states for assistive technologies.

class Specifies one or more CSS class names for styling the element.

data-* Stores custom data private to the page or application.

dir Sets the text direction (left-to-right, right-to-left, or auto).

hidden Hides the element from display and assistive technologies.

id Defines a unique identifier for the element within the document.

inputmode Hints which virtual keyboard type to display on mobile devices.

itemid Provides a global identifier for microdata items.

itemprop Defines a property name-value pair for microdata.

itemref Associates properties with an item via element IDs for microdata.

itemscope Creates a new microdata item container.

itemtype Specifies the vocabulary URL for microdata items (like Schema.org).

lang Specifies the primary language of the element’s content.

nonce Provides a cryptographic nonce for Content Security Policy.

role Defines the element’s semantic role for accessibility.

tabindex Controls keyboard navigation order and focusability.

title Provides advisory information displayed as a tooltip.

Example

<form action="/site-generator" method="post">
  <h2>Choose Your Website Setup</h2>
  
  <label for="generator">Static Site Generator:</label>
  <select id="generator" name="generator" required>
    <option value="">-- Please choose an option --</option>
    <option value="jekyll">Jekyll</option>
    <option value="hugo">Hugo</option>
    <option value="11ty">Eleventy (11ty)</option>
    <option value="gatsby">Gatsby</option>
    <option value="nextjs">Next.js</option>
    <option value="plain">Plain HTML/CSS</option>
  </select>
  
  <label for="hosting">Hosting Platform:</label>
  <select id="hosting" name="hosting">
    <optgroup label="Free Hosting">
      <option value="github-pages">GitHub Pages</option>
      <option value="netlify">Netlify</option>
      <option value="vercel">Vercel</option>
      <option value="surge">Surge.sh</option>
    </optgroup>
    <optgroup label="Paid Hosting">
      <option value="digital-ocean">DigitalOcean</option>
      <option value="linode">Linode</option>
      <option value="aws">AWS S3</option>
    </optgroup>
    <optgroup label="Self-hosted">
      <option value="vps">VPS</option>
      <option value="home-server">Home Server</option>
    </optgroup>
  </select>
  
  <label for="features">IndieWeb Features (select multiple):</label>
  <select id="features" name="features" multiple size="5">
    <option value="webmention">Webmention Support</option>
    <option value="microformats">Microformats</option>
    <option value="rss">RSS Feed</option>
    <option value="atom">Atom Feed</option>
    <option value="indieauth">IndieAuth</option>
    <option value="micropub">Micropub</option>
    <option value="posse">POSSE Integration</option>
  </select>
  
  <p><small>Hold Ctrl (or Cmd on Mac) to select multiple features.</small></p>
  
  <button type="submit">Generate Configuration</button>
</form>