How to define an option in a drop-down list in HTML5 ?

Last Updated : 17 Mar, 2021

In this article, we will learn how to define an option in a drop-down list in HTML5. The <select> element is used to create a drop-down lists in HTML. This is generally used to present a list of options to the user in a form so that the user could choose one option as the needed one.

The <option> element which is defined inside the <select> element defines the options that are available in the drop-down list. This tag contains the following attributes:

The below examples show how an option can be defined in a drop-down list.

Example 1: In this example, the subjects are displayed as options in the drop-down list.

HTML

<html> 
<body> 
  <h1 style="color: green"> 
    GeeksforGeeks 
  </h1> 
  <h3>Options Demo</h3> 
    <form> 
      <label for="sub">Subjects:  
      </label> 
  
      <!-- Specifying the select  
      element to be used -->
      <select name="sub" id="sub"> 
  
        <!-- Specifying the options to 
         be available for selection -->
        <option value="maths"> 
          maths 
        </option> 
        <option value="science"> 
          science 
        </option> 
        <option value="social"> 
          social 
        </option> 
        <option value="hindi"> 
          hindi 
        </option> 
      </select> 
      <br><br> 
      <input type="submit" value="Submit"> 
  </form> 
</body> 
</html>

Output:

Example 2: In this example, the marks of the subject are specified using the value attribute in the options of the drop-down list.

HTML

<html> 
<body> 
  <h1 style="color: green"> 
    GeeksforGeeks 
  </h1> 
  <h3>Options Demo</h3> 
  <form> 
    <label for="sub">Subjects:  
    </label> 
  
    <!-- Specifying the select  
    element to be used -->
    <select name="sub" id="marks"> 
  
      <!-- Specifying the options to  
      be available for selection 
      along with numerical values -->
      <option value="98"> 
        maths marks 
      </option> 
      <option value="90"> 
        science marks 
      </option> 
      <option value="90"> 
        social marks 
      </option> 
      <option value="45"> 
        hindi marks 
      </option> 
    </select> 
  
    <input type="submit" 
           value="Submit"> 
  </form> 
</body> 
</html>