What is HTML <select> tag?

EnglishCreated with Sketch.
EnglishFrench
  • Join  Lenovo Pro Business Store

    Log In / Sign Up

    Learn More

  • Accessibility
  • Sales:

    Home:

    1-855-253-6686 Option #2

    Business:

    1-866-426-0911

    Chat Now >

    Visit Sales Support Page >


    Order Support:

    Order Lookup >

    Visit Order Support Page >

    Technical Support >

Lenovo
All
  • All
  • Laptops
  • Desktops
  • Workstations
  • Monitors
  • PC Accessories & Electronics
  • Tablets
  • Servers & Storage
  • Servers Accessories
  • Sign In / Create Account
    My Lenovo Account
    Keep track of your wishlist, orders, and rewards all in one place
    Sign In / Create Account
    Welcome Back!
    Access your order, subscriptions, saved carts, rewards balance, and profile
    View My Account
    Orders
    View & track your orders
    Rewards
    Earn & redeem Rewards
    Profile
    Edit name, password, and account settings
    Wishlist
    Manage a wishlist of your favorite products
    Products
    Manage your devices, accessories
    Product Registration
    Register your product and/or update your warranty dates
    Lenovo Family Hub
    Manage your family's orders all in one place
    Sign Out
  • My Lenovo Rewards
  • Cart
  • Products
  • Solutions
  • Services
  • Support
  • About Lenovo
  • Deals
  • Business
  • Student
  • Gaming
  • Laptops

  • Desktops

  • Workstations

  • Accessories
  • Software
  • Monitors
  • Tablets

  • Servers & Storage
  • AI
  • Deals
TEMPORARILY UNAVAILABLE
DISCONTINUED
Temporary Unavailable
Cooming Soon!
. Additional units will be charged at the non-eCoupon price. Purchase additional now
We're sorry, the maximum quantity you are able to buy at this amazing eCoupon price is
Sign in or Create an Account to Save Your Cart!
Sign in or Create an Account to Join Rewards
View Cart
Remove
Your cart is empty! Don’t miss out on the latest products and savings — find your next favorite laptop, PC, or accessory today.
item(s) in cart
Some items in your cart are no longer available. Please visit cart for more details.
has been deleted
Please review your cart as items have changed.
of
Contains Add-ons
Subtotal
Proceed to Checkout
Yes
No
Popular Searches
What are you looking for today ?
Trending
Recent Searches
Items
All
Cancel
Top Suggestions
View All >
Starting at
  • Back to School! Gear up for the year ahead with these limited-time doorbusters. Shop Now >

  • My Lenovo Rewards! Enter for a chance to win a Legion 5 Gen 10, mouse, backpack & earbuds! One winner. Ends 8/24. Join for Free >

  • Business Financing Available. Split payments from 4 to 52 weeks, options as low as 0% interest. See Details >

  • Shopping for a business? New Lenovo Pro members get $100 off first order of $1,000+, exclusive savings & 1:1 tech support. Learn More >

Home > Glossary >What is HTML<select>tag?
Glossary Hero    
Learn More    
StarStar

Annual Sale

Lenovo Laptop SaleLenovo Laptop Sale

Laptop Deals

Desktop DealsDesktop Deals

Desktop Deals

Workstation DealsWorkstation Deals

Workstation Deals

ControllerController

Gaming PC & Accessory Deals

MouseMouse

PC Accessories & Electronics Deals

MonitorMonitor

Monitor Deals

Tablet and phoneTablet and phone

Tablets Deals

ServerServer

Server & Storage Deals

Discount tagDiscount tag

Clearance Sale


What is HTML <select> tag?

The hypertext markup language (HTML) <select> tag is used to create a dropdown list in a web form. It allows users to choose from a list of options by clicking or tapping on the dropdown arrow and selecting the desired option. This tag is commonly used in forms where users need to select one or more options from a list.

How do I create a <select> element in HTML?

To create a <select> element in HTML, you use the <select> tag. Within the opening and closing <select> tags, you include one or more <option> tags. Each <option> tag represents an option in the dropdown list. You can also include attributes such as "name" and "id" to identify and manipulate the <select> element using JavaScript or cascading style sheets (CSS).

Can I include default selected options in a <select> dropdown?

Yes, you can include a default selected option in a <select> dropdown by using the "selected" attribute within the <option> tag. For example, if you want the first option to be selected by default, you can add the "selected" attribute to the first <option> tag like this: <option selected>Option 1</option>.

What does the "name" attribute do in the <select> tag?

The "name" attribute in the <select> tag assigns a name to the dropdown list. When the form containing the <select> element is submitted, the selected value(s) are sent to the server with the corresponding name as part of the form data. This allows you to identify the selected option(s) on the server-side.

