HTML Select & Options

« Prev Next »

<select> creates a dropdown list in a form. The user can select one (or more) options from a list of options.

 

Use <option> to define the options inside the <select>.

 

html-select

Syntax

<select name="field_name">
  <option value="option1">Option 1</option>
  <option value="option2">Option 2</option>
</select>

Example

 <form>
  <label for="country">Choose your country:</label>
  <select id="country" name="country">
    <option value="india">India</option>
    <option value="usa">USA</option>
    <option value="uk">UK</option>
  </select>
</form>
Run ›

<select> Attributes

Attribute Description
name Name of the dropdown for form submission
id Used with <label> for accessibility
multiple Allows multiple selection
size Number of visible options (used with multiple)
required Makes selection mandatory
disabled Disables the dropdown

Multiple Select

<select name="skills" multiple size="4">
  <option value="html">HTML</option>
  <option value="css">CSS</option>
  <option value="js">JavaScript</option>
  <option value="php">PHP</option>
</select>
Run ›

<option> Attributes

Attribute Description
value Value sent to the server when selected
selected Pre-selects the option
disabled Makes an option unselectable
notepad
  • Always use a <label> for accessibility.
  • Provide a default placeholder option like --Select--.
  • Use required for mandatory dropdowns.
  • Use multiple and size for multi-select lists.
« Prev Next »

Quickly Find What You Are Looking For

OnlineTpoint is a website that is meant to offer basic knowledge, practice and learning materials. Though all the examples have been tested and verified, we cannot ensure the correctness or completeness of all the information on our website. All contents published on this website are subject to copyright and are owned by OnlineTpoint. By using this website, you agree that you have read and understood our Terms of Use, Cookie Policy and Privacy Policy.