Full Stack Developer Masters Program (28 Blogs) Become a Certified Professional

How to Implement Select and Option Tag in HTML

Last updated on Sep 13,2019 15 Views

MI-new-launch

myMock Interview Service for Real Tech Jobs

myMock-mobile-banner-bg

myMock Interview Service for Real Tech Jobs

  • Mock interview in latest tech domains i.e JAVA, AI, DEVOPS,etc
  • Get interviewed by leading tech experts
  • Real time assessment report and video recording

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:

Select and Option Tag in HTML

 

<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>

Option tag in 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.

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.

 

Comments
0 Comments

Browse Categories

Subscribe to our Newsletter, and get personalized recommendations.