Skip to content
Related Articles

Related Articles

Improve Article
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>

Output:




My Personal Notes arrow_drop_up
Recommended Articles
Page :