Find everything wrong with a sign-up form

This sign-up form looks fine but barely works. Find and fix all of the problems.

What to build

A correct sign-up form with the same three fields.

Requirements

It sends with POST to /signup.
Each input has a name: username, email, password.
Each has an id and a joined label, reading Username, Email and Password.
The password box hides what is typed.
Show rules is a button that does not submit the form.
Create account submits the form.

Constraints

Keep the three fields in the same order.

Example

An input with a placeholder and no label has no lasting name once a person starts typing.

Why it works

Each repair fixes something that would fail for real: data not sent, a password in the address, and fields that cannot be identified without seeing them.

Hints

Hint 1

A password must never travel in the address.

Hint 2

Look for inputs with no name and labels joined to nothing.

Hint 3

Placeholders do not replace labels.

Solution

Show one correct solution (try it yourself first)

<form action="/signup" method="post">
  <label for="username">Username</label>
  <input id="username" name="username">
  <label for="email">Email</label>
  <input id="email" name="email" type="email">
  <label for="password">Password</label>
  <input id="password" name="password" type="password">
  <button type="button">Show rules</button>
  <button>Create account</button>
</form>

Lesson: Forms: asking the user for information →