Project 17: Search Results Page

HTML Masterclass

Builds on these lessons

Datalist Forms Datalist Select Fields Select

Step 1 of 3

Project

Search Box with a <datalist>

Add an <input type="search" list="suggestions"> paired with a <datalist id="suggestions"> holding a few <option> suggestions. The list attribute on the input links it to the datalist by id — the browser then offers those suggestions as the visitor types, with zero JavaScript.

🎯 Your Task

Please add the exact code shown in the light gray box below to your editor.Do not delete your previous code, just insert these new lines in the correct place!

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Search Results | HomeFinder</title>
</head>
<body>
  <h1>Search Listings</h1>
  <form action="/search" method="GET">
    <label for="query">Search</label>
    <input type="search" id="query" name="query" list="suggestions">
    <datalist id="suggestions">
      <option value="Austin, TX"></option>
      <option value="Denver, CO"></option>
      <option value="Raleigh, NC"></option>
    </datalist>
  </form>
</body>
</html>

← Previous Next →