How can I allow users to select multiple options in a <select> dropdown?

To allow users to select multiple options in a <select> dropdown, you can include the "multiple" attributes in the <select> tag. This attribute enables users to select more than one option by holding down the Ctrl (Windows/Linux).

Can I group options together in a <select> dropdown?

Yes, you can group options together in a <select> dropdown using the <optgroup> tag. The <optgroup> tag allows you to create a group of related options within the dropdown list. Users can then select options from different groups. This is useful for organizing and presenting many options in a more structured manner.

Does the order of <option> tags matter within the <select> element?

Yes, the order of <option> tags within the <select> element determines the order in which the options appear in the dropdown list. The first <option> tag appears at the top of the list, and subsequent options appear below it in the order they are specified in the HTML code. You can rearrange the <option> tags to change the order of options in the dropdown.

How can I specify the value associated with each option in a <select> dropdown?

You can specify the value associated with each option in a <select> dropdown using the "value" attribute within the <option> tag. The value attribute allows you to assign a unique value to each option, which is sent to the server when the form is submitted. This value is separate from the visible text displayed to the user in the dropdown list.

What does the "disabled" attribute do in the <option> tag?

The "disabled" attribute in the <option> tag disables an option in the dropdown list, making it unselectable. This is useful when you want to provide users with options that are temporarily unavailable or irrelevant based on certain conditions. Disabled options are usually displayed differently (e.g., grayed out) to indicate that they cannot be selected.

Can I add custom styling to a <select> dropdown?

Yes, you can add custom styling to a <select> dropdown using cascading style sheets (CSS). You can target the <select> element and its options using CSS selectors and apply styles such as color, font size, padding, border, and background color to customize the appearance of the dropdown list. However, keep in mind that styling dropdowns can be limited due to browser restrictions.

How can I handle the selected option(s) in JavaScript?

In JavaScript, you can access and manipulate the selected option(s) in a <select> dropdown using the "selectedIndex" property of the <select> element. This property returns the index of the selected option in the options collection. You can also use the "value" property to get the value of the selected option or loop through the options to check which ones are selected.

Can I dynamically update the options in a <select> dropdown using JavaScript?

Yes, you can dynamically update the options in a <select> dropdown using JavaScript. You can add new options, remove existing options, or modify the attributes of options based on user interactions or other events. This allows you to create interactive dropdowns that adapt to changes in the application state or user input dynamically.

What is the purpose of the "size" attribute in the <select> tag?

The "size" attribute in the <select> tag specifies the number of visible options in a dropdown list when the list is expanded. Unlike the default behavior where only one option is visible at a time, setting the "size" attribute to a value greater than one allows you to display multiple options simultaneously without scrolling.

Can I create a searchable dropdown list using hypertext markup language (HTML) and cascading style sheets (CSS)?

HTML and CSS alone do not provide native support for creating searchable dropdown lists. However, you can simulate a searchable dropdown using JavaScript libraries or frameworks like Select2 or Chosen. These libraries enhance the <select> element by adding search functionality, filtering options, and customizable styling, providing users with a more convenient way to select options from a large list.

What is the difference between <select> and <datalist> elements in hypertext markup language (HTML)?

The <select> element is used to create a dropdown list where users can select one or more options from a predefined list. On the other hand, the <datalist> element is used to provide a list of predefined options for an input field, but it does not create a dropdown list. Instead, it provides suggestions as the user types in the associated input field.

How can I make a <select> dropdown required in a form?

To make a <select> dropdown required in a form, you can use the "required" attribute in the <select> tag. Adding the "required" attribute ensures that the user must select an option from the dropdown before the form can be submitted. If a required <select> element is left empty, the browser will prevent form submission and prompt the user to select.

How can I create a nested dropdown menu using <select> elements?

To create a nested dropdown menu using <select> elements, you can use multiple <select> tags within each other. Each nested <select> represents a level of hierarchy in the menu structure. By using the "optgroup" tag within the <select> tags, you can group related options together and create a hierarchical structure of dropdown menus with submenus.

Can I style individual options differently within a <select> dropdown?

No, you cannot style individual options differently within a <select> dropdown using standard hypertext markup language (HTML) and cascading style sheets (CSS). Dropdown options are rendered by the browser's native user interface (UI) components, which typically do not allow for granular styling of individual options. However, you can use JavaScript libraries or custom dropdown solutions to achieve more advanced styling and customization, including styling individual options differently.

How can I align the text in a <select> dropdown to the right?

Unfortunately, you cannot directly align the text in a <select> dropdown to the right using standard hypertext markup language (HTML) and cascading style sheets (CSS). Dropdown menus are rendered by the browser's native user interface (UI) components, which have limited support for text alignment customization.

