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

Last update on August 19 2022 21:51:57 (UTC/GMT +8 hours)

Solution:

HTML Code:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>How to specify a label for an option-group</title>
</head>
<body>
<form name="Fav_Sport" >  
<label>Favorite Sports</label>  
<select name="favoritesports" 
id="favoritesports">  
<optgroup label="Sports">  
<option label="Soccer">Soccer</option>  
<option label="Hockey">Hockey</option>  
<option label="Tennis">Tennis</option>  
<option label="Golf">Golf</option>  
</optgroup>  
</select>  
</form>  
</body>
</html>

Live Demo:

See the Pen option-disabled-answer by w3resource (@w3resource) on CodePen.

See the solution in the browser

Supported browser