- HTML Tutorial
- HTML - Home
- HTML - History and Evolution
- HTML - Overview
- HTML - Editors
- HTML - Basic Tags
- HTML - Elements
- HTML - Attributes
- HTML - Formatting
- HTML - Headings
- HTML - Paragraphs
- HTML - Quotations
- HTML - Comments
- HTML - Phrase Tags
- HTML - Meta Tags
- HTML - Style Sheet
- HTML - CSS Classes
- HTML - CSS IDs
- HTML - Images
- HTML - Image Map
- HTML Tables
- HTML - Tables
- HTML - Headers & Caption
- HTML - Table Styling
- HTML - Table Colgroup
- HTML - Nested Tables
- HTML Lists
- HTML - Lists
- HTML - Unordered Lists
- HTML - Ordered Lists
- HTML - Definition Lists
- HTML Links
- HTML - Text Links
- HTML - Image Links
- HTML - Email Links
- HTML - Iframes
- HTML - Blocks
- HTML Backgrounds
- HTML - Backgrounds
- HTML Colors
- HTML - Colors
- HTML - RGB
- HTML - HEX
- HTML - HSL
- HTML Forms
- HTML - Forms
- HTML - Form Attributes
- HTML - Form Control
- HTML - Input Attributes
- HTML Media
- HTML - Video Element
- HTML - Audio Element
- HTML - Embed Multimedia
- HTML Header
- HTML - Head Element
- HTML - Adding Favicon
- HTML - Javascript
- HTML Layouts
- HTML - Layouts
- HTML - Layout Elements
- HTML - Layout using CSS
- HTML - Responsiveness
- HTML - Symbols
- HTML - Emojis
- HTML - Style Guide
- HTML Graphics
- HTML - SVG
- HTML - Canvas
- HTML APIs
- HTML - Geolocation API
- HTML - Drag & Drop API
- HTML - Web Workers API
- HTML - WebSocket
- HTML - Web Storage
- HTML - Server Sent Events
- HTML Miscellaneous
- HTML - MathML
- HTML - Microdata
- HTML - IndexedDB
- HTML - Web Messaging
- HTML - Web CORS
- HTML - Web RTC
- HTML Demo
- HTML - Audio Player
- HTML - Video Player
- HTML - Web slide Desk
- HTML Tools
- HTML - Velocity Draw
- HTML - QR Code
- HTML - Modernizer
- HTML - Validation
- HTML - Color Code Builder
- HTML References
- HTML - Tags Reference
- HTML - Attributes Reference
- HTML - Events Reference
- HTML - Fonts Reference
- HTML - ASCII Codes
- ASCII Table Lookup
- HTML - Color Names
- HTML - Entities
- MIME Media Types
- HTML - URL Encoding
- Language ISO Codes
- HTML - Character Encodings
- HTML - Deprecated Tags
- HTML Resources
- HTML - Quick Guide
- HTML - Useful Resources
- HTML - Color Code Builder
- HTML - Online Editor
HTML - <select> Tag
The dropdown lists in online forms are made using the HTML <select> tag. Users are able to choose one or more selections from a list of choices. Within the <select> tag, it is made up of <option> tags. For identification and form submission, attributes like name and id are needed. JavaScript can improve functionality while CSS can apply styling. A consistent user experience is guaranteed via testing on different devices.
Syntax
Following is the syntax for HTML <select> tag −
<select>....</select>
Specific Attributes
The HTML <select > tag also supports the following additional attributes −
S.No. | Attribute & Description |
---|---|
1 | disabled Disables the input control. The button won't accept changes from the user. It also cannot receive focus and will be skipped when tabbing. |
2 | autofocus Specifies that on page load the drop-down list should automatically get focus. |
3 | form Specifies one or more forms. |
4 | multiple When set, it specifies that multiple items can be selected at a time |
5 | name Assigns a name to the input control. |
6 | required Before submitting the form the user is required to select a value, else it won't proceed ahead. |
7 | size Defines the number of visible items in the drop-down list |
Example
In the following program, we are using the HTML <select> tag to create a list of options(dropdown).
<!DOCTYPE html> <html lang="en"> <head> <title>Document</title> </head> <body> <!--create a select tag--> <p>Simple select element</p> <select> <option value="">--Chose your option--</option> <option value="">HTML</option> <option value="">CSS</option> <option value="">JavaScript</option> </select> <button>Submit</button> </body> </html>
When we run the above code, it will generate an output consisting of the dropdown menu on the webpage.
Example
Following is another example of the HTML <select> tag. Here, we are creating a "select" element using the <select> tag to define the list options within the "form" element.
<!DOCTYPE html> <html lang="en"> <head> <title>Document</title> </head> <body> <!--create a form--> <h3>HTML "select" element example</h3> <form> Name: <input type="text"> <br> Email: <input type="email"> <br> Mobile: <input type="number"> <br> Language: <select> <option value="">--Choose language--</option> <option value="">Hindi</option> <option value="">English</option> </select> <button>Submit</button> </form> </body> </html>
On running the above code, the output window will pop up displaying the dropdown menu within the form tag.
Example
In this program, we are using the HTML <select> tag to define the list of options. We are using the "disabled" attribute to disable the "select" element.
<!DOCTYPE html> <html lang="en"> <head> <title>Document</title> </head> <body> <!--create a select tag--> <p>HTML 'select' element with 'disabled' attribute</p> <label for="">Choose your country:-</label> <select disabled> <option value="">India</option> <option value="">United state</option> <option value="">Australia</option> <option value="">Germany</option> </select> </body> </html>
When we run the above code, it will generate an output consisting of the dropdown menu used with a disabled attribute displayed on the webpage.
Example
In this example, we are defining the list of options using the HTML <select> tag. We are using the CSS to style the created select element.
<!DOCTYPE html> <html lang="en"> <head> <title>Document</title> <style> select { width: 200px; height: 30px; border: 2px solid blue; border-radius: 10px; } select option { color: green; } </style> </head> <body> <!--create a select tag--> <p>HTML 'select' element with CSS</p> <label for="">Choose your favorite computer language:-</label> <select> <option value="">HTML</option> <option value="">JavaScript</option> <option value="">Java</option> <option value="">Python</option> <option value="">C++</option> </select> </body> </html>
On running the above code, the output window will pop up displaying the dropdown menu applied with a CSS applied to it on the webpage.