Skip to content
Related Articles

Related Articles

Save Article
Improve Article
Save Article
Like Article

How to specify a shorter label for an option in HTML5 ?

  • Last Updated : 22 May, 2021

The HTML option label attribute specifies the text value that defines the option’s shorted label.

In the drop-down list, the shorter version will be shown. An object stored in a <select>, <optgroup>, or <datalist> element is defined by the HTML <option> element. As a result, <option> can be used to represent popup menu items and other lists of items in an HTML document.

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.

Syntax:

<option label="text">

Examples : The label attribute for an option element is shown in the examples below.



HTML




<!DOCTYPE html>
<html>
<head>
 
<style>
    body
      {
        text-align:center;
      
    </style>
     
</head>
 
<body>
    <h1 style="color:green">GeeksforGeeks</h1>
     
    <h2>
     Choose a Coding Language in which you code....
   </h2>
     
    <select>
        <option>Choose an option</option>
        <option label="C">C Programming</option>
        <option label="C++">C++ Programming</option>
        <option label="JAVA">JAVA Programming</option>
        <option label="Python">Python Programming</option>
        <option label="C#">C# Programming</option>
    </select>
</body>
 
</html>

Output :

Label1

Example 2:

HTML




<!DOCTYPE html>
<html>
<head>
 
  <style>
    body
      {
        text-align:center;
      }
    h1
      {      
        color:green;
      }
       
    h2
      {      
        color:orange;
      }
  </style>
     
</head>
 
<body>
    <h1>GeeksforGeeks</h1>
     
    <h2>
     Choose a Course in which you want to enroll
    </h2>
     
    <select>
        <option>Choose an option</option>
        <option label="Java Collections">1</option>
        <option label="DSA Self Paced">2</option>
        <option label="Live Backend Development in Java">3</option>
        <option label="Python Library">4</option>
        <option label="Standard Template Library in C+">5</option>
    </select>
</body>
 
</html>

Output:

Label 2

Note: Firefox doesn’t support <option> label attribute.




My Personal Notes arrow_drop_up
Recommended Articles
Page :