How to Implement Select and Option Tag in HTML

Last updated on Feb 22,2023 4.3K Views

How to Implement Select and Option Tag in HTML

edureka.co

Select and Action are one of the most important tags in HTML and one cannot create a DropDown Menu and not use it. Let’s start our journey of select and option tag in HTML in the following manner:

What is Select and Option Tag in HTML?

The <select> tag is used within a form for defining a select list in HTML. Which appears when clicking on the form element and it proceeds the user to select one of the options. 

The <option> tag within the select element is defining the available option in the list. <option>tag is used to define all possible options to select from.

 

Example of Select Tag in HTML


<!DOCTYPE html>
<html>
<head>
<title>HTML select tag </title>
</head>
<body>
<form action="/cgi-bin/dropdown.cgi" method="post">
<select name="dropdown">
<option value="html" selected>html</option>
<option value="css" selected>css</option>
<option value="php" selected>php</option>
</select>
<input type="submit" value="submit" />
</form>
</body>
</html>

Output:

 

<option value="css" selected>css</option>

This option tag is tag can be used to give any number drop down options. The subject in this field can be altered according to the requirement.

 

List of Attributes of Select Tag

AttributeDescription
NameIt is used to give a name to the control that is sent to the server to be recognized and get the value.
SizeIt is used to present a scrolling list box.
MultipleIf it is set to “multiple” then allows the user to select the multiple items from the menu.

 

Example of Option Tag in HTML


<!DOCTYPE html>
<html>
<head>
<title>HTML option tag </title>
</head>
<body>
<form action="/cgi-bin/dropdown.cgi" method="post">
<select name="dropdown">
<option value="physicsl" selected>physicsl</option>
<option value=”chemistry”selected>chemistry</option>
<option value="maths" selected>maths</option>
</select>
<input type="submit" value="submit" />
</form>
</body>
</html>

 

List of Attributes of Option Tag

AttributeDescription
ValueThis value will be used if an option in the select box is selected.
SelectedSpecifies this option should be firstly selected value when the page loads.
LableIt is an alternative way of labeling options.

With this, we come to an end of this Select and Option Tag in HTML article. I hope you understood the importance of Select and Option tag in HTML.

Check out our Full Stack Web Developer Masters Program which comes with instructor-led live training and real-life project experience. This training makes you proficient in skills to work with back-end and front-end web technologies. It includes training on Web Development, jQuery, Angular, NodeJS, ExpressJS, and MongoDB. Learn how to create mobile apps that users love using Flutter by joining a Flutter Course.

Got a question for us? Please mention it in the comments section of “Select & Option Tag in HTML” blog and we will get back to you.

 

Upcoming Batches For Full Stack Developer Course
Course NameDateDetails
Full Stack Developer Course

Class Starts on 4th May,2024

4th May

SAT&SUN (Weekend Batch)
View Details
BROWSE COURSES
REGISTER FOR FREE WEBINAR UiPath Selectors Tutorial