Home 〉 HTML Tutorials 〉 HTML select and option tag - Complete Guide with Syntax, Attributes, and Examples
HTML select and option tag - Complete Guide with Syntax, Attributes, and Examples !
HTML select and option tag - Complete Guide with Syntax, Attributes, and Examples !
Want to create dropdowns in HTML forms?
The '<select>' and '<option>' tags allow you to display a list of options from which users can choose. You've learned the syntax, attributes like 'multiple', 'required', 'selected', and how to style these elements using inline CSS. Dropdowns are commonly used for form controls like gender, country, and category. The complete blog post on HTML select and option tag is as follows.
Introduction
The '<select>' and '<option>' tags are essential when you want to create dropdown lists in HTML forms. These tags allow users to select a value from a list of predefined options, which is extremely useful for form submissions such as choosing a country, selecting a category, or picking a date.
In this blog post, you will learn the purpose, syntax, usage, attributes, and examples of both the '<select>' and '<option>' tags. This guide is beginner-friendly and helps you implement clean and accessible dropdown menus.
Syntax and Explanation
Basic Syntax:
Syntax ✍
<select name="dropdown">
<option value="value1">Option 1</option>
<option value="value2">Option 2</option>
</select>
- '<select>': This tag defines a dropdown list.
- 'name': Specifies the name of the select element (used for form data submission).
- '<option>': Represents each item in the dropdown.
- 'value': The data value submitted with the form when this option is selected.
- The text between the '<option>' tag is visible to the user.
Block, Inline, or Empty Element?
- '<select>': Block-level element.
- '<option>': Inline-level element (inside '<select>').
- Neither are empty elements because both contain content or children.
Attributes and Examples
'<select>' Tag Attributes:
The following are the attributes of HTML select tag :
- ' name': Specifies the name of the dropdown
- ' id': Assigns an ID for styling or JavaScript usage
- ' multiple': Allows selecting more than one option
- ' required': Makes selection mandatory
- ' disabled': Disables the entire dropdown
- ' size': Shows number of visible options (scrollable)
Example:
Code : 1 📝 
<!DOCTYPE html>
<html>
<body>
<select name="fruit" id="fruitSelect" required style="width:200px; font-size:14px; padding:5px; border-radius:4px;">
<option value="apple">Apple</option>
<option value="banana">Banana</option>
</select>
</body>
</html>
output 📌
You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.
- 'required': User must select an option before submitting.
- Inline CSS used for basic styling with 'width', 'font-size', 'padding', and 'border-radius'.
'<option>' Tag Attributes:
The following are the attributes of HTML option tag :
- 'value': The value sent to the server when selected
- 'selected': Preselects the option by default
- 'disabled': Disables the option
- 'label': Defines a label different from display text
Example:
Code : 2 📝
<!DOCTYPE html>
<html>
<body>
<select style="width:250px; font-size:16px; padding:10px; border:1px solid #ccc; border-radius:5px; background-color:#f9f9f9;">
<option value="banana">Banana</option>
<option value="mango" selected>Mango</option>
<option value="bpple">Apple</option>
</select>
</body>
</html>
output 📌
You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.
'selected': Sets "Mango" as the default selected option when the page loads.
CSS Inline Styling Example
Code : 3 📝
<!DOCTYPE html>
<html>
<body>
<option value="mango" selected>Mango</option>
<select style="width:250px; font-size:16px; padding:10px; border:1px solid #ccc; border-radius:5px; background-color:#f9f9f9;">
<option value="html">HTML</option>
<option value="css">CSS</option>
<option value="js">JavaScript</option>
</select>
</body>
</html>
output 📌
You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.
Purpose: Adds width, font-size, padding, border, and background-color for clean design.
Conclusion
The HTML '<select>' and '<option>' tags are powerful tools for creating dropdown menus in forms. By understanding their syntax, attributes, and styling, you can create user-friendly and functional form controls. These elements are widely used and essential in modern web development.
Suggested Topics:
- Complete Guide to HTML Attributes with Examples and Syntax
- CSS Border Property Explained with Easy Examples for Beginners
- CSS Border-Radius Property Explained with Examples for Beginners
- CSS Font Properties Tutorial with Examples | font-family, font-size, font-style
- CSS Padding Explained with Examples | CSS Box Model Guide
- CSS background-color Tutorial with Examples - Learn Easily
- CSS Width and Height Property Tutorial with Examples for Beginners
- HTML Block, Inline, and Empty Elements Explained with Examples
Related Topics:
- HTML '<form>' Tag - Learn Syntax, Attributes & Examples for Forms
- HTML input Tag - Types, Attributes, Syntax, and Examples
- CSS Table Properties: border-collapse, table-layout, and More with Examples
Frequently Asked Questions (FAQs)
What is the use of the '<select>' tag in HTML?
It is used to create a dropdown list in a form.
How do I make an option selected by default?
Add the 'selected' attribute to the desired '<option>' tag.
Can I allow multiple selections?
Yes, use the 'multiple' attribute in the '<select>' tag.
How do I disable an option in a dropdown?
Use the 'disabled' attribute inside the '<option>' tag.