Full Stack Developer Masters Program (57 Blogs) Become a Certified Professional
AWS Global Infrastructure

Programming & Frameworks

Topics Covered
  • C Programming and Data Structures (16 Blogs)
  • Comprehensive Java Course (4 Blogs)
  • Java/J2EE and SOA (345 Blogs)
  • Spring Framework (8 Blogs)
SEE MORE

How to Implement Select and Option Tag in HTML

Last updated on Feb 22,2023 4.3K Views


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. 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 20th April,2024

20th April

SAT&SUN (Weekend Batch)
View Details
Comments
0 Comments

Join the discussion

Browse Categories

webinar REGISTER FOR FREE WEBINAR
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP

Subscribe to our Newsletter, and get personalized recommendations.

image not found!
image not found!

How to Implement Select and Option Tag in HTML

edureka.co