Start learning free

LESSON 9 OF 161 · FRONTEND: HTML

A Form

Practice

A form is the part of a page where a visitor types something and sends it. It holds fields to fill in and a button that sends them. A field is an input tag, which has no closing tag. type="email" asks for an email address.

A field also needs a name that a visitor, a screen reader and the check can find. That name comes from a label: its for holds the id of the field it names. A search box on another page could look like this:

<form>
  <label for="q">Search</label>
  <input id="q" name="q" type="search">
  <button>Go</button>
</form>

Here the field is named Search, because the label's for and the field's id are both q. The name is the key the field's value is sent under. A button inside a form sends the form, and its name is its text.

The check opens the page, types an email into the field named Email and clicks Sign up. Under the Our newsletter heading, it must print:

  heading 2: Our newsletter
  field "Email": "" (email)
  button: Sign up
> type "eva@example.com" into "Email"
  +   field "Email": "eva@example.com" (email)
> click "Sign up"
  the browser sends the form itself and loads a new page

Your task: under the Our newsletter heading, add a form with an email field named by the label Email, and a Sign up button.


Assignment
Follow the Coding Tutorial to build the newsletter form: the form, the input, its label and the button.


Hint
The label's for must be exactly the input's id, email. Without a label, the screen prints field "": a field with no name.


STEP 1 OF 4
    Ctrl + Enter to check