Build a contact form

Task

Create a contact form with a name field, an email field, and a message field, each with a properly linked <label>.

Requirements

The form is wrapped in <form>
Each field has a matching <label for="..."> linked via id
The email field uses type="email" and the required attribute
There is a <textarea> for the message
There is a submit button: <button type="submit">

Starter code

<form>
</form>

▶ Open in HTML Editor

Hints

The for attribute on <label> must match the id of the matching field.
type="email" automatically enables basic format validation in the browser.
required prevents submitting the form with that field empty.

Show solution

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

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

  <label for="message">Message</label>
  <textarea id="message" name="message" rows="5"></textarea>

  <button type="submit">Send</button>
</form>

Related tools

HTML Editor Online

An online HTML editor with syntax highlighting, line numbers, and a live preview. No sign-up, no server.

Forms

form, input, label, button — the basic building blocks of a data-entry form.

The <form> tag

The action, method, and enctype attributes of the <form> tag, with an example.