HTML Country Dropdown List – Select Any Country

All Countries Drop Down List

When creating a registration form or user profile page, it is common to ask users to select their country. Instead of manually typing every country into an HTML <select> element, you can dynamically load all countries using JavaScript and an API.

In this tutorial, you will learn how to create an HTML dropdown list that automatically loads all country names using HTML, CSS, and JavaScript. This approach keeps your code clean, scalable, and easy to maintain.

Why Use a Dynamic Country Dropdown?

Manually adding country options like this:

<option>Uganda</option>
<option>United States</option>
<option>Canada</option>
<option>India</option>

can quickly become inefficient because there are 190+ countries in the world.

Using JavaScript with an API allows you to:

  • Automatically fetch all countries
  • Keep your dropdown updated
  • Reduce manual coding
  • Build more dynamic forms

If you prefer not to read the full tutorial, you can simply watch the video below where I walk through the entire process step by step.

Step 1: Create the HTML Structure

First, create a simple registration form with a dropdown where the countries will appear.

<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>All Countries</title>
<style>
body {
display: grid;
}
label {
display: block;
}
input {
display: block;
margin: 10px 0 10px 0;
}
h1 {
color: teal;
}
.container {
margin: auto;
}
</style>
</head>
<body>
<div class=”container”>
<h1>All countries Dropdown List</h1>
<form action=””>
<input type=”text” name=”username” placeholder=”Username”>
<input type=”email” name=”mail” placeholder=”Email”>
<input type=”password” name=”pass1″ placeholder=”Password”>
<input type=”password” name=”pass2″ placeholder=”Confirm Password”>
<label for=”countries”>Choose your Country:</label>
<select id=”countries” name=”countries”></select>
<input type=”submit” value=”Register”>
</form>
</div>
<script src=”app.js”></script>
</body>
</html>
What This Code Does

The HTML form contains:

  • Username input
  • Email input
  • Password fields
  • A <select> dropdown for countries
  • Submit button

The dropdown is empty initially:

<select id=”countries” name=”countries”></select>

JavaScript will later populate it with country names.

Step 2: Fetch Countries Using JavaScript

Next, create a JavaScript file called app.js that will fetch country data from an API and insert it into the dropdown.

document.addEventListener(‘DOMContentLoaded’, () => {
const selectDrop = document.querySelector(‘#countries’);
// const selectDrop = document.getElementById(‘countries’);
fetch(‘http://restcountries.eu/rest/v2/all’).then(res => {
return res.json();
}).then(data => {
let output = “”;
data.forEach(country => {
output += `
<option value=”${country.name}”>${country.name}</option>`;
})
selectDrop.innerHTML = output;
}).catch(err => {
console.log(err);
})
});
Step 3: How the JavaScript Works

1. Wait for the Page to Load

document.addEventListener(‘DOMContentLoaded’, () => {

This ensures the HTML elements load before JavaScript runs.

2. Select the Dropdown Element
const selectDrop = document.querySelector(‘#countries’);

This targets the <select> element where country options will be inserted.

3. Fetch Data from an API

fetch(‘http://restcountries.eu/rest/v2/all’)

This API returns a list of all countries in JSON format.

4. Convert Response to JSON

res.json();

The response is converted into usable JavaScript data.

5. Loop Through the Countries

data.forEach(country => {

Each country object contains properties like:

  • name
  • capital
  • region
  • population

We only use the country name.

6. Create Dropdown Options

<option value=”${country.name}”>${country.name}</option>

Example output:

<option value=”Uganda”>Uganda</option>
<option value=”Canada”>Canada</option>
<option value=”Germany”>Germany</option>
<option value=”Japan”>Japan</option>
7. Insert the Options into the Dropdown

selectDrop.innerHTML = output;

This dynamically fills the dropdown with all country names.

Final Result

After loading the page, your form will display:

  • Username field
  • Email field
  • Password fields
  • Country dropdown with all countries

Users can easily select their country from the list.

Optional Improvements

You can enhance this project by adding:

1. Default Placeholder Option
let output = `<option value=””>Select Country</option>`;

2. Sort Countries Alphabetically
data.sort((a, b) => a.name.localeCompare(b.name));

3. Add Country Flags

Use additional API data to display flags beside country names.

Conclusion

Creating a dynamic country dropdown list in HTML is simple when using JavaScript and APIs. Instead of manually entering hundreds of country names, you can fetch them automatically and keep your forms modern and scalable.

With this method you learned how to:

  • Build a registration form
  • Fetch country data from an API
  • Dynamically populate an HTML <select> dropdown
  • Improve form usability with JavaScript

This technique is widely used in registration forms, checkout pages, and profile settings across modern web applications.

account_box Author:

date_range Date: 13th, March 2026

access_time Time: 6:44 am

remove_red_eye Views: 37 Views

Advertisement

share