Looking for a Great Deal?
Shop Lenovo.com for great deals on A+ Education PCs, Accessories, Bundles and more.
Shop Deals Now

  • ThinkPad X9 15 Aura Edition (15ʺ Intel) Laptop
    Starting at
    $1,859.44
    Learn More
  • Yoga Book 9i (13” Intel)
    Starting at
    $2,769.99
    Learn More
  • Yoga 9i 2-in-1 Aura Edition (14″ Intel) Laptop
    Starting at
    $1,736.99
    Learn More
  • IdeaPad Pro 5 (16” AMD) Laptop
    Starting at
    $1,099.99
    Learn More
  • ThinkPad P1 Gen 7 (16″ Intel) Mobile Workstation
    Starting at
    $3,459.00
    Learn More
  • Shop
    • Student Deals
    • K-12 Student Laptops
    • Student Accessories
    • Laptops by Major
    Education resource
    Explore
    • What is STEM?
    • Best Laptops for College
    • Student & Teacher Discounts
    • Lenovo Sustainability Programs
    Education carry case

    Stem Articles
    See All STEM Articles
    • Online STEM Education

    • STEM Career Tips & Resources

    • Women in STEM

    • STEM Educator Training

    • STEM Grants & Funding

    • STEM Education: Coding for Kids

    • STEM Education: Robotics

    • STEM Education: Biotechnology

    • STEM Education: Sustainability

    • STEM Education: AI & ML

    While every effort has been made to ensure accuracy, this glossary is provided for reference purposes only and may contain errors or inaccuracies. It serves as a general resource for understanding commonly used terms and concepts. For precise information or assistance regarding our products, we recommend visiting our dedicated support site, where our team is readily available to address any questions or concerns you may have.

    Why Lenovo?

    Go Greener with Leno...

    Lenovo is committed to Smarter Climate Action with lower energy laptops, use of sustainable materials and packaging, and available CO2 Offset Services.
    Learn More
    pastel background

    Get It Now, Pay For ...

    Lenovo has multiple financing option: the Lenovo Credit Card, installment plans, and lease-to-own financing op...
    Learn More
    pastel background

    Productivity & Peace of Mind

    Stay productive with Premium Care Plus - 24/7 priority support and coverage against accidental damage. Power through your day with our Smart Performance and extended battery solutions.
    Learn More
    pastel background

    My Lenovo Rewards

    Get up to 9% back in Rewards credit on all purchases! Join or Sign In to start earning today.
    Learn More
    pastel background

    Assistance and Suppo...

    Chat with a trained professional who can help you find the right products, place or check on an order, or setup your Education laptop.
    Contact Us
    pastel background
    Enter email to receive Lenovo marketing and promotional emails. Review our Privacy Statement for more details.
    Please enter the correct email address!
    Email address is required
    • Facebook
    • Twitter
    • Youtube
    • Pinterest
    • TikTok
    • instagram
    Select Country / Region:
    Country
    AndroidIOS

    About Lenovo

    • Our Company
    • News
    • Investors Relations
    • Compliance
    • ESG
    • Product Recycling
    • Product Security
    • Product Recalls
    • Executive Briefing Center
    • Lenovo Cares
    • Careers
    • Formula 1 Partnership

    Products & Services

    • Laptops & Ultrabooks
    • Smarter AI for You
    • Desktop Computers
    • Workstations
    • Gaming
    • Tablets & Smart Devices
    • Servers, Storage, & Networking
    • Accessories & Software
    • Services & Warranty
    • Product FAQs
    • Deals
    • Lenovo Coupons
    • Preconfigured Products

    Shop By Industry

    • Small Business Solutions
    • Large Enterprise Solutions
    • Healthcare Solutions
    • Higher Education Solutions
    • Education Discounts
    • Discount Programs

    Resources

    • Lenovo Pro for Business
    • My Lenovo Rewards
    • Lenovo Financing
    • Customer Discounts
    • Affiliate Program
    • Affinity Program
    • Employee Purchase Program
    • Lenovo Partner Hub
    • Laptop Buying Guide
    • Where to Buy
    • Glossary

    Customer Support

    • Contact Us
    • Shopping Help
    • Return Policy
    • Shipping Information
    • Track my Order
    • Register a Product
    • Replacement Parts
    • Technical Support
    • Forums
    • Provide Feedback
    © 2025 Lenovo. All rights reserved.
    PrivacySite MapTerms of UseExternal Submission PolicySales terms and conditionsAnti-Slavery and Human Trafficking Statement
    Compare  ()
    x
    Call

    Need Help? Call: 

    1-855-253-6686 Option #2
    Select Your Store
    Add items to your cart?
    No Yes. Add in Lenovo Pro