Let the Browser Check in JavaScript

Right now the newsletter form sends whatever is in it, even nothing. HTML can ask the browser to check a field first, with no code at all: required means the field must not be empty, and type="email" means its text must look like an email address. If a check fails, the browser does not send the form and tells the visitor why.

A placeholder is a grey example inside an empty field. It is not a value: a field that only shows a placeholder is still empty. A select is a list the visitor picks one option from, and the first option is picked at the start. A checkbox is an input that is on or off. A label wrapped around it names it, with no for and id.

For example, an order form on another page could ask for a phone number and a size:

<label for="phone">Phone</label>
<input id="phone" name="phone" type="tel" required>
<label for="size">Size</label>
<select id="size" name="size">
  <option>Small</option>
  <option>Large</option>
</select>

The check clicks Sign up with an empty field, then with eva, then fills in everything. Your page must print:

  field "Email": "" (email) (placeholder "you@example.com") (required)
  select "Country": "United States" of [United States, Canada, United Kingdom]
  checkbox "Send me offers": off
  button: Sign up
> click "Sign up"
  the browser does not send the form: the field "Email" is empty
> type "eva" into "Email"
> click "Sign up"
  the browser does not send the form: the field "Email" is not valid
> type "@example.com" into "Email"
> choose "Canada" in "Country"
> click "Send me offers"
  +   checkbox "Send me offers": on
> click "Sign up"
  the browser sends the form itself and loads a new page

Your task: the email input is missing from the form. Type it again with a placeholder and required, then add a Country select with three options and a Send me offers checkbox.

Assignment
Follow the Coding Tutorial to let the browser check the email, and to add the Country select and the Send me offers checkbox.

Hint
required is a word on its own, with no value. Each country is its own option, between <select> and </select>. The checkbox goes inside its label, before the text.