Open In App

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

Improve
Improve
Like Article
Like
Save
Share
Report

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.

Syntax:

<option label="text">

Example: 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: In this example, we will choose a course by creating a select option.

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.



Last Updated : 05 Jun, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads