Home › Learn › HTML and CSS › Finishing a page

Forms

Lesson 18 of 20. Labels, inputs, and buttons that work for everyone.

A form is <form> containing controls. <input type="email"> gives a keyboard suited to addresses and basic validation; other types include text, password, number, date, checkbox. Every input needs a <label> connected by for="id" matching the input's id, so clicking the label focuses the field and screen readers read the label with it. <button type="submit"> sends the form.

Add required to stop submission of empty fields, and placeholder only as an example, never as the label.

<form>
  <label for="name">Name</label>
  <input id="name" type="text" required>
  <button type="submit">Send</button>
</form>

Your task

Build a form with a label Email connected to an input of type email with the id email and the required attribute, and a submit button.

Part of the final project. form is the newsletter sign-up. It is saved in this browser and loaded into Project: a one-page site when you get there.

Hint 1

<label for="email">Email</label> <input id="email" type="email" required>

Hint 2

<button type="submit">Subscribe</button>

Show the solution
<!doctype html>
<html>
<head>
<style>
</style>
</head>
<body>
<h1>Newsletter</h1>
<form>
  <label for="email">Email</label>
  <input id="email" type="email" required>
  <button type="submit">Subscribe</button>
</form>
</body>
</html>
Preview

    Renders in the preview as you type; the checks read the rendered page.