HTML is a cakewalk if you’re a web development enthusiast. HTML stands for HyperText Markup Language, and it is the most widely used language for developing web applications. There are several tags provided by HTML for almost all use cases for a web application. One such tag is the <select> tag that we use to define dropdowns on a web page or application.

This article aims to focus on HTML dropdown and its implementation. The dropdown lists are mainly used in forms, to take user input and make inputting the information more interactive.

HTML is critical for web development, and if you’ve ever thought about choosing that career path, you’d unquestionably have come across this language. And that’s probably why you are here in the first place.

What Is an HTML Dropdown?

HTML Dropdown is a commonly used feature in web applications and websites of all kinds. We can add dropdowns in a web application using the HTML <select> tag.

html dropdown

Fig: HTML Dropdown

Syntax:

    <select name="dropdown" id="dropdown">

        <option value="value1">value1</option>

    </select>

  • The <select> element is used to create a dropdown list of other HTML elements.
  • Dropdown lists are commonly used in forms to collect information.
  • Several attributes associate with the <select> element; we will discuss those attributes in the later sections.

Implementation of Dropdowns in Web Applications

By now, you must have a much better understanding of what the <select> tag is used for. So, let’s dive into the practical aspect of this HTML <select> tag and code a simple web page that gives the user some choices in the form of a dropdown list to choose an option from.

<html>

  <head>

    <title>HTML Dropdowns</title>

    <style>

      .container {

        padding: 25px;

        border: grey solid 0px;

        box-shadow: 10px 20px 20px grey;

        width: 300px;

        height: 150px;

        border-radius: 15px;

        background-color: skyblue;

      }

      .center {

        margin: auto;

        width: 50%;

        padding: 50px;

      }

    </style>

  </head>

  <body class="center">

    <h1>HTML Dropdowns</h1>

    <div class="container">

      <label for="chocolates">Choose a chocolate:</label>

      <br /><br /><br />

      <select name="chocolates" id="chocolates">

        <option value="choose one">Choose One</option>

        <option value="maltesers">Maltesers</option>

        <option value="mars">Mars</option>

        <option value="bounty">Bounty</option>

        <option value="kitkat">Kitkat</option> </select

      >&nbsp;&nbsp;&nbsp;&nbsp;

      <input type="submit" value="submit" />

    </div>

  </body>

</html>

Let’s have a look at every HTML tag that we have used in creating this web page:

<html>

This tag is kind of a wrapper for the whole web application, everything goes within this tag and finishes before this tag closes.

<head>

This tag is used to hold metadata about a web application. Things including the title of a web application, or importing javascript or CSS into a web application, are done within this tag.

<title>

This tag is used for defining the title of a web application or website.

<style>

This tag is used to add CSS styling to HTML elements to make websites look and feel good.

<body>

This tag is used to display the contents on the screen when rendered by a web browser. Therefore, anything that has to be shown to the user on-screen goes within this tag.

<h1>, <h2>

There are several tags provided by HTML for text formatting. <h1> and <h2> are the two of those tags. These tags mean “heading 1” and “heading 2” respectively. There are several other tags like “heading 3” and “paragraph” that are abbreviated as <h3> and <p> respectively.

<br>

This tag is used for giving a line break between HTML elements.

<div>

This tag is used as a container for other HTML elements. It is very useful for adding custom styles like margin and padding to a region of a web application.

<select>

This HTML tag is the main focus of this article since we use this particular tag to implement dropdowns in web applications.

  • The name attribute is needed to submit data from the dropdown list when the form is submitted.
  • The id attribute is needed to associate the dropdown list with a label.

<option>

This tag is used inside the <select> element; it defines the available options in the dropdown list.

<input>

This tag is used for taking the user input. In this case, it is used as a submit button to submit data that was chosen from the dropdown list.

Output

This is how the web page should look when you code it exactly as above. So congratulations, you just coded your first web application, having an embedded document in it.

html-dropdown2

Fig: HTML Dropdown Output

You can further style your web applications using CSS stylesheet and add interactivity using JavaScript.

We hope this article helped you get familiar with implementing dropdowns in web applications. We encourage you to go through further tutorials and learn CSS and JavaScript to become a full-fledged web developer.

Get skilled in HTML5 and CSS3 with the Full Stack Java Developer Master's Program. Click to check out the program details!

Get Ahead of the Curve and Master HTML Today

You may be wondering how you can obtain the skills necessary to take advantage of HTML’s immense popularity, now that you are familiar with one more HTML tag, that is, <select> tag. 

You can enroll in a comprehensive Java Full Stack Developer Masters’ Program, which will help you become career-ready upon completion. To learn more, check out our Youtube video that provides a quick introduction to HTML and explains how to write a simple ‘Hello World’ program in HTML. 

If you’re an aspiring web and mobile developer, HTML training will broaden your skills and career horizons. Do you have any questions for us regarding HTML Dropdowns? Please mention it in the comments section, and we'll have our experts answer it for you at the earliest.

Our Software Development Courses Duration And Fees

Software Development Course typically range from a few weeks to several months, with fees varying based on program and institution.

Program NameDurationFees
Caltech Coding Bootcamp

Cohort Starts: 16 Dec, 2024

6 Months$ 8,000
Automation Test Engineer Masters Program

Cohort Starts: 27 Nov, 2024

8 months$ 1,499
Full Stack Java Developer Masters Program

Cohort Starts: 18 Dec, 2024

7 months$ 1,449
Full Stack (MERN Stack) Developer Masters Program

Cohort Starts: 8 Jan, 2025

6 Months$ 1,449

Recommended Reads