How to create dropdown only using HTML
Developers often create forms using simple input fields. But the problem is, input fields are too “free” — users can easily make spelling mistakes or type the wrong thing. Sure, you can add a placeholder for hints, but that only helps a little.
This is where <datalist> comes in handy. It lets you attach a list of suggestions to an input field, so when users start typing, the browser shows them smart autocomplete options. The best part? You don’t need extra JavaScript or heavy libraries — the browser takes care of it for you.<datalist> makes forms feel much smarter in real life. On a job form, it can suggest roles like Software Engineer. In shopping sites, it can show product categories such as Shoes or Laptops. Health apps might suggest symptoms like Fever, while travel sites can help users quickly pick cities like Tokyo or New York. Even education platforms get easier with course suggestions like Data Science.
Limitations of <datalist>
- You can’t style the dropdown much — the browser controls its appearance.
- For huge datasets (like 10,000 cities),
<datalist>isn’t ideal; you’ll need JavaScript or a library. - It doesn’t work with
<select>or<textarea>.
<!DOCTYPE html>
<html>
<head>
<title>dropdown example</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<h2>Smart Form with Datalist</h2>
<input list="languages" placeholder="Type a language...">
<datalist id="languages">
<option value="HTML">
<option value="CSS">
<option value="JavaScript">
<option value="Rust">
<option value="Go">
</datalist>
<!-- Email suggestion -->
<label>Email:</label>
<input type="email" list="emails" placeholder="Type your email...">
<datalist id="emails">
<option value="user@gmail.com">
<option value="user@yahoo.com">
<option value="user@outlook.com">
</datalist>
<br><br>
<!-- URL suggestion -->
<label>Website:</label>
<input type="url" list="websites" placeholder="Enter website...">
<datalist id="websites">
<option value="https://google.com">
<option value="https://github.com">
<option value="https://stackoverflow.com">
</datalist>
<br><br>
<!-- Number suggestion -->
<label>Age:</label>
<input type="number" list="ages" placeholder="Enter age...">
<datalist id="ages">
<option value="18">
<option value="21">
<option value="25">
<option value="30">
</datalist>
<br><br>
<!-- Date suggestion -->
<label>Meeting Date:</label>
<input type="date" list="dates">
<datalist id="dates">
<option value="2025-09-01">
<option value="2025-09-15">
<option value="2025-10-01">
</datalist>
<br><br>
<!-- Color suggestion -->
<label>Pick a Color:</label>
<input type="color" list="colors">
<datalist id="colors">
<option value="#ff0000">
<option value="#00ff00">
<option value="#0000ff">
<option value="#ffff00">
</datalist>
</body>
</html>
FAQs and Collapsible Content Using <details> and <summary>
When Developers wants create interactive content like FAQs or collapsible sections, they immediately jump to JavaScript or heavy UI libraries. But here’s a secret: HTML already has a built-in feature for this — no JavaScript required.
<details> and <summary> are these two little tags can make your content expandable and interactive with just a few lines of HTML. It’s one of those hidden gems in HTML that many developers ignore, but once you know it, you’ll start using it everywhere.
<details>
<summary>Why should I use Docker?</summary>
<p>Because it makes your app portable, consistent, and easy to deploy anywhere.</p>
</details>
<details>
<summary>What is the difference between Git and GitHub?</summary>
<p>Git is a version control system, while GitHub is a platform that hosts your Git repositories.</p>
</details>
<details>
<summary>Is HTML5 still relevant?</summary>
<p>Yes! It powers almost every modern website and continues to evolve with new features.</p>
</details>
Why Developers Should Use It
By using these developers can write cleaner code. Developers can create FAQs or docs for tutorials, documentation, and knowledge bases. They can also style it using CSS.
Limitations
Of course, <details> and <summary> aren’t a replacement for full JavaScript-powered accordions. If you need advanced animations or nested collapsibles with lots of logic, you’ll still need JS. But for most cases, this is more than enough.
Create Modals with dialog tag
For the longest time, adding a modal popup to a website usually meant reaching out for a heavy JavaScript library or a CSS framework. Developers often relied on jQuery plugins, Bootstrap modals, or custom scripts just to display a simple dialog box. While these worked fine, they often came with a lot of extra code and complexity that wasn’t always necessary.
The good news is, modern HTML has given us a native solution: the <dialog> element. This element comes with built-in methods like .showModal() to open it as a modal and .close() to dismiss it. That means we no longer need bulky libraries for creating basic modals. A few lines of HTML are enough.
<dialog id="myDialog">
<p>Hello, I’m a native modal!</p>
<button onclick="myDialog.close()">Close</button>
</dialog>
<button onclick="myDialog.showModal()">Open Modal</button>That’s it—no extra dependencies, no complicated JavaScript. When you click “Open Modal,” the dialog appears with a backdrop. Click “Close,” and it disappears. Simple and clean.
Of course, if you want to get fancy, you can style the dialog with CSS, customize the backdrop using ::backdrop, or even add animations. But the core idea is that HTML itself now gives us a straightforward way to build modals without relying on third-party solutions.
So next time you need a basic popup or confirmation box, consider the <dialog> element. It keeps your code lightweight, easy to read, and takes advantage of native browser features.