HTML option: Main Tips
- HTML
<option>
specifies the possible options in a drop-down menu. <option>
HTML works together with <select> element to create a drop-down menu for users to choose answers.- If the option list contains many suggested answers, it is better to divide them into groups with <optgroup>.
Purpose of option
<option>
HTML sets suggested answers in <select>
element list.
<p>Which pet would you like to keep at home?</p>
<select>
<option value="cat">Cat</option>
<option value="wolf">Wolf</option>
<option value="llama">Llama</option>
</select>
![DataCamp DataCamp](https://assets.bitdegree.org/online-learning-platforms/storage/media/datacamp-logo-5f96bfc70113e.o.png)
- Easy to use with a learn-by-doing approach
- Offers quality content
- Gamified in-browser coding experience
- The price matches the quality
- Suitable for learners ranging from beginner to advanced
- Free certificates of completion
- Focused on data science skills
- Flexible learning timetable
![Udacity Udacity](https://assets.bitdegree.org/online-learning-platforms/storage/media/udacity-review-logo-small.o.png)
- Simplistic design (no unnecessary information)
- High-quality courses (even the free ones)
- Variety of features
- Nanodegree programs
- Suitable for enterprises
- Paid Certificates of completion
![Udemy Udemy](https://assets.bitdegree.org/online-learning-platforms/storage/media/udemy-logo-small.o.png)
- Easy to navigate
- No technical issues
- Seems to care about its users
- Huge variety of courses
- 30-day refund policy
- Free certificates of completion
Attributes for option
selected
Make a specific HTML option selected as soon as the list opens by applying the selected
attribute.
<p>Which pet would you like to keep at home?</p>
<select>
<option value="cat">Cat</option>
<option value="wolf">Wolf</option>
<option value="llama" selected>Llama</option>
</select>
disabled
When the opening HTML <option>
tag contains the disabled
attribute, the option won't be checkable.
<p>Which pet would you like to keep at home?</p>
<select>
<option value="cat" disabled>Cat</option>
<option value="wolf">Wolf</option>
<option value="llama">Llama</option>
</select>
label
HTML option label
defines a shorter name for an option. The final option HTML list contains the shortened version.
<p>Which pet would you like to keep at home?</p>
<select>
<option label="Cat">Cat - the tiger of the house</option>
<option label="Dog">Dog - best friend of the cat</option>
<option label="Llama">Llama - just fabulous</option>
</select>
value
When the opening HTML <option>
tag has the value
attribute, it indicates the answer to be sent to a server (after an option is selected).
<p>Which pet would you like to keep at home?</p>
<select>
<option value="cat">Cat</option>
<option value="wolf">Wolf</option>
<option value="llama">Llama</option>
</select>
Browser support
![Browser image](https://www.bitdegree.org/learn/assets/browsers/chrome-logo.jpg)
Chrome
![Browser image](https://www.bitdegree.org/learn/assets/browsers/edge-logo.jpg)
Edge
![Browser image](https://www.bitdegree.org/learn/assets/browsers/firefox-logo.jpg)
Firefox
![Browser image](https://www.bitdegree.org/learn/assets/browsers/ie-logo.jpg)
IE
![Browser image](https://www.bitdegree.org/learn/assets/browsers/opera-logo.jpg)
Opera
![Browser image](https://www.bitdegree.org/learn/assets/browsers/safari-logo.jpg)
Safari
Mobile browser support
![Browser image](https://www.bitdegree.org/learn/assets/browsers/chrome-logo.jpg)
Chrome
![Browser image](https://www.bitdegree.org/learn/assets/browsers/firefox-logo.jpg)
Firefox
![Browser image](https://www.bitdegree.org/learn/assets/browsers/opera-logo.jpg)
Opera
![Browser image](https://www.bitdegree.org/learn/assets/browsers/safari-logo.jpg)