A search form with a filter

Build a search form that can be shared as a link.

What to build

A search form with two labelled text inputs and two buttons.

Requirements

• A form with action="/search" and method="get".
• An input with name="q", labelled Search for.
• An input with name="city", labelled City.
• A submit button reading Go.
• Another button reading Clear, which does not submit the form.

Constraints

Each input must have its own label, joined with for and id.

Example

Sent with q=tea and city=Dhaka, the address would end /search?q=tea&city=Dhaka.

Why it works

GET makes the search into an address that can be saved. type="button" stops the extra button from sending the form.

Hints

Solution

<form action="/search" method="get">
  <label for="q">Search for</label>
  <input id="q" name="q">
  <label for="city">City</label>
  <input id="city" name="city">
  <button>Go</button>
  <button type="button">Clear</button>
</form>

Lesson: Forms: asking the user for information →