How to use the Select HTML Element?


select is an HTML control form element used for selecting one or more value amongst a set of options.

It creates a drop-down list used in a form that will set a scalar value from a list of options.



Only with option has children.

For example, this HTML creates a drop-down list of colors:

  <option value="blue">Blue</option>
  <option value="yellow">yellow</option>
  <option value="red">Red</option>
  <option selected value="green">Green</option>


HTML - Optgroup element (Group of Option)

<form onSubmit="handleSubmit(this); return false;">
<label for="country">Choose a country:</label>
<select id="country">
    <optgroup label="Europa">
    <optgroup label="Africa">
<button type="submit">Submit form</button>
let handleSubmit = function(form){
    console.log("The country chosen is ";

Free form

By default, there is no free form. The select element forces a selection (whereas datalist does not)

But you may add an extra input value

<label for="color">Colors:</label>
  <option value="blue">Blue</option>
  <option value="yellow">yellow</option>
  <option value="red">Red</option>
  <option selected value="green">Green</option>
  If other, please specify:
<input type="text" name="color_free" id="color_free">


Inside a select, you may find:

  • an optgroup [optional] that group
    • option elements that defines the values.



Boolean attribute indicates that multiple options can be selected in the list by holding the ctrl key (Default: false)


<form onSubmit="handleSubmit(this); return false;" >
    <select id="color" name="color" multiple>
      <option value="blue">Blue</option>
      <option selected value="yellow">yellow</option>
      <option value="red">Red</option>
      <option selected value="green">Green</option>
    <button type="submit">Submit form</button>
let handleSubmit = function(form){
    console.log("The select type is "+form.color.type);
    console.log("The number of options are "+form.color.length);
    console.log("The first value chosen is "+form.color.value);
    let formData =  new FormData(;
    let colors =  formData.getAll("color");
    console.log("The value chosen are "+colors);
  • The result


If not used in a form element, you can set the form attribute with the id of the form to associate it with the select.


When the value changes, it fires an input event.

  • The HTML
<select name="crust">
  <option value="regular">Regular crust</option>
  <option selected value="deep">Deep dish</option>
  <option value="thin">Thin crust</option> 
  • The javascript
document.querySelector("select").addEventListener("input", function(){
   console.log("The input event has fired for the value: "+this.value);
  • Result: Select an option and see the log of values


Javascript / Jquery


See also React Select Library

1) 2)

Discover More
Bootstrap - Select

Bootstrap permits to style the default select element but does not add any feature. The bootstrap select library aims to fill the gap: with a search box function multiple select on one line and...
Devtool Chrome Event Listener
Change event (DOM, Javascript)

A page and example about the change event
Devtool Chrome Event Listener
DOM - Event Type (name)

An event is categorize by its type which is a property of the event object The type of an event is also known as the name of the event (Ref)...
Devtool Chrome Event Listener
DOM - Input Event

The input event fires when the value has changed of one of this input element: a input, a select, or textarea With an input The HTML The javascript Result: Type a text in the input...
HTML - (Flow|Body) Content

Most elements that are used in the body of documents and applications are categorized as flow content. Flow content consists of flow elements intermixed with normal character data. (ifbodhead...
HTML - Checked

checked is an HTML attribute that indicates via its value (true or false - default to true) if the form control element is checked. It's used: in a checkbox or radio button select optionselected...
HTML - Interactive Content (User Interaction) (Element)

Interactive element are interactive elements that are specifically intended for user interaction. (if the controls attribute is present) (if the usemap attribute is present) (if...
HTML - Optgroup element (Group of Option)

optgroup is an HTML element that group options within a select element. optgroup
HTML - Option

option is an element used to define a value. option can be contained in: a select (list) an optgroup (to group option) or a datalist element (data array) For example, this select creates a...
HTML - Phrasing Content (Text)

Phrasing content is: the text of the document, as well as elements that mark up that text at the intra-paragraph level. Runs of phrasing content form paragraphs. Most elements that are categorized...

Share this page:
Follow us:
Task Runner