Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Include Option in Drop-Down List in HTML
Creating a Dropdown List
To create a drop-down list in HTML, we use the <select> tag, which is generally used in forms to collect user input. To refer to the form data after submission, we use the name attribute. Without the name attribute, no data will be collected from the drop-down list.
To associate the drop-down list with a label; the id attribute is needed. To define options in the drop-down list, use the <option> tag inside the <select> element.
Syntax
Following is the usage of <select> tag in HTML -
<select name=" " id=""> <option value=" "> </option> </select>
The HTML <option> tag also supports the following additional attributes ?
|
Attribute |
Value & Description |
|---|---|
|
Disabled |
disabled Disables the input control. The button will not accept changes from the user, cannot receive focus, and will be skipped when tabbing. |
|
Label |
text Label text defines a label to use with the <optgroup> tag. |
|
Selected |
selected Defines the default option to be selected when the page loads. |
|
Value |
text Specifies the value of the option to be sent to the server |
|
Multiple |
multiple By using the multiple attributes, multiple options can be selected at once. |
|
Name |
name It is used to define names in the drop-down list. |
|
Required |
required Using this attribute, the user selects a value before submitting the form. |
|
Size |
number This attribute is used to define, the number of visible options in the drop-down list |
|
Value |
text Specifies the value of the option to be sent to the server |
|
Autofocus |
Autofocus It is used to automatically focus on the drop-down list when the page loads. |
Example: Selection Dropdown
The following example adds an option to a drop-down list in HTML. This code creates a drop-down list for selecting a city. When the "Choose city" button is clicked, the form submits the selected city value.
<!DOCTYPE html>
<html>
<body>
<h1>Drop-Down List using Select Command</h1>
<p>The select element is used to create a drop-down list.</p>
<form method="get" action="#">
<label for="cities"> Choose City:</label>
<select name="cities" id="cities">
<option value="hyd">Hyderabad</option>
<option value="Chennai">Chennai</option>
<option value="bang">Banglore</option>
<option value="Mumbai">Mumbai</option>
</select>
<br>
<br>
<input type="submit" value="Choose city">
</form>
</body>
</html>
Example: Option Tag Attributes
Following example demonstrates the use of different attributes of the <option> tag. This HTML code creates a form with a drop-down list for selecting a validation option. Based on the selection, it displays input fields for password, pin, or mobile number validation.
<!DOCTYPE html>
<html>
<head>
<title>Form Validation</title>
</head>
<body>
<h1> Form Validation </h1>
<form>
<label>Choose validation option:</label>
<select name="credentials" id="credentials" onchange="displayField()">
<option value="select">Select</option>
<option value="pwd">Password Validation</option>
<option value="pin">Pin Validation</option>
<option value="mob">Mobile Validation</option>
</select>
<br />
<br />
<div id="1" hidden>
<label>Enter your password: </label>
<input type="text" id="pwd" />
</div>
<div id="2" hidden>
<label>Enter your pin: </label>
<input type="number" id="pin" />
</div>
<div id="3" hidden>
<label>Enter your mobile number: </label>
<input type="number" id="mob" />
</div>
<button onclick="validate()" />OK</button>
</form>
</body>
</html>
Example: Grouped Dropdown Options
This examples adds options to a list using the <select> tag along with the <optgroup>. This HTML code creates a drop-down list with grouped options for selecting a grade and section. When the "Submit" button is clicked, the form submits the selected grade and section.
<!DOCTYPE html>
<html>
<body>
<h1>Inserting optgroup in select element</h1>
<p>It is used to group related options in a drop-down list:</p>
<form action="/https/www.tutorialspoint.com/action_page.php">
<label for="class">Choose Grade:</label>
<select name="class" id="class">
<optgroup label="Grade 1">
<option value="A">A Section</option>
<option value="B">B Section</option>
<option value="C">C Section</option>
</optgroup>
<optgroup label="Grade 2">
<option value="A">A Section</option>
<option value="B">B Section</option>
<option value="C">C Section</option>
</optgroup>
</select>
<br>
<br>
<input type="submit" value="Submit">
</form>
</body>
</html>
2K+ Views
