How to specify a shorter label for an option in HTML5 ?
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
Share your thoughts in the comments
Please Login to comment...