Select Element In HTML Form

  • Post category:HTML
  • Post author:
  • Post last modified:June 14, 2021
  • Reading time:5 mins read
You are currently viewing Select Element In HTML Form

In HTML form select element are allow users to select an item from a drop-down list. In short words select elements are used to create a drop-down list. And the list each items are defined with the option element.

Select Element – Syntax

The select elements starts with the <select> tag and closed with the </select> tag

<form action="action_page">
<label for="gender"> Select your gender</label>
<select id="gender" name="gender">
<option value="male">Male</option>
<option value="female">Female</option>
<option value="other">Other</option>
</select>
</form>

Result

Select Element Attribute

  • id – the id attribute defines a unique name to the select element in the document, which will be used in form data access and styling purpose.
  • name – the name attribute defines a name to the select element
  • size – the size attribute species the number of visible values under the select element.
  • multiple – the multiple element allow users to select multiple items.

Select Element – id attribute

The id attribute defines a unique name to the element in the document.

<select id="gender">
<option value="male">Male</option>
<option value="female">Female</option>
<option value="other">Other</option>
</select>

Select Element – name Attribute

The name attribute defines a name to the select element.

<select name="gender">
<option value="male">Male</option>
<option value="female">Female</option>
<option value="other">Other</option>
</select>

Select Element – size Attribute

The size attribute defines the number of visible values under the select element.

<form action="action_page">
<label for="gender"> Select your gender</label>
<select id="gender" name="gender" size="2">
<option value="male">Male</option>
<option value="female">Female</option>
<option value="other">Other</option>
</select>
</form>

Result

Select element – multiple Attribute

The multiple attribute allow users to select multiple items from the list.( Press and hold the ctrl / command for select multiple items)

Example

<form action="action_page">
<label for="gender"> Select your gender</label>
<select id="gender" name="gender" size="2" multiple>
<option value="male">Male</option>
<option value="female">Female</option>
<option value="other">Other</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