More Input Types

We already know the types text and password. The type attribute has many more values, and the browser adapts the input to each of them. Here are a few of them and how they look:

  • type="email" for an email address. On phones, the keyboard shows the @ sign, and when the form is sent, the browser checks that the text looks like an email address.
  • type="number" for numbers.
  • type="date" for a date, which the user can pick from a calendar.
  • type="range" for choosing a value from a range with a slider.

In the next exercises, we'll look at radio buttons, checkboxes, drop-down lists and longer text.

Now let's add an email address to our form. Every input needs a label, so don't forget it.

Instructions

In the empty div, create an input of type email with the attribute name with the value email and the attribute id with the value input-email.

Before the input, create a label with the content Email and the attribute for with the value input-email.

Start programming for free

By signing up, you agree to the Terms of Service and Privacy Policy.

Or sign up with:

5/11