html
/

HTML Select: Dropdown Lists in Forms

Last Sync: Today

On this page

11
0%
5 min read
Remaining
5 minleft

Click any section to jump — progress syncs automatically

html

HTML Select: Dropdown Lists in Forms

What is HTML Select?

The <select> element is used to create dropdown lists in forms. It allows users to choose one or multiple options from a list.

Basic Syntax

HTMLRead-only
1
<select name="country">
  <option value="india">India</option>
  <option value="usa">USA</option>
  <option value="uk">UK</option>
</select>

Select Attributes

AttributeDescription
nameName of the field
requiredMakes selection mandatory
multipleAllows multiple selections
sizeNumber of visible options

Option Attributes

AttributeDescription
valueSubmitted value
selectedDefault selected option
disabledDisables option

Default Selected Option

HTMLRead-only
1
<select>
  <option>Choose</option>
  <option selected>India</option>
  <option>USA</option>
</select>

Multiple Selection

HTMLRead-only
1
<select multiple>
  <option>HTML</option>
  <option>CSS</option>
  <option>JavaScript</option>
</select>

Grouped Options (optgroup)

HTMLRead-only
1
<select>
  <optgroup label="Frontend">
    <option>HTML</option>
    <option>CSS</option>
  </optgroup>
  <optgroup label="Backend">
    <option>Node.js</option>
    <option>Python</option>
  </optgroup>
</select>

Complete Example

HTMLRead-only
1
<form>
  <label>Select Country:</label>
  <select required>
    <option value="">Choose Country</option>
    <option value="india">India</option>
    <option value="usa">USA</option>
  </select>
  <button type="submit">Submit</button>
</form>

Best Practices

  • Provide a default placeholder option
  • Use labels for accessibility
  • Avoid too many options (use search if needed)
  • Group related options using optgroup
  • Use meaningful values for options

Common Mistakes

  • Not setting value attribute
  • Missing label for dropdown
  • Too many options without grouping
  • Using dropdown when radio buttons are better

Conclusion

HTML select elements are essential for user input in forms. Proper usage ensures better usability and structured data collection.

Try it yourself

<select>
  <option>India</option>
  <option>USA</option>
  <option>UK</option>
</select>

Test Your Knowledge

Q1
of 3

Which tag is used for dropdown?

A
<dropdown>
B
<select>
C
<option>
D
<input>
Q2
of 3

Which attribute allows multiple selection?

A
multi
B
multiple
C
many
D
select
Q3
of 3

Which tag defines options?

A
<item>
B
<option>
C
<list>
D
<select>

Frequently Asked Questions

What is the select tag?

It is used to create dropdown lists in forms.

Can I select multiple options?

Yes, by using the multiple attribute.

What is optgroup?

It groups related options inside a dropdown.

Previous

html form validation

Next

html textarea

Related Content

Need help?

Explore our comprehensive docs or start a chat with our tech experts.