Open In App

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

Last Updated : 05 Jun, 2023
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.



Previous Article
Next Article

Similar Reads

How to specify shorter version of the content in a header cell in HTML5 ?
In this article, we will learn how to specify a shorter version of the content in a header cell. This can be helpful for screen reader users as they do not need to read out larger headings or make it easy to understand known abbreviations. The &lt;th&gt; tag is used to specify the heading for an &lt;table&gt; element and the content of the heading
2 min read
How to specify a label for an optgroup tag in HTML5 ?
The HTML &lt;optgroup&gt; element creates a grouping of options within a &lt;select&gt; element. The HTML &lt;optgroup&gt; label Attribute text is used to specify a label for an option-group. The disabled attribute is used to specify that an option-group should be disabled. Syntax: &lt;optgroup label="name"&gt; Example 1: The following example demo
1 min read
How to specify that an option-group should be disabled in HTML5 ?
We will use &lt;optgroup&gt; and &lt;option&gt; tags to create an option-group list and use the disabled attribute with &lt;optgroup&gt; to create a disabled option-group list. The &lt;optgroup&gt; tag is used to create a group of the same category options in a drop-down list. The &lt;optgroup&gt; tag is required when there is a long list of items
1 min read
How to specify that an option should be disabled in HTML5 ?
The &lt;select&gt; tag is used to create a drop-down list in an HTML document. Generally, it is used in the forms when some data is to be collected from the user. By default, all the values or options can be chosen or selected from the drop-down list created using the &lt;select&gt; element. However, sometimes we may want the user to select out of
2 min read
How to specify that an option should be pre-selected when the page loads in HTML5?
The &lt;option&gt; tag defines an option in a select list. The &lt;option&gt; tag is generally used with the value attribute to specify which value should be sent to the server for further processing. When a drop-down list is created using the &lt;select&gt; element, the first option or the first choice defined by the &lt;option&gt; tag is seen as
2 min read
How to Add Border on Only One Side in Shorter Way in CSS ?
The border is one of the most important styling properties in CSS and it is very crucial to add in most of the layout to feature stark distinctions. But not always required we need to add borders to all sides and maybe to only one side. In this article, we are going to see the shortest way to do that in traditional CSS, Bootstrap 5, and Tailwind CS
3 min read
How to specify which form element a label is bound to ?
The label tag in HTML allows us to click on the label, which will in turn be treated like clicking on the corresponding input type. Input types in the HTML can be a radio button, checkbox, email, date, color, etc. The for attribute specifies which form element a label is bound to. Syntax: &lt;label for="element_id"&gt; Label Content &lt;/label&gt;
2 min read
How to specify one or more forms the label belongs to ?
In this article, we will learn how to specify one or more forms that a label belongs to. This can be used in situations when the label is defined outside the form element and needs to be linked back to the form. Approach: We will use the form attribute of the label to specify one or more forms that the label belongs. This attribute accepts the id o
3 min read
How to specify the media type of the script in HTML5 ?
The HTML &lt;script&gt; type attribute specifies the type of script that is being represented. The type attribute identifies the content that appears between the &lt;script&gt; and &lt;/script&gt; tags. It specifies the script's MIME type and identifies the Tag's content. It has a single value, media type, that specifies the MIME type of the script
1 min read
How to specify a list of pre-defined options for input controls in HTML5?
In this article, we specify a list of pre-defined options for input controls by using the HTML list Attribute. Syntax: &lt;input list="datalist_id"/&gt; Example 1: &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt; How to specify a list of pre-defined options for input controls? &lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;h1&gt; GeeksF
1 min read