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
Create a Selectable List in HTML
The <select> tag is used to create a drop-down list in HTML document. We just need to add the "multiple" attribute to the <select> element. Now, in order to select multiple options, we use following syntax −
<select name=" "> <option value=" " > text </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 |
Defines a label to use when using <optgroup>. |
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 |
Autofocus |
Autofocus |
It is used to get focus of drop-down list automatically when page loads. |
Example
Following is a sample example of using <select> tag in HTML -
<!DOCTYPE html>
<html>
<head>
<title>HTML select Tag</title>
</head>
<body>
<h1>TutorialsPoint</h1>
<h2>selectable list in HTML</h2>
<form action="/https/www.tutorialspoint.com/cgi-bin/dropdown.cgi" method="post">
<select name="dropdown">
<option value="Data Structures" selected>Data Structures</option>
<option value="Data Mining">Data Mining</option>
</select>
<br>
<br>
<input type="submit" value="Submit" />
</form>
</body>
</html>
Example
In the following example we are trying to create a selectable list in HTML using 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="/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>
Example
Consider another example −
<!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>
3K+ Views
