Forms, Labels, and Help Text

Build form markup that is understandable before CSS is applied and useful before JavaScript is added.

Edit the panels below and press Run to preview. Nothing you type here is saved — refreshing the page restores the original starter code.

<form class="signup-form">
  <div class="field">
    <label for="name">Name</label>
    <input id="name" name="name" type="text">
  </div>
  <div class="field">
    <label for="email">Email</label>
    <input id="email" name="email" type="email">
  </div>
  <button type="submit">Submit</button>
</form>

.signup-form {
  max-width: 28rem;
}
.field {
  margin-bottom: 1rem;
}
label {
  display: block;
  margin-bottom: 0.35rem;
  font-weight: 600;
}

console.log("Forms lesson loaded");