Using Drop down menu with Js/Html/Css

3 min readMar 3, 2021

Limiting the user’s input can sometimes be an advantage. The user’s experience can be made smoother, and sorting through the data can be made easier. Not to mention the typos and many other things a program would have to account for in case of human error. Forms can be repetative and annoying to fill out. The best way to solve this problem is by providing the user with a dropdown menu of options they can choose from. Doing so will alleviate the pain of sorting and ease the flow and interface for the user.

To get started we must first make sure we have Javascript, Html, and Css all set up.

cd into the directory that you would like to start your project. Make a project folder and cd into that new folder.

mkdir <project-name>

cd <project-name>

Create your html, js, and css file using the following command.

touch index.html app.js style.css

Now that we have our JS project all set up, its time to set up our HTML file. In many programs if we enter ! into our html file, the following code will generate

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title></head><body></body></html>

The bang symbol is an awesome short cut to set up an HTML file quickly. Once we have our template generated, we can begin to build our Form by adding a <div> in the body to later refrence. The easiest way is simply attaching an id="" so we can use getElementbyId to later manipulate the div. We are going to go ahead and name this div Form so we understand what this div is for.

While we are at our HTML file, lets connect our JS and CSS file as well.

<head>
   <link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
   <script src="app.js"><script/>
</body>

This line of code will allow our HTML file to access and utilize our style.css and our app.js file. The html file should look like the following

<!DOCTYPE html>
<html lang="en">   <head>     <meta charset="UTF-8">     <meta http-equiv="X-UA-Compatible" content="IE=edge">     <meta name="viewport" content="width=device-width, initial-          scale=1.0">      <link rel="stylesheet" type="text/css" href="style.css" />      <title>Document</title>  </head>   <body>      </div id="Form">       </script src="app.js">   </body></html>

Now that we are finished with the HTML its time to move on to JS. In our js file we can use <option/> in list the options in a drop down menu. Lets begin by creating a function named showForm . This function will use the Form node that we built earlier, and display a text box for a text input and a drop down box with the days of the week.

const showForm = () => {
  document.getElementById("Form").innerHTML +=` <form> <input type="text" id="name" > <br>  <select id="days">   <option>Monday</option>   <option>Tuesday</option>   <option>Wednesday</option>   <option>Thursday</option>   <option>Friday</option>   <option>Saturday</option>   <option>Sunday</option>   <select>  <input type="submit"></form>`
}

* If the drop down appears as a list, remove any other style or css files that may be disrupting our flow.

Our web page should look like this at this point. Congrats! you’ve created a drop down option for your form.

Now that we have our beautiful dropdown menu present, here’s how we can access the user’s input. At the bottom of our showForm function, place an addEventListener on the form that we just created. Listen for a submit and on submit, run a function named retrieveInput . Your form should look like this

const showForm = () => {
  document.getElementById("Form").innerHTML +=`<form> <input type="text" id="name" > <br> <select id="days">  <option>Monday</option>  <option>Tuesday</option>  <option>Wednesday</option>  <option>Thursday</option>  <option>Friday</option>  <option>Saturday</option>  <option>Sunday</option> <select><input type="submit"></form>`document.querySelector("form").addEventListener("submit", retrieveFuntion)};

Now we can create our retrieveInput function. In this function, we can simply use event.target.name.value to get the name and event.target.days.value to get our drop down menu option. I hope this tutorial has helped you if there was any confusion. Thank you for reading!

Using Drop down menu with Js/Html/Css

Written by Vincentservio