HTML Form Option Element

  • Post category:HTML
  • Post author:
  • Post last modified:June 13, 2021
  • Reading time:4 mins read
You are currently viewing HTML Form Option Element

The option element defined the list item for a datalist. The option element are mostly used with the select element.

Option Element- syntax

The option element start with <option> tag and closed with </option> tag.

Example

<form action="action_page">
<label for="fruits">List of Fruits</label>
<select id="fruits" name="fruits">
<option value="apple">Apple</option>
<option value="banana">Banana</option>
<option value="mango">Mango</option>
<option value="coconut">Coconut</option>
<option value="orange">Orange</option>
</select>
</form>

Results

Option element Attributes

  • value – The value attributes defines the value of the option element which will be used when the form submitted.
  • selected – The selected attribute defines the pre-selected list item in the drop down list.

Option element – value attribute

The value attribute defines the value of the option element.

<select id="fruits" name="fruits">
<option value="apple">Apple</option>
<option value="banana">Banana</option>
<option value="mango">Mango</option>
<option value="coconut">Coconut</option>
<option value="orange">Orange</option>
</select>

option element – selected Attribute

The option element selected attribute specifies the pre-selected item in the list.

<form action="action_page">
<label for="fruits">List of Fruits</label>
<select id="fruits" name="fruits">
<option value="apple" selected>Apple</option>
<option value="banana">Banana</option>
<option value="mango">Mango</option>
<option value="coconut">Coconut</option>
<option value="orange">Orange</option>
</select>
</form>

Result

Ashim Khatua

Professionally Web Developer since 2015, And also a Blogger. I am the founder of SiteCodings.com. I love to share my knowledge, which I earned the past few years. I want to share my knowledge with you through my Blog. Keep Reading.

Leave a Reply