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">
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.
Please Login to comment...