In this article, I will show you how to use the option tag in HTML, this is the tag that comes with the select tag to create options in the list.

The option tag creates an option in the list of options of the <select> tag.

Use the <option> tag inside a <select> or <datalist> tag pair.

Note :

• The < optton> tag can be used without any attributes. However, if you want to send selected data to the server then you need to use the value attribute.
• If you have too many options, you can use the <optgroup> tag.

1. How to use the option tag in HTML

Example : Use option to create options in the list of courses at web888.vn.

 <select> <option>PHP</option> <option>Javascript</option> <option>HTML-CSS</option> <option>Database</option> <option>Lập trình mobile</option> </select>

Each course is in a pair of <option> tags, when choosing an option, the value of that option will be the value of the <select> tag.

2. Attribute of the option tag in HTML

Here is a commonly used attribute in the select tag.

• disabled – disables the option, it will still be visible but not for the user to choose.
• label – set a short label for the option.
• selected – if any option has this attribute, it will be the default value selected after page load.
• value – the value of the option, also the value of select if that option is selected.

For example, use the value and selected attributes of the option tag. when submitted will alert the value of select.

 <form> <select id="select"> <option value="php">PHP</option> <option value="js">Javascript</option> <option value="html/css" selected="selected">HTML-CSS</option> <option value="db">Database</option> <option value="mobile">Lập trình mobile</option> </select> <input type="submit" name="Submit" onclick='alert(document.getElementById("select").value)'> </form>

3. Add CSS for html . option tag

We rarely use CSS for option tags. However, if you want to style it then use the following:

 option{ color:red }

Or you set an ID / Class for it and then use a selector query.