Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to include an option in a drop-down list in HTML?
For creating a drop-down list in HTML, we use <select> command, it is generally used in form for collecting user input. To refer the form data after submitting, we use name attribute. If there is no name attribute, then there will be no data from drop-down list.
For associating the drop-down list with label; id attribute is needed. For defining options in drop-down list, we have to use <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 won't accept changes from the user. It also cannot receive focus and will be skipped when tabbing. |
Label |
text |
Label text Defines a label to use when using |
Selected |
selected |
Defines the default option to be selected when page loads. |
Value |
text |
Specifies the value of the option to be sent to the server |
Multiple |
multiple |
By using multiple attribute options can be selected at once. |
Name |
name |
It is used to define names in drop-down list |
Required |
required |
By using this attribute , user select a value before submitting the form. |
Size |
number |
This attribute is used to define , number of visible options in drop-down list |
Value |
text |
Specifies the value of the option to be sent to the server |
Autofocus |
Autofocus |
It is used to get focus of drop-down list automatically when page loads |
Example
Following example adds an option in a drop-down list in HTML −
<!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
Following is another example which demonstrates use of different attributes of the <option> tag.
<!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
In the following example we are trying to add options in a list using the <select> tag along with the <optgroup> tag -
<!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="/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>
1K+ Views
