Forms · Lesson 10 of 16

Forms and inputs

Collect data from visitors: text, email and choices.

8 minutes3 games

<form> groups inputs. <input> is a field whose kind is set by type: text, email, password, number, checkbox. <label> names a field and links to it with for matching the field's id.

HTML

<form>
  <p>
    <label for="name">Name</label><br>
    <input id="name" type="text" placeholder="Your name" required>
  </p>
  <p>
    <label for="email">Email</label><br>
    <input id="email" type="email">
  </p>
  <p>
    <label><input type="checkbox"> Send me news</label>
  </p>
  <button type="submit">Join</button>
</form>

Try clicking Join with no name: required blocks it.

Quick question

Which type is for a password field?

Complete the code

Link the label to the field.

<label ="age">Age</label>
<input ="age" type="number">

Exercise

Make a form with a labelled email field and a button.

HTML

<form>

</form>

Field name

User value

Request data

Server validation

Learn more from

Played 0 of 3 games

HTML

Forms · Lesson 10 of 16

Forms and inputs

Collect data from visitors: text, email and choices.

8 minutes3 games

HTML

<form>
  <p>
    <label for="name">Name</label><br>
    <input id="name" type="text" placeholder="Your name" required>
  </p>
  <p>
    <label for="email">Email</label><br>
    <input id="email" type="email">
  </p>
  <p>
    <label><input type="checkbox"> Send me news</label>
  </p>
  <button type="submit">Join</button>
</form>

Try clicking Join with no name: required blocks it.

Quick question

Which type is for a password field?

Complete the code

Link the label to the field.

<label ="age">Age</label>
<input ="age" type="number">

Exercise

Make a form with a labelled email field and a button.

HTML

<form>

</form>

Field name

User value

Request data

Server validation

Learn more from

Played 0 of 3 games